MadLittleMods / postcss-increase-specificity

Why? Dealing with CSS you can't remove(mainly from a 3rd party). Increases specificity of selectors.
MIT License
50 stars 16 forks source link

Added ignoreList option #16

Closed IvanKalinin closed 6 years ago

IvanKalinin commented 6 years ago

Added an option that allows us to ignore certain selectors with increase of specificity

MadLittleMods commented 6 years ago

@IvanKalinin Sorry for the delay 😞

Any reason not to use postcss-plugin-context, example here, https://github.com/MadLittleMods/postcss-increase-specificity#only-apply-to-certain-sections-of-styles

Or you could use postcss-raw to remove the selector while increasing the specificity.

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

var fs = require('fs');

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

// Process your CSS with postcss-reverse-media
var output = postcss([
        raw.inspect(/*options*/),
        increaseSpecificity(/*options*/),
        raw.write(/*options*/)
                // ... your other plugins
    ])
    .process(mycss)
    .css;

console.log(output);
@raw {
  .selector {
    background: red;
  }
}

.another-selector {
  background: green;
}

wdyt?

IvanKalinin commented 6 years ago

@MadLittleMods Sorry, now I missed your reply. According to your README example postcss-plugin-context provides ability to increase specificity for certain section. But ignoreList does opposite thing. It exclude some sections (selectors) from processing. postcss-raw requires additional wrappers in existed stylesheets. So I'm not sure that those plugins fit in the need But postcss-raw might be an option

MadLittleMods commented 6 years ago

@IvanKalinin The alternative solutions do involve more markup but it may also be easier to understand how it works if the ignore context is in the CSS.

Another solution could be to ignore any rule with a comment above // ignore-postcss-increase-specificity. Just a thought.

I added some review comments in any case to move this forward.

MadLittleMods commented 6 years ago

Closing in favor of inline comment ignore solution, https://github.com/MadLittleMods/postcss-increase-specificity/issues/17