https://github.com/aelbore/rollup-plugin-inline-lit-element

Rollup plugin to inline external styles in lit-element
https://github.com/aelbore/rollup-plugin-inline-lit-element

css inline-css inline-styles lit-element lit-html plugin rollup styles

Last synced: 16 days ago
JSON representation

Rollup plugin to inline external styles in lit-element

• Host: GitHub
• URL: https://github.com/aelbore/rollup-plugin-inline-lit-element
• Owner: aelbore
• Created: 2019-04-05T03:29:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T19:18:12.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T20:47:19.903Z (about 1 month ago)
• Topics: css, inline-css, inline-styles, lit-element, lit-html, plugin, rollup, styles
• Language: TypeScript
• Size: 1.66 MB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/rollup-plugin-inline-lit-element.svg)](https://www.npmjs.com/package/rollup-plugin-inline-lit-element)

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

# rollup-plugin-inline-lit-element

Rollup plugin to inline external styles in lit-element, transpile decorators to native javascript (see [Decorators](https://github.com/aelbore/rollup-plugin-inline-lit-element/tree/master/demo/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 ](https://github.com/aelbore/inline-styles-lit-element)

* [ Todo App ](https://github.com/aelbore/inline-styles-lit-element/tree/todo-lit-element)

* [ Decorators ](https://github.com/aelbore/rollup-plugin-inline-lit-element/tree/master/demo/decorators)

## 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)  

  ```

* `rollup.config.js`

  ```javascript

  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`

   ```javascript

    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 `
Hello ${this.message}
`

      }


    }

    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

  ```