You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.8 KiB
2.8 KiB
PostCSS Unset Value
PostCSS Unset Value lets you use the unset keyword, following the CSS Cascading and Inheritance specification.
.color {
color: unset;
}
.border-color {
border-color: unset;
}
.margin {
margin: unset;
}
/* becomes */
.color {
color: inherit;
}
.border-color {
border-color: initial;
}
.margin {
margin: initial;
}
Usage
Add PostCSS Unset Value to your project:
npm install postcss @csstools/postcss-unset-value --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssUnsetValue = require('@csstools/postcss-unset-value');
postcss([
postcssUnsetValue(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Unset Value runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
Options
preserve
The preserve
option determines whether the original source
is preserved. By default, it is not preserved.
postcssUnsetValue({ preserve: true })
.color {
color: unset;
}
.border-color {
border-color: unset;
}
.margin {
margin: unset;
}
/* becomes */
.color {
color: inherit;
color: unset;
}
.border-color {
border-color: initial;
border-color: unset;
}
.margin {
margin: initial;
margin: unset;
}