PostCSS Variable Compress
postcss-variable-compress is a PostCSS plugin minifies variable names and saves space. Even if you have 1295 css variables still they will not exceed by two characters. It will transform css variable without breaking your stylesheet.
If you want it not modify some css variables, then pass them --{variable-name} as an array to the plugin.
:root {
--first-color: #16f;
--second-color: #ff7;
}
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
#container {
--first-color: #290;
}
:root {
--0: #16f;
--1: #ff7;
}
#firstParagraph {
background-color: var(--0);
color: var(--1);
}
#container {
--0: #290;
}
Usage
Step 1: Install plugin:
npm install --save-dev postcss postcss-variable-compress
Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
Step 3: Add the plugin at the end of the plugins list:
module.exports = {
plugins: [
require('cssnano'),
+ require('postcss-variable-compress')
]
}
Step 4: Pass configuration to the plugin. It takes an array of css variables that you don't need to transform.
module.export = {
plugins: [
require('cssnano'),
+ require('postcss-variable-compress')([
+ '--colorPrimary',
+ '--colorPrimaryAlpha',
+ '--light',
+ '--dark',
+ '--font',
+ '--vh',
+ '--r'
+ ])
]
}
0 Dec 30, 2021
655 Sep 18, 2022
4 Apr 25, 2022
6 Dec 7, 2022
3 Dec 20, 2021
8 Sep 5, 2022
2 Jan 8, 2022
31 Jul 27, 2022
7 Jul 8, 2022
5 Feb 11, 2022
5 Apr 1, 2022
11 May 16, 2022
3 Aug 23, 2022
65 Dec 15, 2022
9 Oct 14, 2022
20 Dec 15, 2022
2 Aug 2, 2021
3 Oct 3, 2022
5 Dec 2, 2022