lit-scss-loader

Automatically generate the style-wrapper that is required for LitElement, simply by importing the CSS/SCSS file

Usage no npm install needed!

<script type="module">
  import litScssLoader from 'https://cdn.skypack.dev/lit-scss-loader';
</script>

README

It is a fork of polymer-css-loader! But since the loader was only developed for polymer. I adopted it for lit-element. This is still a work in progress. While this may have worked well on my windows machine, there may still be unforeseen bugs and the API may change in the future.

lit-scss-loader

A loader for webpack that lets you import the CSS/SCSS into your lit-element and automatically creates the styling JavaScript for you.

Install:

npm i -D lit-scss-loader extract-loader

Requirements

  • LitElement
  • Webpack 4 ('extract-loader', 'css-loader', 'sass-loader')

How this works:

  1. Include it in your Webpack Config. Include it "last" or after all the loaders. You will need to use extract-loader if you're using sass-loader, less-loader and/or css-loader
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
     {
        test: /\.css|\.s(c|a)ss$/,
        use: [{
          loader: 'lit-scss-loader',
          options: {
            minify: true, // defaults to false
          },
        }, 'extract-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};
  1. Include your .css or .scss or .less file in your JavaScript:
import { html, LitElement } from 'lit';

import Style1 from './style-1.scss';
import Style2 from './style-2.css';

class LitTestComponent extends LitElement {

  constructor(){
    super();
    this.prop1 = '🔥-app';
  }

  static get properties() {
    return {
      prop1: {
        type: String
      },
    };
  }

  static get styles() {
        return [Style1, Style2];
  }

  render() {
    return html`
      <p>This is the test component</p>
      <p>This is the propertie's value: ${this.prop1} </p>
      <div id="test">This font size should be bigger</div>
    `;
  }
}

window.customElements.define('lit-test-component', LitTestComponent);
  1. Use the base name of the file as the name for <style include="">. Example, if you imported a filename called my-polymer-3.scss, you'd do it like this:
static get template() {
  <style include="my-polymer-3">
  </style>
}

Typescript

If you're using this loader in a Typescript project, you will also need to inform the compiler that it has the ability to load CSS/SCSS files. This project already provides the module declarations, so all you need to do is include the type declaration file in your tsconfig.json file.

{
  "compilerOptions": {
    "...": "...."
  },
  "include": [
    "node_modules/lit-scss-loader/types.d.ts"
  ]
}

Options

Name Type Default Description
minify {Boolean} false When true, it will minify both the CSS and JavaScript output.
defaultSkip {Boolean} false When true, will skip all imports except those explicilty marked.

Files Parameters

These are appended at the end of the CSS imports in your JavaScript file (Where the component is declared); E.g:

import './style-2.css?name=maria';
import './style-1.css?skip';
Name Type Default Description
skip {boolean} N/A Setting this parameter will skip the import altogether. This may be useful if you're using React and Lit or you'd like to include the CSS without. E.g: import './style-2.css?skip'
include {boolean} N/A Just setting this parameter will include the css even when defaultSkip is on. This may be useful if you just want to "litify" or "web-componentize" a .css/.scss/.less file. E.g: import './style-2.css?include'. Note: include will take preference over skip.

Need an example?

Build lit-scss-loader with npm run build, then navigate to test-app and execute: npm start. It will launch an express server @ localhost:3000. Then, run webpack. (Remember to have webpack-cli installed)

Legacy Support

The loader automatically injects code (e.g. import {css} from 'lit';) into your files, therefore, pay attention if you need es5 / legacy browsers support. As LambyPants mentioned, you might have to adopt your loaders configuration to also test for /\.js$|\.ts$|\.s(c|a)ss$/ and transform it to your needed language support.

Why this loader

When using css for components inline or inside of a javascript file we will loose autocompletion or any analysis tools that are already out there for plain CSS/SCSS files. Also, designer may don't want to work inside .js files. Let them work with what they are used to.

With this, you just import your .css in your lit-component, add the style-variable to the static get styles() and you're set! The loader takes care for creating the content of that variable!

Ideas? Feedback?

Open a Github issue now! 😊