postcss-short-overflow

Write overflow-x and overflow-y with the overflow shorthand in CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-short-overflow
011.0.04 years ago4 years agoMinified + gzip package size for postcss-short-overflow in KB

Readme

PostCSS Short Overflow PostCSSpostcss
!NPM Versionnpm-imgnpm-url !Build Statuscli-imgcli-url !Support Chatgit-imggit-url
PostCSS Short Overflow lets you write overflow-x and overflow-y with the overflow shorthand in CSS.
html {
  overflow: hidden auto;
}

[contenteditable] {
  overflow: * auto;
}

/* becomes */

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

[contenteditable] {
  overflow-y: auto;
}

Usage

Add PostCSS Short Overflow to your project:
npm install postcss-short-overflow --save-dev

Use PostCSS Short Overflow to process your CSS:
const postcssShortOverflow = require('postcss-short-overflow');

postcssShortOverflow.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssShortOverflow = require('postcss-short-overflow');

postcss([
  postcssShortOverflow(/* pluginOptions */)
]).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.