Package Exports
- postcss-short-position
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-short-position) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Shorthand Position 

Shorthand Position is a PostCSS plugin that lets you to define edges inside the position property in CSS.
/* before */
.banner {
position: fixed 0 0 *;
}
/* after */
.banner {
top: 0;
right: 0;
left: 0;
position: fixed;
}
Edges follow the 1-to-4 syntax and become top
, right
, bottom
, and left
properties. An asterisk (*
) indicates that the edge is to be skipped.
Usage
Follow these steps to use Shorthand Position.
Add Shorthand Position to your build tool:
npm install postcss-short-position --save-dev
Node
require('postcss-short-position')({ /* options */ }).process(YOUR_CSS);
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Shorthand Position as a PostCSS plugin:
postcss([
require('postcss-short-position')({ /* options */ })
]);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable Shorthand Position within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
require('postcss-short-position')({ /* options */ })
])
).pipe(
gulp.dest('./css')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable Shorthand Position within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-short-position')({ /* options */ })
]
},
dist: {
src: 'css/*.css'
}
}
});
Options
prefix
Type: String
Default: null
Specifies a prefix to be surrounded by dashes before the declaration (e.g. -x-position
).