https://github.com/aelbore/inline-lit-element-loader

Webpack loader to inline LitElement external styles and decorators
https://github.com/aelbore/inline-lit-element-loader

css custom-elements inline-styles lit-element lit-html plugin sass scss styles web-components webpack

Last synced: about 2 months ago
JSON representation

Webpack loader to inline LitElement external styles and decorators

• Host: GitHub
• URL: https://github.com/aelbore/inline-lit-element-loader
• Owner: aelbore
• Created: 2019-04-14T01:55:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T13:24:33.000Z (over 1 year ago)
• Last Synced: 2024-07-09T18:44:37.152Z (2 months ago)
• Topics: css, custom-elements, inline-styles, lit-element, lit-html, plugin, sass, scss, styles, web-components, webpack
• Language: TypeScript
• Size: 2.36 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# inline-lit-element-loader

Webpack loader to inline LitElement external styles and decorators

Getting Started

------------

  ```

  git clone https://github.com/aelbore/inline-lit-element-loader.git

  npm install

  ```

Installation

------------

  ```

    npm install --save-dev inline-lit-element-loader

  ```

## Setup

* `hello-world.css`

  ```css

  h1 {

    color: red;

  }

  ```

* `hello-world.js`

  ```javascript

  import { LitElement, html } from 'lit-element'

  import './hello-world.css'

  class HelloWorld extends LitElement {

    static get properties() {

      return {

        message: { type: String }

      }

    }

    render() {

      return html `
Hello ${this.message}
`

    }


  }

  customElements.define('hello-world', HelloWorld)  

  ```

* `webpack.config.js`

  ```javascript

  const path = require('path')

  const TerserPlugin = require('terser-webpack-plugin')

  const CopyPlugin = require('copy-webpack-plugin');

  const INPUT_FILE = path.resolve('./demo/hello-world/hello-world.js')

  const OUTPUT_FILE = path.resolve('./dist/demo/hello-world/hello-world.js')

  const HTML_FILE = path.join(path.dirname(INPUT_FILE), 'index.html')

  const OUTPUT_HTML_FILE = path.join(path.dirname(OUTPUT_FILE), 'index.html')

  const plugins = {

    terser() {

      return new TerserPlugin({

        parallel: true,

        sourceMap: true,

        terserOptions: {

          ecma: 6,

          output: { comments: false }

        }

      })      

    },

    copy() {

      return new CopyPlugin([

        { from: HTML_FILE, to: OUTPUT_HTML_FILE }

      ])    

    }

  }

  module.exports = {

    entry: INPUT_FILE,

    devtool: 'source-map',

    output: {

      path: path.dirname(OUTPUT_FILE),

      filename: path.basename(OUTPUT_FILE)

    },

    module: {

      rules: [

        {

          test: /\.(js|ts)$/,

          exclude: /\.(css|scss)$/,

          loader: 'inline-lit-element-loader'

        }

      ]

    },

    plugins: [ plugins.copy() ],

    optimization: {

      minimizer: [  plugins.terser()  ]

    }

  }

  ```

 * output of your `hello-world.js`

   ```javascript

    import { LitElement, html, css } from 'lit-element'

    class HelloWorld extends LitElement {

      static get properties() {

        return {

          message: { type: String }

        }

      }

      render() {

        return html `
Hello ${this.message}
`

      }


      static get styles() {

        return css `h1 { color: red; }`

      }

    }

    customElements.define('hello-world', HelloWorld)  

   ```

 * Run demo app 

  ```

  npm run serve

  ```

* Go to browser then `http://localhost:3000/demo/hello-world`




## Support Sass

  ```

    npm install --save-dev node-sass

  ```




## Use Lit-Element-Transpiler

  ```

  git submodule init

  git submodule update --remote

  npm run link.transpiler

  ```