Top level selector

[iefserge]

Thank you, this module is awesome!

Wrapping selectors into class scope works well, but I haven't found a way to add styles at the top-level, i.e. to the scope directly.

Would it be a good idea to add support for a top-level & selector that resolves directly to the scope?

like

& {
  color: red;
}
.selector {
  color: green;
}

transforms into:

.scope {
  color: red;
}
.scope .selector {
  color: green;
}

[pazams]

@iefserge , this would be a great feature.
Using the ampersand chartacher (&) is tricky since it's SASS/LESS syntax rather than pured css, and this plugin has to assume valid css.
Top level scope is still a good feature to add. Need to find the proper interface for it.
Perhaps- add a replace option. users will pass in a class for that option, and scopify will know to:

1. do not add scope.
2. replace the class with the scope.

thoughts?

[iefserge]

@pazams replace option would work, but it feels a bit hacky. My thinking is that unscoped css should work exactly the same as scoped version within its scope. How about using body as a top level selector? The idea is that body can refer to the body of a component i.e. the scope itself.

so body { color: red; } transforms into .scope { color:red; }.

[pazams]

@iefserge after re-thinking this through, I second my "valid css" assumption and therefore your initial suggestion seems to be the best solution.
I've seen you already coded and tested the solution in a fork,
so please send it as PR
tnx