https://github.com/jaid/postcss-value-replace

PostCSS plugin that replaces any value specified in options.
https://github.com/jaid/postcss-value-replace

css extension plugin postcss postcss-plugin preprocessor style sugar transpile

Last synced: 23 days ago
JSON representation

PostCSS plugin that replaces any value specified in options.

• Host: GitHub
• URL: https://github.com/jaid/postcss-value-replace
• Owner: Jaid
• License: mit
• Created: 2017-08-19T15:25:39.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2022-12-08T16:38:09.000Z (about 2 years ago)
• Last Synced: 2024-11-29T15:47:24.607Z (24 days ago)
• Topics: css, extension, plugin, postcss, postcss-plugin, preprocessor, style, sugar, transpile
• Language: JavaScript
• Homepage: https://github.com/Jaid/postcss-value-replace
• Size: 2.15 MB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

README

        
# postcss-value-replace

[PostCSS](https://github.com/postcss/postcss) plugin that replaces values specified in options. This is an easy way to create flexible themes.

## Example

Input

```css

a {

    color: replace(linkColor);

    background: rgba(replace("red"), replace("green"), replace("blue"), replace(alpha));

    margin: replace("margin");

    font-weight: replace(font-weight);

}

```

Options

```js

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

```css

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.