PostCSS Short Position
PostCSS Short Position lets define sides within the position
property in
CSS.
.header { position: fixed 0 1em *;} /* becomes */ .header { top: 0; right: 1em; left: 1em; position: fixed;}
The position
declaration can be extended with the 1-to-4 syntax to target
top
, right
, bottom
, and left
. Sides can be omitted using the skip token.
Usage
Add PostCSS Short Position to your project:
npm install postcss-short-position --save-dev
Use PostCSS Short Position to process your CSS:
const postcssShortPosition = ; postcssShortPosition;
Or use it as a PostCSS plugin:
const postcss = ;const postcssShortPosition = ; ;
PostCSS Short Position 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-position
.
;
.header { x-position: fixed 0 1em *;} /* becomes */ .header { top: 0; right: 1em; left: 1em; position: fixed;}
skip
The skip
option defines the skip token used to ignore portions of the
shorthand.
;
.header { position: fixed 0 1em -;} /* becomes */ .header { top: 0; right: 1em; left: 1em; position: fixed;}