postcss-overflow-shorthand

Use the overflow shorthand in CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-overflow-shorthand
3.0.4a month ago4 years agoMinified + gzip package size for postcss-overflow-shorthand in KB

Readme

PostCSS Overflow Shorthand PostCSS Logopostcss
!NPM Versionnpm-imgnpm-url !CSS Standard Statuscss-imgcss-url !Build Statuscli-imgcli-url Discorddiscord
PostCSS Overflow Shorthand lets you use the overflow shorthand in CSS, following the CSS Overflow specification.
'Can I use' table
html {
  overflow: hidden auto;
}

/* becomes */

html {
  overflow-x: hidden;
  overflow-y: auto;
  overflow: hidden auto;
}

Usage

Add PostCSS Overflow Shorthand to your project:
npm install postcss postcss-overflow-shorthand --save-dev

Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssOverflowShorthand = require('postcss-overflow-shorthand');

postcss([
  postcssOverflowShorthand(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Overflow Shorthand 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 overflow declaration is preserved. By default, it is preserved.
postcssOverflowShorthand({ preserve: false })

html {
  overflow: hidden auto;
}

/* becomes */

html {
  overflow-x: hidden;
  overflow-y: auto;
}