stylis-plugin-extra-scope compatibility with the compat plugin

[drenckpohl]

Hey, I'm working on upgrading stylis-plugin-extra-scope to be compatible with the new Stylis v4 API in this PR.

We're having trouble finding a solution that works in the context of Emotion, due to the compat plugin. For my use-case, we'd be happy with just adding an option to Emotion to disable the compat plugin, but of course it would be best if we could find a way to make it work both with and without it.

I'd appreciate any advice about alternative approaches.

[Andarist]

To give a little bit more context:

• compat plugin is bringing back Stylis v3 behavior of interpreting .scope { :hover { color: hotpink; } } as .scope:hover { color: hotpink; } instead of .scope :hover { color: hotpink; }. It does it's job by reinterpreting all rulesets with : and it has to reparse the current node.value and combine/zip the result with parent selectors. This works for all rules.
• extra scope plugin wants to prepend a scope to all generated rules - it kinda wants to do this after the compat plugin does its job because it shouldn't change what & represents, this has to stay the same for the compat plugin

One idea I had was to call callback from within the extra scope plugin and assign the serialized value to node.return. I think this should roughly work - because I could process the node "as is" using all the plugins (including compat plugin) and then postprocess by adding the extra scope to the .return. The problem though is that callback - in most use cases - is not pure, it contains the rulesheet plugin. So this approach is not good here and currently I have no idea how to make those 2 plugins work with each other.

[thysultan]

extra scope plugin wants to prepend a scope to all generated rules - it kinda wants to do this after the compat plugin does its job because it shouldn't change what & represents, this has to stay the same for the compat plugin

Does it want to prepend an arbitrary scope or specially an extra current scope i.e an extra &

[Andarist]

With the extra scope plugin for this input:

.foo {
  .bar & {
    color: hotpink;
  }
}

this is expected:

.extra .bar .foo { color: hotpink; }

So it's not the same as simply wrapping the input with .extra like this:

.extra {
  .foo {
    .bar & {
      color: hotpink;
    }
  }
}

as this would end up being:

.bar .extra .foo { color: hotpink; }

A sideway note is that such input-wrapping plugin would not be possible to write anyway (at least not a plugin that could be passed to middleware as those plugins are already operating on compiled output).

[drenckpohl]

Would it be acceptable to add a disableCompat option to @emotion/cache? I can make the contribution. That seems like the simplest way to resolve this though.