Andarist / stylis-plugin-extra-scope

Stylis plugin which adds extra scope to each produced CSS rule.
MIT License
23 stars 14 forks source link

Feedback #1

Closed thysultan closed 6 years ago

thysultan commented 6 years ago

There are few cases where this might fail, specifically around \@at-rules.

Related test case:

var sample =`
div, h1 {
  span {
    font-size: 14px;
  }
  background-color: rebeccapurple;
}

@media {
  .other-class {
    margin: 20px;
  }
}

@keyframe {
  0%: {color: red}
}

That said i think something like following should handle all of them.

function extraScopePlugin (context, content, selector, parents, line, column, length, type) {
  if (context === 2 && type !== 107)
    for (var i = 0; i < selector.length; i++)
      selector[i] = '#body ' + selector[i]
}

Related https://github.com/thysultan/stylis.js/issues/102#issuecomment-378317363

Andarist commented 6 years ago

Thanks for the feedback! Haven't figured out that I could just mutate selectors array. Way easier that way 👍