README

prefix-css-loader

Webpack loader to prefix css selectors

Installation

npm install prefix-css-loader --save

Description

A tool for when you have the need to prefix all your css with the same selector. Useful for embedding componenets without a shadow dom and not change the styles on the host page.

Converts this

h1 {
    color: red;
}

@media screen and (min-width: 768px) {
    h1 {
        color: blue;
    }
}

Into this

.my-class h1 {
    color: red;
}

@media screen and (min-width: 768px) {
    .my-class h1 {
        color: blue;
    }
}

Usage

In webpack config use the loader for your css/style files.

{
    test: /\.css$/,
    use: [
        "css-loader",
        {
            loader: "prefix-css-loader",
            options: {
                selector: ".my-class",
                exclude: null,
                minify: false
            }
        }
    ]
}

Options

selector
- The selector prefix to use. Can be any css selector.
- Type: string
- Required: Throws error if omitted.
- Example: ".my-class", "#my-id", "my-tag", "#my-id.my-class"
exclude
- Regular expression for selectors to exclude from update. Excluded selectors are unchanged.
- Type: string | RegExp
- Optional: No exclution by default.
- Example: "h1", /h1/, ".label", /.label/
minify
- Minify css. Remove comments and whitespaces.
- Type: boolean
- Optional: By default minify on production mode.

Query params

Options can be passed via webpack config or as query params on import.
Query params takes precedence over webpack config for that specific file.

import "styles.css?selector=.my-class";

@import

One stylesheet can include another stylesheet with the @import rule. To also prefix that file use importLoaders option on css-loader.

[
    {
        loader: "css-loader",
        options: {
            //Include 1 previous loader for @import. ie use prefix-css-loader for @import.
            importLoaders: 1
        }
    },
    {
        loader: "prefix-css-loader",
        options: {
            selector: ".my-class"
        }
    }
]

Usage no npm install needed!