postcss-prefix-selector icon indicating copy to clipboard operation
postcss-prefix-selector copied to clipboard

Error with pseudo-class :root

Open bpiwowar opened this issue 4 years ago • 1 comments

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
      }
  })

bpiwowar avatar Sep 07 '21 08:09 bpiwowar

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.

RadValentin avatar Oct 27 '21 08:10 RadValentin