es-dev-server-import-css

es-dev-server-import-css JS library on GitHub es-dev-server-import-css JS library on npm Download es-dev-server-import-css JS library

An es-dev-server response transformer for importing css as lit-element tagged literals

Version 2.1.0 License ISC
es-dev-server-import-css has no homepage
es-dev-server-import-css JS library on GitHub
es-dev-server-import-css JS library on npm
Download es-dev-server-import-css JS library
Keywords
csslit-elementes-dev-server

es-dev-server-import-css

Import CSS Files into your LitElement Components and serve them with es-dev-server

Usage

es-dev-server.config.js

const litcss = require('es-dev-server-import-css');
module.exports = {
  port: 8080,
  watch: true,
  nodeResolve: true,
  appIndex: 'demo/index.html',
  moduleDirs: ['node_modules', 'web_modules'],
  plugins: [
    litcss({
      exclude: ['/src/styles.css'] // linked in html <head>
    })
  ],
};

lit-css.js

import { LitElement, html } from 'lit-element';
import style from './style.css';
export class LitCss extends LitElement {
  static get styles() { return style; }
  render() { return html`<p>😎</p>`; }
}
customElements.define('lit-css', LitCss);

style.css

:host { background: rebeccapurple; }
p { font-style: italic; }

demo/index.html

<script type="module" src="../lit-css.js"></script>
<lit-css></lit-css>