Skip to content

Latest commit

 

History

History
96 lines (73 loc) · 2.16 KB

README.md

File metadata and controls

96 lines (73 loc) · 2.16 KB

PostCSS Important Shorthand Build Status

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;
}

Install via npm

$ 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