Files
dewedev/node_modules/@csstools/postcss-normalize-display-values/README.md
dwindown 7f2dd5260f Initial commit: Developer Tools MVP with visual editor
- Complete React app with 7 developer tools
- JSON Tool with visual structured editor
- Serialize Tool with visual structured editor
- URL, Base64, CSV/JSON, Beautifier, Diff tools
- Responsive navigation with dropdown menu
- Dark/light mode toggle
- Mobile-responsive design with sticky header
- All tools working with copy/paste functionality
2025-08-02 09:31:26 +07:00

2.9 KiB

PostCSS Normalize Display Values PostCSS Logo

npm version CSS Standard Status Build Status Discord

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