gulp-selectors travis-ci npm

Catalog all of your selectors and do fun stuff with them.

3 years after


Build Status Code Climate Test Coverage NPM Version

Minify those pesky selector names down to nothing with this fancy gulp plugin. Minified selectors will be applied consistently across all files piped into it.

Input Output
.class-name { ... } .a { ... }
.another-class { ... } .b { ... }
#an-id { ... } #a { ... }
<div class="class-name"> ... </div> <div class="a"> ... </div>

You're like: .some-super-descriptive-selector-name {...}, and it's like: .a {...}


First and foremost: npm install gulp-selectors

var gulp    = require('gulp');
var gs      = require('gulp-selectors');

gulp.src(['src/**/*.css', 'src/**/*.html'])

You can also pass some options into run:, ignores)

CSS and HTML files are processed well by default, just pass in your glob of files and all classes and IDs will be reduced to a minified form. Of course you can use it for some more specific functions if you like. See the included sample gulpfile for a full example of how to effectively use gulp-selectors in your gulp workflow.


All arguments are optional. If omitted, processors will default to css and html and ignores will be empty:{
    'css': ['css'],
    'html': ['html']
  }, {

Advanced Usage

var processors = {
        'css':  ['scss', 'css'],        // run the css processor on .scss and .css files
        'html': ['haml'],               // run the html processor on .haml files
        'js-strings':   ['js']          // run the js-strings plugin on js files
    ignores = {
        classes: ['hidden', 'active']   // ignore these class selectors,
        ids: '*'                        // ignore all IDs
    };, ignores);

Two processors are built in for your convenience: css and html are stable but js-strings and remove-unused are beta and may be moved to their own repositories.

  • css: matches .selectors and #selectors
  • html: matches id="selector"s, class="selector"s, and for="selector"s
  • js: matches exact strings by looping through the library, which is dangerous if you use common words as selectors
  • remove-unused: should be run last, and only on stylesheets - it removes all declarations present in the library which haven't been used

If a processor is listed which isn't built in, gulp-selectors will attempt to require it.

How gulp-selectors works

Calling builds a library which persists for all processors used in the call. Processors are run on all associated files and all selectors, besides those that have been ignored, will be minified.


    'css': ['css', 'scss'],
    'html': ['html', 'tpl.js'],
    'js-strings': ['js', '!tpl.js'],
    'your-custom-processor': ['.ext']

css and html are built in. Additional processors referenced will be injected where needed so it is important to ensure all are installed. Processors are used like this:

processor(file, classLibrary, idLibrary)

File is the string containing the file contents. Each of the two libraries exposes the following API:

  • set(selectorName): returns a minified selector name
  • has(selectorName): tests if the name exists
  • get(selectorName, [dontCount]): ...


    ids: ['content', 'target'],
    classes: ['hidden', 'active']

Related Repositories



Remove unused CSS selectors. ...



Convert a set of images into a spritesheet and CSS variables via gulp ...



:tropical_drink: A curated list of awesome gulp resources, plugins, and boilerpl ...



Gulp plugin for Sass Lint ...



PostCSS Custom Selectors ...

Top Contributors

cazzer hashworks Cap32 fat AgtLucas nloewen davidleston


-   v0.1.9 zip tar
-   0.1.6 zip tar