@csstools/postcss-unset-value

Use the unset keyword in CSS.

Usage no npm install needed!

<script type="module">
  import csstoolsPostcssUnsetValue from 'https://cdn.skypack.dev/@csstools/postcss-unset-value';
</script>

README

PostCSS Unset Value PostCSS Logo

npm version CSS Standard Status Build Status Discord

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;
}