RadValentin / postcss-prefix-selector

Prefix all CSS rules with a selector
MIT License
166 stars 16 forks source link

Error with pseudo-class :root #98

Closed bpiwowar closed 1 month ago

bpiwowar commented 3 years ago

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
      }
  })
RadValentin commented 3 years ago

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.