modify-selectors

    2.0.0 • Public • Published

    PostCSS Modify Selectors

    Post CSS plugin to modify CSS selectors, you can replace, modify or simply add a prefix and suffix. You can match a selector using a simple string compare, a regular expression and even a function.

    Installation

    $ npm i modify-selectors --save-dev

    Usage

    const postcss = require("postcss");
    
    postcss([
        require("modify-selectors")({
            enable: true,
            replace: [
                {
                    match: 'body',
                    with: '.replacedBody',
                },
                {
                    match: /wrapper|wrapperContainer/,
                    with: '.container',
                }
            ],
            modify: [],
            prefix: [],
            modify: [],
        })
    ]).process(cssCode).then((result) => {
        console.log(result.css);
    });

    Match a selector

    When your CSS file is processed PostCSS loops all selectors in the file so you can modify them. Please take a looks at the examples below to learn how to check for selectors.

    /*Imagine you have the following CSS code*/
    html {
        color: red;
    }
    body {
        font-size: 12px;
    }
    .container {
        max-width: 960px;
    }
    match: '*', // it matches every single selector
    match: 'body', // match the body selector
    match: /html|body/, // you can use a regular expression, this will match html and body
    match: (selector) => {
        // you can use a function to verify the selector, if it returns true, the selector will be processed
        return selector.includes(':hover');
    },

    Replace

    You can replace selectors completely, for example:

    postcss([
        require("modify-selectors")({
            enable: true,
            replace: [
                {
                    match: 'body',
                    with: '.replacedBody', //body will be replaced with .replacedBody
                },
                {
                    match: 'textarea',
                    with: 'textarea.small', //textarea will be replaced with textarea.small
                }
            ],
        })
    ]).process(cssCode).then((result) => {
        console.log(result.css);
    });

    Modify

    You can modify selectors, for example:

    postcss([
        require("modify-selectors")({
            enable: true,
            modify: [
                {
                    match: '*', // run in every selector
                    with: (selector) => {
                        return selector.replace('::before', '::after')
                    },
                },
                {
                    match: (selector) => {
                       // or run in selectors with :hover
                       return selector.includes(':hover');
                    },
                    with: (selector) => {
                        return selector.replace('::before', '::after')
                    },
                },
            ],
        })
    ]).process(cssCode).then((result) => {
        console.log(result.css);
    });

    Prefix

    postcss([
        require("modify-selectors")({
            enable: true,
            prefix: [
                {
                    match: '*',
                    with: '.myapp', // every selector will be prefixed with .myapp, for example: .myapp h1, .myapp p, etc.
                },
            ],
        })
    ]).process(cssCode).then((result) => {
        console.log(result.css);
    });

    Suffix

    postcss([
        require("modify-selectors")({
            enable: true,
            suffix: [
                {
                    match: '*',
                    with: ' > *', // every selector will be suffixed with > *, for example: ul li > *
                },
            ],
        })
    ]).process(cssCode).then((result) => {
        console.log(result.css);
    });

    Install

    npm i modify-selectors

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    8.55 kB

    Total Files

    3

    Last publish

    Collaborators

    • biati