gem-hunter
Language: TypeScript
Rollup plugin to inline external styles in lit-element
Rollup plugin to inline external styles in lit-element, transpile decorators to native javascript (see Decorators)
git clone https://github.com/aelbore/rollup-plugin-inline-lit-element.git
npm install
npm install --save-dev rollup-plugin-inline-lit-element
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)
npm install --save-dev node-sass
git submodule init
git submodule update --remote
npm run link.transpiler