constructable-style-loader v1.0.0-alpha.8

constructable-style-loader

Apply CSS directly to a DOM element as a constructable stylesheet. Constructable-style-loader creates CSSStyleSheetObject JavaScript object, which can be adopted to an element using adoptedStyleSheets setter.

It can be optionally chained with postcss-loader when need to use output from other CSS preprocessors. If used with postcss-loader, then also consider postcss-discard-comments plugin to delete unnecessary comments that would bloat the bundle and potentially have invalid characters that can break the parser.

Getting Started

To begin, install constructable-style-loader:

npm install --save-dev constructable-style-loader

Then add the loader to your webpack config. For example:

style.css

.panel {
  background-color: orange;
  border-style: solid;
}

panel.js

import style from './style.css';

class Panel extends HTMLElement {
    constructor() {
        super();

        this.attachShadow({mode: "open"});
        this.shadowRoot.innerHTML = `<div class="panel">Panel CMP</div>`;
        this.shadowRoot.adoptedStyleSheets = [style]
    }
}

if (customElements.get('ata-panel') == null) {
    customElements.define('ata-panel', Panel);
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['constructable-style-loader'],
      },
    ],
  },
};

Optional usage with purgecss

Loader options accept object that will be passed to purgecss plugin (assuming it is installed), if {purge: true} property is present.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
            {
                loader: 'constructable-style-loader',
                options: {
                    purge: true,
                    content: ['**/*.js'],
                    safelist: ['white-listed']
                }
            },
        ]
      },
    ],
  },
};

If constructable-style-loader is chained after post-loader, purgecss will be given AST root from PostCSS to avoid duplicate parsing of CSS string.

Note about performance

In case of web components, creating a separate CSS tree per component ended up being unnecessary. Browser does not appear to be duplicating CSS tree in every place where it is applied the way inserting tag in every shadow root would, but only points to it. On the contrary, having separate CSS tree per component only expanded bundle size. Could potentially investigate if there are any performance wins if CSSStyleSheetObjects are created at runtime, not compile time.