Skip to content

Commit 3125c87

Browse files
committed
Update README.md
Added how to pass configuration to the plugin
1 parent 46b2630 commit 3125c87

File tree

1 file changed

+28
-1
lines changed

1 file changed

+28
-1
lines changed

README.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# PostCSS Variable Compress
22

3-
[postcss-variable-compress] is a [PostCSS] plugin minifies variable names and saves space. It can safely convert for css variable fallback cases as well. It replaces css variables via a counter and converts that counter into base 36 string as javascript inherent implementation is limited to this but beyond such no one would notice a difference as right now even if you have 1295 css variables they will not exceed two characters.
3+
[postcss-variable-compress] is a [PostCSS] plugin minifies variable names and saves space. It can safely convert for css variable fallback cases as well. It replaces css variables via a counter and converts that counter into base 36 string as javascript inherent implementation is limited to this but beyond such no one would notice a difference as right now even if you have 1295 css variables they will not exceed two characters. It will transform any css variable it encounters without breaking your stylesheet. If you want it doesn't modify some css variables pass them as an array
44

55
[PostCSS]: https://github.com/postcss/postcss
66
[postcss-variable-compress]: https://github.com/navanshu/postcss-variable-compress
@@ -84,4 +84,31 @@ module.exports = {
8484
}
8585
```
8686

87+
**Step 4:** Pass configuration to the plugin. It takes an array of css variables that you don't need to transform:
88+
89+
```diff
90+
module.export = {
91+
plugins: [
92+
require('cssnano'),
93+
+ require('./postcss/compress')([
94+
+ '--colorPre',
95+
+ '--colorPreAlpha',
96+
+ '--colorPrimary',
97+
+ '--colorPrimaryAlpha',
98+
+ '--colorPost',
99+
+ '--colorPostAlpha',
100+
+ '--light',
101+
+ '--dark',
102+
+ '--lightAlpha',
103+
+ '--darkAlpha',
104+
+ '--lighterAlpha',
105+
+ '--darkerAlpha',
106+
+ '--font',
107+
+ '--vh',
108+
+ '--r'
109+
+ ])
110+
]
111+
}
112+
```
113+
87114
[official docs]: https://github.com/postcss/postcss#usage

0 commit comments

Comments
 (0)