PostCSS Short Overflow

PostCSS Short Overflow lets you write overflow-x and overflow-y with the overflow shorthand in CSS.

1html {
2  overflow: hidden auto;
3}
4
5[contenteditable] {
6  overflow: * auto;
7}
8
9/* becomes */
10
11html {
12  overflow-x: hidden;
13  overflow-y: auto;
14}
15
16[contenteditable] {
17  overflow-y: auto;
18}

Usage

Add PostCSS Short Overflow to your project:

1npm install postcss-short-overflow --save-dev

Use PostCSS Short Overflow to process your CSS:

1const postcssShortOverflow = require('postcss-short-overflow');
2
3postcssShortOverflow.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

1const postcss = require('postcss');
2const postcssShortOverflow = require('postcss-short-overflow');
3
4postcss([
5  postcssShortOverflow(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

PostCSS Short Overflow runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

prefix

The prefix option determines the prefix applied to properties being processed (e.g. x for -x-overflow). Wrapping dashes (-) are automatically applied.