Plugin clobbers view transition rules

[felamaslen]

When using the view transition API, we define rules like so

::view-transition-new(root) {
  animation: my-animation;
}

This rule has to be applied under html. Using RTL plugin overwrites this rule (inserting dir:rtl and dir:ltr), meaning the rule no longer applies to html.

One workaround is to do this:

html::view-transition-new(root) { /* blah */ }

Another workaround is to simply ignore the plugin:

/* rtl:ignore */
::view-transition-new(root) { /* blah */ }

However, ideally the plugins should handle this case automatically.

Steps to reproduce

With the following input:

::view-transition-new(root) {
  /* blah */
}

Expected output:

[dir]::view-transition-new(root) {
  /* blah */
}

or potentially

::view-transition-new(root) {
  &:where([dir=ltr], [dir=ltr] *) { /* blah */ }
  &:where([dir=rtl], [dir=rtl] *) { /* blah */ }
}

Actual output:

[dir] ::view-transition-new(root) {
  /* blah */
}

Playground link

[elchininet]

Hi @felamaslen,

I'll take a look at it, the fix will be like the first example that you posted, the plugin doesn't use the where pseudo-class to apply the prefixes.

Meanwhile you could use the prefixSelectorTransformer option to fix the issue:

https://runkit.com/embed/bms2a5g9163p

[elchininet]

Hi @felamaslen, In version 5.2.0 of the library there is support for view-transition pseudo-classes. Regards