Closed IvanKalinin closed 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?
@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
@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.
Closing in favor of inline comment ignore solution, https://github.com/MadLittleMods/postcss-increase-specificity/issues/17
Added an option that allows us to ignore certain selectors with increase of specificity