Nightly Procrastination Machine

    prefix-css-loader

    1.0.0 • Public • Published

    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"
            }
        }
    ]

    Install

    npm i prefix-css-loader

    DownloadsWeekly Downloads

    257

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.87 kB

    Total Files

    4

    Last publish

    Collaborators

    • andreas_arvidsson