aelbore / rollup-plugin-inline-lit-element

Rollup plugin to inline external styles in lit-element

rollup-plugin-inline-lit-element

Rollup plugin to inline external styles in lit-element, transpile decorators to native javascript (see Decorators)

Getting Started

git clone https://github.com/aelbore/rollup-plugin-inline-lit-element.git
npm install

Installation

  npm install --save-dev rollup-plugin-inline-lit-element

Examples

• Hello World
• Todo App
• Decorators

Setup

• hello-world.css

  h1 {
    color: red;
  }

• hello-world.js

  import { LitElement, html } from 'lit-element'
  import './hello-world.css'
  
  class HelloWorld extends LitElement {
  
    static get properties() {
      return {
        message: { type: String }
      }
    }
  
    render() {
      return html `<h1>Hello ${this.message}</h1>`
    }
  
  }
  
  customElements.define('hello-world', HelloWorld)  

• rollup.config.js

  import minifyHTML from 'rollup-plugin-minify-html-literals';
  import resolve from 'rollup-plugin-node-resolve'
  
  import { terser } from 'rollup-plugin-terser'
  import { inlineLitElement } from 'rollup-plugin-inline-lit-element'
  
  export default {
    treeshake: true,
    input: 'src/hello-world.js',
    external: [],
    plugins: [
      minifyHTML(),
      inlineLitElement(),
      resolve(),
      terser()
    ],
    output: {
      sourcemap: true,
      globals: {},
      file: 'dist/hello-world.js',
      format: 'esm'
    }
  }  

• output of your hello-world.js

   import { LitElement, html, css } from 'lit-element'
  
   class HelloWorld extends LitElement {
  
     static get styles() {
       return css `h1 { color: red; }`
     }
  
     static get properties() {
       return {
         message: { type: String }
       }
     }
  
     render() {
       return html `<h1>Hello ${this.message}</h1>`
     }
  
   }
  
   customElements.define('hello-world', HelloWorld)  

Support Sass

  npm install --save-dev node-sass

Use Lit-Element-Transpiler

git submodule init
git submodule update --remote

npm run link.transpiler

rollup-plugin-inline-lit-element's Issues

add postcss preprocessor

• able to use postcss
• can add postcss plugins
• dev can choose if node-sass pr postcss

[QUESTION] Multiple shareable CSS

Does this support inlining multiple shareable CSS component?

/** common.css */
:host {
  display: block;
}

* {
  box-sizing: border-box;
}

/** button.css */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background: inherit;
  color: inherit;
  font: inherit;
  border: none;
}

/** Input */
...
import 'common.css';
import 'button.css';

...

/** Expected output */
...
static styles = [
  css`:host { display: block; }`,
  css`button { ... /** Truncate for brevity */ }`,
];
...