Css-exclude NPM

css-exclude

get rid of ugly third party selectors

Motivation

Overwriting long selectors is a pain and might cause unmaintainable code.
css-exclude is a post processor that allows you to choose which of those selectors don't belong in your final stylehsheet.
Just by writing a css comment.

How does it work?

css-exclude is a postcss processor like other famous modules e.g. autoprefixer or webpcss. It supports vanilla css and any preprocessor which supports inline source maps. For more information on compatibility take a look at the tests for vanilla css, sass and less

Example

vendor.less

  tr.heading {
    background: #eee;
  }

  #nasty .funky > .crazy:first-child {
    table > tr.heading {
      border-top: 1px solid grey;
    }
  }

main.less

  @import 'vendor';
  /*
   * @exclude
   * @file vendor.less
   * @selector '#nasty * tr.heading'
   */
  tr.heading {
    border-top: 1px solid #0f0f0f;
  }

result.css

  tr.heading {
    background: #eee;
  }

  /*
   * @exclude
   * @file vendor.less
   * @selector '#nasty * tr.heading'
   */
  tr.heading {
    border-top: 1px solid #0f0f0f;
  }

Usage

Grunt

As css-exclude is a postcss plugin it does not need a custom grunt plugin but can be used with the grunt-postcss plugin.

$ npm install grunt-postcss css-exclude --save-dev

grunt.initConfig({
  postcss: {
    options: {
      map: true,
      processors: [
        require('css-exclude')({debug: true}).postcss
      ]
    },
    dist: {
      src: 'css/*.css'
    }
  }
});

Gulp

As css-exclude is a postcss plugin it does not need a custom gulp plugin but can be used with the gulp-postcss plugin.

$ npm install gulp-postcss css-exclude --save-dev

var postcss = require('gulp-postcss');
var gulp = require('gulp');

gulp.task('css', function () {
    var processors = [
        require('css-exclude')({debug: true})
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});