Babel CSS Inline Plugin

DEPRECATED!

If possible use your bundler to inline CSS. This plugin was written before Microbundle implemented that feature. Webpack and Microbundle both support inlining CSS now.

Microbundle with flag --css inline
Webpack with raw-loader

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