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.9 KiB
2.9 KiB
PostCSS Normalize Display Values
PostCSS Normalize Display Values lets you specify definition of outer and inner displays types for an element.
.element {
display: inline flow-root;
}
/* becomes */
.element {
display: inline-block;
display: inline flow-root;
}
See prior work by cssnano here postcss-normalize-display-values To ensure long term maintenance and to provide the needed features this plugin was recreated based on cssnano's work.
Usage
Add PostCSS Normalize Display Values to your project:
npm install postcss @csstools/postcss-normalize-display-values --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values');
postcss([
postcssNormalizeDisplayValues(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Normalize Display Values 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 preserved.
postcssNormalizeDisplayValues({ preserve: false })
.element {
display: inline flow-root;
}
/* becomes */
.element {
display: inline-block;
}