Package Exports
- postcss-short-data
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-data) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Shorthand Data

Shorthand Data lets you write shorthand data attribute selectors in CSS.
/* before */
nav a[:active] {
background: #f3f3f3;
}
button[:target~="main"] {
background: #334332;
}
/* after */
nav a[data-active] {
background: #f3f3f3;
}
button[data-target~="main"] {
background: #334332;
}
Usage
Add Shorthand Data to your build tool:
npm install postcss-short-data --save-dev
Node
require('postcss-short-data').process(YOUR_CSS, { /* options */ });
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Shorthand Data as a PostCSS plugin:
postcss([
require('postcss-short-data')({ /* options */ })
]);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable Shorthand Data within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
require('postcss-short-data')({ /* options */ })
])
).pipe(
gulp.dest('./css')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable Shorthand Data within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-short-data')({ /* options */ })
]
},
dist: {
src: 'css/*.css'
}
}
});