PostCSS Normalize Display Values

PostCSS Normalize Display Values lets you specify definition of outer and inner displays types for an element.

```pcss .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:

bash npm install postcss @csstools/postcss-normalize-display-values --save-dev

Use it as a PostCSS plugin:

```js 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.

js postcssNormalizeDisplayValues({ preserve: false })

```pcss .element { display: inline flow-root; }

/ becomes /

.element { display: inline-block; } ```