Skip to content
This repository has been archived by the owner on Apr 5, 2022. It is now read-only.

🎁 Babel plugin to parses CSS with PostCSS and injecting into JavaScript

License

Notifications You must be signed in to change notification settings

owja/babel-css-inline-plugin

Repository files navigation

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.


codecov Build Status npm version

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