PostCSS Short Position

PostCSS Short Position lets define sides within the position property in CSS.

1.header {
2  position: fixed 0 1em *;
3}
4
5/* becomes */
6
7.header {
8  top: 0;
9  right: 1em;
10  left: 1em;
11  position: fixed;
12}

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:

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

Use PostCSS Short Position to process your CSS:

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

Or use it as a PostCSS plugin:

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

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.

1postcssShortPosition({ prefix: 'x' });

1.header {
2  x-position: fixed 0 1em *;
3}
4
5/* becomes */
6
7.header {
8  top: 0;
9  right: 1em;
10  left: 1em;
11  position: fixed;
12}

skip

The skip option defines the skip token used to ignore portions of the shorthand.

1postcssShortPosition({ skip: '-' });

1.header {
2  position: fixed 0 1em -;
3}
4
5/* becomes */
6
7.header {
8  top: 0;
9  right: 1em;
10  left: 1em;
11  position: fixed;
12}