postcss-prefix-selector
postcss-prefix-selector copied to clipboard
Error with pseudo-class :root
The pseudo-class :root is not well handled (a prefix is added)
Input
prefixer({ prefix: '#app' }
and
:root {
--bs-blue:#0d6efd;
}
:root .a {
--bs-blue: #0d6ffd;
}
Current result
#app :root {
--bs-blue:#0d6efd;
}
#app :root .a {
--bs-blue: #0d6ffd;
}
Expected
#app {
--bs-blue:#0d6efd;
}
#app .a {
--bs-blue: #0d6ffd;
}
Current work around
prefixer({
prefix: '#app',
transform: (prefix, selector, prefixedSelector) => {
const found = selector.match(/^\s*:root(\s+\S.*)?$/)
if (found) {
return found[1] === undefined ? prefix : `${prefix}${found[1]}`
}
return prefixedSelector
}
})
Good point but I'm not sure if the prefixer should do anything to html, body or :root by default. I'm thinking of making it skip these selectors altogether. The user can use transform() to get around this and add prefixes if he wants.