inject-css-in-js-webpack-plugin

A webpack plugin to convert an external stylesheet to an embedded stylesheet in JS

html-inline-css-webpack-plugin

A webpack plugin to convert an external stylesheet to an embedded stylesheet in JS. Heavily inspired by HtmlInlineCSSWebpackPlugin which is for making CSS internal in HTML files as opposed to JS files.

<link rel="stylesheet" /> => document.createTextNode(document.createElement('style'))

Requires mini-css-extract-plugin If you are using html-webpack-plugin, whatever CSS bundle you want needs to have inject: false for the HtmlWebpackPlugin for that chunk.

Install

NPM

npm i inject-css-in-js-webpack-plugin -D

Yarn

yarn add inject-css-in-js-webpack-plugin -D

Example

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InjectCssInJsWebpackPlugin = require("inject-css-in-js-webpack-plugin").default;
 
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        new HtmlWebpackPlugin({
            inject: false
        }),
        new InjectCssInJsWebpackPlugin( new HTMLInlineCSSWebpackPlugin({
            filter(filename) {
                return filename.includes('bundle'); // use filter if you only want to inline css from the CSS file with bundle in the filename
            },
            replace: {
                fileTarget: 'bundle', // this is the built file we'll look for the target to replace with the style tag
                target: '<span data-css="true"></span>' // this will be replaced with the style tag
            }
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    }
}

Config

interface Config {
    filter?(filename: string): boolean
    replace?: {
        fileTarget?: string
        target: string
    }
}

filter(optional)

filter?(filename: string): boolean

Return true to make current file internal, otherwise ignore current file.

example

  new InjectCssInJsWebpackPlugin({
    filter(filename) {
      return filename.includes('bundle')
    }
  })

replace(optional)

replace?: {
    fileTarget?: string
    target?: string
}

fileTarget

A file to search for the target ie bundle.js

target

A target in the generated Javascript for adding the internal stylesheet

example

ReactDOM.render(
    <React.Fragment>
        {/* Replace this comment */ }
        <h1>I'm getting styles nearby</h1>
    </React.Fragment>,
    document.getElementById('root')
)

...
  new InjectCssInJsWebpackPlugin({
    filter(filename) {
        return filename.includes('bundle')
    },
    replace: {
      fileTarget: 'bundle.js',
      target: '/* Replace this comment */',
    },
  }),
...

Output: