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

2.0.1 • Public • Published

lit-css-loader

Webpack loader 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
include Array of glob of files to include. ['**/*.css']
exclude Array of glob of files to exclude. undefined
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

npm i -D lit-css-loader
module: {
  rules: [
    {
      test: /\.css$/,
      loader: 'lit-css-loader',
      options: {
        specifier: 'lit-element' // defaults to `lit`
      }
    }
  ]
}
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

import style from './styled-el.css';

@customElement('styled-el')
export class extends LitElement {
  static styles = [style]
  render() {
    return html`<p>such style. very win</p>`;
  }
}

Usage with Sass, Less, PostCSS, etc.

To load scss files:

  1. Adjust the test clause of the module rule as needed (e.g)
  2. Pass a transform function to the loader options
const Sass = require('sass');
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'lit-css-loader',
        options: {
          transform: (data, { filePath }) =>
            Sass.renderSync({ data, file: filePath })
              .css.toString(),
        }
      }
    ]
  }
}

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

const postcss = require('postcss');
const postcssNesting = require('postcss-nesting');

const processor = postcss(postcssNesting());

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'lit-css-loader',
        options: {
          transform: (css, { filePath }) =>
            processor.process(css, { from: filePath })
              .css
        }
      }
    ]
  }
}

Looking for rollup? rollup-plugin-lit-css Looking for esbuild? esbuild-plugin-lit-css

Package Sidebar

Install

npm i lit-css-loader

Weekly Downloads

7,150

Version

2.0.1

License

ISC

Unpacked Size

28.8 kB

Total Files

5

Last publish

Collaborators

  • bennyp