PostCSS Short Size
PostCSS Short Size lets you use size
properties to represent width
and
height
in CSS, following the 1-to-2 syntax.
.image { size: 100px;} .video { max-size: 400px 300px;} /* becomes */ .image { width: 100px; height: 100px;} .video { max-width: 400px; max-height: 300px;}
The supported properties are size
, min-size
, and max-size
.
Usage
Add PostCSS Short Size to your project:
npm install postcss-short-size --save-dev
Use PostCSS Short Size to process your CSS:
const postcssShortSize = ; postcssShortSize;
Or use it as a PostCSS plugin:
const postcss = ;const postcssShortSize = ; ;
PostCSS Short Size runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
Options
prefix
The prefix
option defines a prefix required by properties being transformed.
Wrapping dashes are automatically applied, so that x
would transform
-x-margin
.
;
.image { x-size: 100px;} /* becomes */ .image { width: 100px; height: 100px;}
skip
The skip
option defines the skip token used to ignore portions of the
shorthand.
;
.image { size: - 100px;} /* becomes */ .image { height: 100px;}