Neverending Prototype Mode

    esbuild-plugin-lit-css
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    esbuild-plugin-lit-css

    ESBuild plugin to import css files as JavaScript tagged-template literal objects.

    The "Lit" stands for "Literal"

    You can use it to import CSS for various libraries like lit-element, @microsoft/fast-element, or others.

    Do I Need This?

    No. This is an optional package who's sole purpose is to make it easier to write CSS-in-CSS while working on lit-element projects. You can just as easily write your CSS in some 'styles.css.js' modules a la:

    import { css } from 'lit-element';
    export default css`:host { display: block; }`;

    And this may actually be preferred.

    Hopefully this package will become quickly obsolete when the CSS Modules Proposal (or something like it) is accepted and implemented.

    In the mean time, enjoy importing your CSS into your component files.

    Options

    Name Accepts Default
    filter RegExp of file names to apply to /\.css$/i
    uglify Boolean or Object of uglifycss options. false
    specifier Package to import css from lit
    tag Name of the template-tag function css
    transform Optional function (sync or async) which transforms css sources (e.g. postcss) x => x

    Usage

    import esbuild from 'esbuild';
    import { litCssPlugin } from 'esbuild-plugin-lit-css';
    
    await esbuild.build({
      ...theRestOfYourConfig,
      plugins: [
        litCssPlugin(),
      ],
    });

    Then import your CSS:

    :host {
      display: block;
    }
    
    h1 {
      color: hotpink;
    }
    import { LitElement, customElement, html } from 'lit-element';
    
    import style from './css-in-css.css';
    
    @customElement('css-in-css')
    class CSSInCSS extends LitElement {
      static get styles() {
        return [style];
      }
    
      render() {
        return html`<h1>It's Lit!</h1>`;
      }
    }

    Usage with FAST

    plugins: [
      litcss({ specifier: '@microsoft/fast-element' })
    ]
    import { FASTElement, customElement, html } from '@microsoft/fast-element';
    
    import styles from './css-in-css.css';
    
    const template = html<CSSinCSS>`<h1>It's Lit!</h1>`;
    
    @customElement({ name: 'css-in-css', template, styles })
    class CSSinCSS extends FASTElement {}

    Usage with Sass, Less, PostCSS, etc.

    To load scss files:

    1. Specify the filter option to litCssPlugin to include scss files
    2. Define a transform function in the plugin options.
    // esbuild script
    import esbuild from 'esbuild';
    import Sass from 'sass';
    
    await esbuild.build({
      entryPoints: [/*...*/],
      plugins: [
        litCssPlugin({
          filter: /.scss$/,
          transform: (data, { filePath }) =>
            Sass.renderSync({ data, file: filePath })
              .css.toString(),
        }),
      ]
    });

    Similarly, to transform sources using PostCSS, specify a transform function:

    import esbuild from 'esbuild';
    import postcss from 'postcss';
    import postcssNesting from 'postcss-nesting';
    
    const processor = postcss(postcssNesting());
    
    await esbuild.build({
      entryPoints: [/*...*/],
      plugins: [
        litCssPlugin({
          transform: (css, { filePath }) =>
            processor.process(css, { from: filePath })
              .css,
        }),
      ]
    });

    Looking for webpack? lit-css-loader Looking for rollup? rollup-plugin-lit-css

    Install

    npm i esbuild-plugin-lit-css

    DownloadsWeekly Downloads

    195

    Version

    2.0.0

    License

    ISC

    Unpacked Size

    29.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • bennyp