rollup-plugin-react-scoped-css 1.2.7 → 1.3.0

package/dist/css/scope-css.js

@@ -21,6 +21,13 @@ const isDeepFunctionSelector = (node) => node.type === "PseudoClassSelector" &&
  */
 const isRootLikePseudoSelector = (node) => node.type === "PseudoClassSelector" &&
     (node.name.toLowerCase() === "root" || node.name.toLowerCase() === "scope");
+/**
+ * The `::view-transition-*` tree is rooted at the document root, which never
+ * receives the scope attribute. A bare occurrence can therefore never match
+ * once scoped, so it is left global just like `:root`.
+ */
+const isViewTransitionPseudoElement = (node) => node.type === "PseudoElementSelector" &&
+    node.name.toLowerCase().startsWith("view-transition");
 const isCombinator = (node) => node.type === "Combinator";
 const isNestingSelector = (node) => node.type === "NestingSelector";
 /**
@@ -159,6 +166,11 @@ export function scopeCss(css, filename, hash, source = filename) {
             if (items.some((item) => isRootLikePseudoSelector(item.data))) {
                 return;
             }
+            // Bare view-transition pseudo-elements are also rooted at the document
+            // root, so scoping them would only produce an unmatchable selector.
+            if (items.some((item) => isViewTransitionPseudoElement(item.data))) {
+                return;
+            }
             if (items.some((item) => item.data.type === "PseudoElementSelector")) {
                 // An attribute cannot follow a pseudo-element, so it has to be
                 // prepended: `::before` -> `[hash]::before`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "Bring scoped CSS to React with Vite & Rollup. Lightweight component-level style isolation similar to Vue and Angular.",
   "type": "module",
   "main": "dist/index.js",