https://github.com/ryuran/postcss-variables-prefixer
PostCSS plugin to add a prefix to all css custom properties.
https://github.com/ryuran/postcss-variables-prefixer
hacktoberfest postcss-plugin
Last synced: 10 months ago
JSON representation
PostCSS plugin to add a prefix to all css custom properties.
- Host: GitHub
- URL: https://github.com/ryuran/postcss-variables-prefixer
- Owner: ryuran
- License: mit
- Created: 2019-11-04T09:41:21.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T04:57:12.000Z (almost 3 years ago)
- Last Synced: 2025-03-17T08:42:59.280Z (10 months ago)
- Topics: hacktoberfest, postcss-plugin
- Language: JavaScript
- Homepage:
- Size: 909 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-variables-prefixer
[](https://opensource.org/licenses/MIT)
PostCSS plugin to add a prefix to all css custom properties.
## Usage
### With [PostCSS cli](https://github.com/postcss/postcss-cli):
Install `postcss`, `postcss-cli` and `postcss-variables-prefixer` on your project directory:
```
npm install postcss postcss-cli postcss-variables-prefixer --save-dev
```
and in your package.json
```json
"scripts": {
"postcss": "postcss input.css -u postcss-variables-prefixer -o output.css"
}
```
### Others
```js
postcss([ require('postcss-variables-prefixer')({ /* options */ }) ])
```
### Options
#### prefix
Type: `string`
Default: none
String to be used as prefix
#### ignore
Type: `array`
Default: `[]`
Array of css custom properties to be ignored by the plugin, accepts string and regex.
## Example
Example of usage with results generated by the plugin.
### Code
```js
const postcss = require('postcss');
const prefixer = require('postcss-variables-prefixer');
const input = fs.readFileSync('path/to/file.css', 'utf-8');
const output = postcss([
prefixer({
prefix: 'prefix-',
ignore: [ /bar/, '--ignore' ]
})
]).process(input);
```
### Input:
```css
:root {
--foo: red;
--foo-bar: green;
--ignore: 300px;
--not-ignored: 100px;
--bar: yellow;
}
div {
background-color: var(--foo);
color: var(--foo-bar);
width: var(--ignore);
height: var(--not-ignored);
border-color: var(--bar)
}
```
### Output:
```css
:root {
--prefix-foo: red;
--foo-bar: green;
--ignore: 300px;
--prefix-not-ignored: 100px;
--bar: yellow;
}
div {
background-color: var(--prefix-foo);
color: var(--foo-bar);
width: var(--ignore);
height: var(--prefix-not-ignored);
border-color: var(--bar)
}
```
## Credits
Plugin inspired by [postcss-prefixer](https://github.com/marceloucker/postcss-prefixer) created by [marceloucker](https://github.com/marceloucker).
Thanks to [Andrey Sitnik @ai](https://github.com/ai) and [Jonathan Neal @jonathantneal](https://github.com/jonathantneal) for the help.