postcss-prefix-selector
postcss-prefix-selector copied to clipboard
RadValentin
Don't prefix any unprefixable elements
Right now the prefixer will process elements that can't be namespaced (body and head, maybe others). The workaround so far has been to use the transform option added in #16 and let the user provide his own custom logic that deals with this.
It would be cool if the prefixer knew to handle these elements differently out of the box.
/* assuming the prefix is .hello we get the following */
// special cases
body -> body .hello
html -> html .hello
html body -> html body .hello
// prefixer works as usual for any other elements
div -> .hello div
i'm looking to do something like this. i'm using bootstrap, and don't want to add prefix to html/body. what is the logic used in the transform and should it go in webpack or postcss config?
You can configure the plugin as part of a webpack config or of a postcss config, it just depends on how your project is structured.
The logic shouldn't be too complicated, it's already possible to have different output for body and html via the transform option, see this. What I'd like to happen is for this behavior to be a standard feature.
Would you like to try and add this functionality in a pull request?
I would, unfortunately I don't have the time. But I'll try and if I have time I will. Thanks.
You could also just use exclude: ['html', 'body'] the plugin cannot assume where the prefix selector will be, sure this plugin is mostly used to prefix apps within the body, but what if the prefix is a class of the body or a class of html? Then adding the prefix after those elements wouldn't work
@Tofandel In the case your prefix selector is set to html element, you could use the transform function to set the selector as a suffix.
<html class="my-selector">
prefixer({
prefix: 'my-selector',
transform(prefix, selector, prefixedSelector) {
if (selector === 'html') {
return `html${prefix}`
}
return prefixedSelector
}
}),
TODO: Add a default value to the exclude config option, exclude: ['html', 'body']