Normally Palatable Mango

    postcss-value-replace

    2.0.0 • Public • Published

    postcss-value-replace

    PostCSS plugin that replaces values specified in options. This is an easy way to create flexible themes.

    Example

    Input

    a {
        color: replace(linkColor);
        background: rgba(replace("red"), replace("green"), replace("blue"), replace(alpha));
        margin: replace("margin");
        font-weight: replace(font-weight);
    }

    Options

    postcss([require("postcss-value-replace")({
        replace: {
             linkColor: "#00CC00",
             red: 200,
             green: 60,
             blue: 80,
             alpha: 0.5,
             margin: "5px 2px 5px 2px",
             "font-weight": "bold"
        }
    })])

    Output

    a {
        color: #00CC00;
        background: rgba(200, 60, 80, 0.5);
        margin: 5px 2px 5px 2px;
        font-weight: bold;
    }

    Options

    • functionName = "replace" Name of the CSS function postcss-value-replace looks for
    • replace = {} Object where keys are the first argument of the CSS replace() function and values the corresponding replacement value

    Add key-value-pairs to replace to make this plugin replace values in your CSS.

    Plugin order

    This should be the first plugin in your plugins array.

    Install

    npm i postcss-value-replace

    DownloadsWeekly Downloads

    8

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    55.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • jaid