Added option to exclude specific selectors

[akost]

ignore: ['.sampleclass'] -- will exclude classes from increasing specificity.

Example

var postcss = require('postcss');
var increaseSpecificity = require('postcss-increase-specificity');

var fs = require('fs');

var mycss = fs.readFileSync('input.css', 'utf8');

// Process your CSS with postcss-increase-specificity
var output = postcss([
        increaseSpecificity({
             ignore: ['.ignoreCl*', '.another*']
        })
    ])
    .process(mycss)
    .css;

console.log(output);

Source

.ignoreClass {
    background: #f00;
}

.ignoreClass2 {
    background: #f00;
}

.anotherClass ul li a:hover {
    color: #f00;
}

.foo {
    background: #f00;
}

Output

.ignoreClass {
    background: #f00;
}

.ignoreClass2 {
    background: #f00;
}

.anotherClass ul li a:hover {
    color: #f00;
}

:root:root:root .foo {
    background: #f00;
}

[MadLittleMods]

You should use something like postcss-plugin-context or postcss-raw to apply a plugin only to certain pieces. See https://github.com/MadLittleMods/postcss-increase-specificity#only-apply-to-certain-sections-of-styles

This isn't something I am keen on adding to the API/options.

---

As a separate note, don't bump the package version in a PR.

[akost]

Thank you, good to know.

[akost]

The plugins you mentioned (postcss-plugin-context or postcss-raw) require to change the source CSS to ignore certain selector. My PR will allow to skip some selectors without modifying the source.

And sorry for version bump.

[MadLittleMods]

@akost Sounds like a use case for a new plugin like postcss-raw but it looks for rules by selector instead of whatever is inside the @raw { /*...*/ }.

[akost]

You are right, looks like it is an extended use case of postcss-raw. Do you suggest to make it a separate plugin that will keep some selectors untouched by other plugins?

[MadLittleMods]

@akost I think it could be part of postcss-raw.

I would prefer string and regex matching instead of glob matching that you implemented in this PR.

raw.inspect({
  selectors: ['.foo', /\.button\-(.*?)/]
}),

What might be even better though is to have a generic matching callback so people can use whatever criteria as we walk over everything. I think this is the approach we should take.

If we return true on a rule, we wouldn't walk over the nodes inside it because they are already considered matched by the parent rule, etc.

raw.inspect({
  filter: (node) => {
    if(node.selector === '.foo') {
      return true;
    }
    // Any rule with `box-sizing` property
    else if(node.type === 'rule' && node.some((decl) => { return decl.prop === 'box-sizing'; })) {
      return true;
    }

    return false;
  }
}),