PostCSS Important Shorthand
PostCSS plugin that allows you to use shorthand for your !important
declarations.
Please remember, that you shouldn't use '!important' in most cases, so be careful with them. But here is a plugin, in case you really need them :). You can write
!important
declarations in different ways, as you can see on the example below. Just choose the most convenient one.
CSS before:
.test-class {
position: relative !;
margin: !auto;
padding: 5px;
border: 1px solid black;
font: 16px/20px Arial, sans-serif;
text-align: center!;
}
CSS after:
.test-class {
position: relative !important;
margin: auto !important;
padding: 5px;
border: 1px solid black;
font: 16px/20px Arial, sans-serif;
text-align: center !important;
}
npm
Install via $ npm install --save-dev postcss-important-shorthand
Usage
See PostCSS docs for examples for your environment.
PostCSS
postcss([ require('postcss-important-shorthand') ])
Gulp
In Gulp you can use gulp-postcss with postcss-important-shorthand
npm package.
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var important = require('postcss-important-shorthand');
gulp.task('css', function () {
return gulp.src('./src')
.pipe(postcss([
important
]))
.pipe(gulp.dest('./dist'));
});
Grunt
In Grunt you can use grunt-postcss with postcss-important-shorthand
npm package.
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-important-shorthand')
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('css', ['postcss:dist']);
License
MIT © Sergey Lysenko