Babel CSS Inline Plugin

This plugin parses css with PostCSS and inline it into JavaScript.

Example

CSS File

div {
    color: #333;
    display: flex;
}

JS File

import styles from "./styles.css";

JavaScript Output

const styles = "div{color:#333;display:flex;display:-webkit-flex}";

Why?

This plugin is created to inline CSS into WebComponents with a ShadowRoot.

import styles from "./my-component.css";

class MyComponent extends HTMLElement {
    protected readonly _root: ShadowRoot;

    constructor() {
        super();
        this._root = this.attachShadow({mode: "closed"});
    }

    connectedCallback() {
        const style = document.createElement("style");
        style.textContent = styles;
        this._root.appendChild(style);
    }
} 

Currently autoprefixer and cssnano are enabled. To configure the browsers to support simply add a browserlist property to the `package.

Usage

Install the plugin:

npm install --save-dev @owja/babel-css-inline-plugin

Add the plugin to the Babel configuration:

babel.config.js

module.exports = {
    plugins: ['module:@owja/babel-css-inline-plugin'],
};

With TypeScript you have to add a definition file:

src/types/css.d.ts

declare module "*.css" {
    const content: string;
    export default content;
}

Now you can import CSS files:

import styles from "./my-styles.css";

which compiles to

const styles = "<css styles>";

Notice

The plugin uses PostCSS CLI which is slow. The reason is that Babel does not support async plugins yet. This might change in the future. A other workaround could be to implement a server/client to sync PostCSS.

This plugin is marked as alpha but it should stay backwards compatible.

It is possible that we will add some features in the future:

• CSS Modules
• Configurable file extension, to make it possible to only inline specific files

Development

Clone this repository and run npm install.

Tests

npm test

Build

npm run build

License

MIT

Copyright © 2020 Hauke Broer