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

package/README.md

@@ -162,6 +162,55 @@ Scoped styles do not eliminate the need for classes. Due to the way browsers ren
 
 Be careful with descendant selectors in recursive components! For a CSS rule with the selector .a .b, if the element that matches .a contains a recursive child component, then all .b in that child component will be matched by the rule.
 
+## Testing
+
+### Unit tests
+
+```sh
+npm test
+```
+
+### End-to-end Vite compatibility harness
+
+The e2e harness packs the plugin with `npm pack`, installs it into an isolated
+project for each Vite major, then drives Chromium against both the dev server
+and a production build served with `vite preview`.
+
+Prerequisites: Node >= 20.19 and a Playwright browser.
+
+```sh
+npm run test:e2e:install   # once; installs Chromium
+npm run test:e2e           # Vite 5, 6, 7, and 8; dev + build/preview
+```
+
+Options (pass-through after `--`):
+
+```sh
+npm run test:e2e -- --vite 7              # one major (repeatable/comma-separated)
+npm run test:e2e -- --mode dev            # dev, build, or both (default)
+npm run test:e2e -- --browser firefox     # chromium (default), firefox, webkit
+npm run test:e2e -- --headed              # watch the browser
+npm run test:e2e -- --clean --force       # wipe and reinstall cached installs
+npm run test:e2e -- --keep-temp           # keep production build output
+npm run test:e2e -- --allow-broken-sourcemap
+```
+
+The harness asserts that:
+
+- scoped JSX receives `data-<hash>` attributes and every element from a file
+  shares that file's hash;
+- scoped selectors are applied, global styles stay global, and styles from one
+  component do not leak into another;
+- computed styles match in both dev and production builds;
+- emitted CSS contains the scoped selectors and JS contains the matching hash;
+- JS sourcemaps reference the original `.tsx` files and include their content;
+- there are no page/console/network errors and no `SOURCEMAP_BROKEN` warnings.
+
+Vite installs are cached in `e2e/.cache/`; the cache key includes the packed
+plugin, so plugin changes trigger a reinstall. Vite 8 uses Rolldown rather than
+Rollup; `rollup` is installed in the harness only to satisfy this package's peer
+dependency. No CI workflow runs the e2e harness yet — it is a local script.
+
 ## Contributing
 Anyone is free to open a PR and contribute to this project... just be civilized!
 

package/dist/css/scope-css.js

@@ -1,39 +1,103 @@
-import { parse, generate, } from "css-tree";
-const getSelectors = (items) => {
-    const selectorLists = items.reduce((acc, node) => {
-        if (node.type === "Rule" && node?.prelude?.type === "SelectorList") {
-            acc.push(node.prelude.children);
-        }
-        else if (node.type === "Atrule" && node.name === "media") {
-            node.block?.children.forEach((rule) => {
-                if (rule.type === "Atrule" && rule.name === "media") {
-                    const selectors = getSelectors(rule.block?.children);
-                    acc.push(...selectors);
-                }
-                if (rule.type === "Rule" && rule.prelude.type === "SelectorList") {
-                    acc.push(rule.prelude.children);
-                }
-            });
+import { parse, generate, List, } from "css-tree";
+/**
+ * Keyframe selectors (`from`, `to`, `50%`) are also parsed as `Rule` nodes with
+ * a `SelectorList` prelude. They need to be left alone, otherwise animations
+ * break by becoming e.g. `0%[data-hash]`.
+ */
+const isKeyframesAtRule = (name) => /^(-[a-z0-9]+-)?keyframes$/i.test(name);
+const isScopePiercingPseudoSelector = (node) => node.type === "PseudoElementSelector" &&
+    (node.name === "v-deep" || node.name === "deep");
+/**
+ * CSS-tree parses the contents of `:deep(...)` as a `Raw` node, unlike
+ * `:is()`/`:where()` which it parses as selectors.
+ */
+const isDeepFunctionSelector = (node) => node.type === "PseudoClassSelector" &&
+    (node.name === "deep" || node.name === "v-deep") &&
+    !!node.children;
+/**
+ * Pseudo selectors that refer to the document root. They cannot be scoped
+ * because the root element never receives the scope attribute, so adding the
+ * attribute would only turn working rules into dead ones.
+ */
+const isRootLikePseudoSelector = (node) => node.type === "PseudoClassSelector" &&
+    (node.name.toLowerCase() === "root" || node.name.toLowerCase() === "scope");
+const isCombinator = (node) => node.type === "Combinator";
+const isNestingSelector = (node) => node.type === "NestingSelector";
+/**
+ * Simple selectors that can receive the scope attribute. `&` is excluded
+ * because the parent rule is already scoped, so `&[hash]` would be redundant.
+ */
+const isHashableSelector = (node) => node.type === "TypeSelector" ||
+    node.type === "ClassSelector" ||
+    node.type === "IdSelector" ||
+    node.type === "AttributeSelector";
+const getDeepFunctionSelectorText = (node) => {
+    const children = node.children;
+    if (!children || children.isEmpty) {
+        return null;
+    }
+    let text = "";
+    children.forEach((child) => {
+        if (child.type === "Raw") {
+            text += child.value;
         }
-        return acc;
-    }, []);
-    return selectorLists;
-};
-const isScopePiercingPseudoSelector = (item) => {
-    return (item?.data?.type === "PseudoElementSelector" &&
-        (item?.data?.name === "v-deep" || item?.data?.name === "deep"));
+    });
+    return text || null;
 };
-const isPseudoSelector = (item) => {
-    return (item?.data?.type === "PseudoClassSelector" ||
-        item?.data?.type === "PseudoElementSelector");
-};
-const isCombinator = (item) => {
-    return item?.data?.type === "Combinator";
+/**
+ * Splits a raw selector prelude on top-level `||` (column combinator) while
+ * ignoring `||` inside attribute selectors, functional pseudos, or strings.
+ */
+const splitOnColumnCombinator = (value) => {
+    const parts = [];
+    let start = 0;
+    let parenthesisDepth = 0;
+    let bracketDepth = 0;
+    let quote = null;
+    for (let index = 0; index < value.length; index += 1) {
+        const char = value[index];
+        if (quote) {
+            if (char === "\\") {
+                index += 1;
+            }
+            else if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+        }
+        else if (char === "\\") {
+            index += 1;
+        }
+        else if (char === "(") {
+            parenthesisDepth += 1;
+        }
+        else if (char === ")") {
+            parenthesisDepth -= 1;
+        }
+        else if (char === "[") {
+            bracketDepth += 1;
+        }
+        else if (char === "]") {
+            bracketDepth -= 1;
+        }
+        else if (char === "|" &&
+            value[index + 1] === "|" &&
+            parenthesisDepth === 0 &&
+            bracketDepth === 0) {
+            parts.push(value.slice(start, index));
+            index += 1;
+            start = index + 1;
+        }
+    }
+    parts.push(value.slice(start));
+    return parts;
 };
 export function scopeCss(css, filename, hash, source = filename) {
     try {
         const ast = parse(css, { positions: true, filename: source });
-        const selectorLists = getSelectors(ast.children);
         const attributeSelector = {
             type: "AttributeSelector",
             name: { type: "Identifier", name: hash },
@@ -41,40 +105,215 @@ export function scopeCss(css, filename, hash, source = filename) {
             value: null,
             flags: null,
         };
-        selectorLists.forEach((selectorList) => {
-            selectorList.forEach((selector) => {
-                if (selector.type !== "Selector") {
+        const scopeSelectorList = (selectorLists) => {
+            selectorLists.forEach((selector) => {
+                if (selector.type === "Selector") {
+                    scopeSelector(selector);
+                }
+            });
+        };
+        /**
+         * Inserts the scope attribute after every consecutive run of simple
+         * selectors. Pseudo selectors break a run, which preserves the previous
+         * behaviour of `a:hover.b` becoming `a[hash]:hover.b[hash]`.
+         */
+        const scopeRuns = (items, selectorChildren) => {
+            let run = [];
+            const flushRun = () => {
+                if (run.length === 0) {
                     return;
                 }
-                let item = selector.children.head;
-                const itemsToInsertScopeBefore = [];
-                let currentChunkIndex = 0;
-                while (item !== null) {
-                    if (isScopePiercingPseudoSelector(item)) {
-                        Object.assign(item.data, attributeSelector);
-                        break;
-                    }
-                    else if (isCombinator(item) || isPseudoSelector(item)) {
-                        currentChunkIndex += 1;
-                    }
-                    else if (item.next) {
-                        itemsToInsertScopeBefore[currentChunkIndex] = item.next;
+                const last = run[run.length - 1];
+                if (last.next) {
+                    selectorChildren.insertData(attributeSelector, last.next);
+                }
+                else {
+                    selectorChildren.appendData(attributeSelector);
+                }
+                run = [];
+            };
+            items.forEach((item) => {
+                if (isHashableSelector(item.data)) {
+                    run.push(item);
+                }
+                else {
+                    flushRun();
+                }
+            });
+            flushRun();
+        };
+        const scopeCompound = (items, selectorChildren) => {
+            if (items.length === 0) {
+                return;
+            }
+            if (items.some((item) => isHashableSelector(item.data))) {
+                scopeRuns(items, selectorChildren);
+                return;
+            }
+            // `&` is already scoped through its parent rule.
+            if (items.some((item) => isNestingSelector(item.data))) {
+                return;
+            }
+            // `:root` / `:scope` refer to the document root and can never match the
+            // scope attribute; leave them global.
+            if (items.some((item) => isRootLikePseudoSelector(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`.
+                selectorChildren.insertData(attributeSelector, items[0]);
+                return;
+            }
+            if (!items.some((item) => item.data.type === "PseudoClassSelector")) {
+                return;
+            }
+            // `:hover` -> `:hover[hash]`
+            const last = items[items.length - 1];
+            if (last.next) {
+                selectorChildren.insertData(attributeSelector, last.next);
+            }
+            else {
+                selectorChildren.appendData(attributeSelector);
+            }
+        };
+        const replaceDeepFunction = (selectorChildren, item) => {
+            const node = item.data;
+            const selectorText = getDeepFunctionSelectorText(node);
+            if (!selectorText) {
+                return;
+            }
+            let parsed;
+            try {
+                parsed = parse(selectorText, {
+                    context: "selectorList",
+                });
+            }
+            catch {
+                return;
+            }
+            const selectors = parsed.children;
+            if (selectors.size === 1) {
+                // Splice the argument selector in place of `:deep(...)`.
+                const replacement = new List();
+                selectors.first.children.forEach((child) => {
+                    replacement.appendData(child);
+                });
+                selectorChildren.replace(item, replacement);
+            }
+            else {
+                // A selector list cannot be spliced into a single selector, but
+                // `:is(...)` has the same matching semantics here.
+                node.name = "is";
+                node.children = new List();
+                node.children.appendData(parsed);
+            }
+        };
+        const scopeSelector = (selector) => {
+            const selectorChildren = selector.children;
+            const compounds = [];
+            let compound = [];
+            for (let item = selectorChildren.head; item !== null; item = item.next) {
+                if (isCombinator(item.data)) {
+                    compounds.push(compound);
+                    compound = [];
+                }
+                else {
+                    compound.push(item);
+                }
+            }
+            compounds.push(compound);
+            for (const items of compounds) {
+                const piercingIndex = items.findIndex((item) => isScopePiercingPseudoSelector(item.data) ||
+                    isDeepFunctionSelector(item.data));
+                if (piercingIndex !== -1) {
+                    const piercingItem = items[piercingIndex];
+                    if (isDeepFunctionSelector(piercingItem.data)) {
+                        // Scope everything before `:deep(...)` in the same compound,
+                        // then splice in the (unscoped) argument selector.
+                        scopeRuns(items.slice(0, piercingIndex), selectorChildren);
+                        replaceDeepFunction(selectorChildren, piercingItem);
                     }
                     else {
-                        selector.children.appendData(attributeSelector);
-                        break;
+                        // Replace `::deep` / `::v-deep` with the scope attribute.
+                        Object.assign(piercingItem.data, attributeSelector);
                     }
-                    item = item?.next ?? null;
+                    // Everything after a deep selector stays global.
+                    return;
                 }
-                // This is true if one of the two break statements above was run. Which means we don't want to add to the last one.
-                if (itemsToInsertScopeBefore[currentChunkIndex]) {
-                    itemsToInsertScopeBefore.pop();
+                scopeCompound(items, selectorChildren);
+            }
+        };
+        /**
+         * CSS-tree parses implicit nesting as a `Raw` node inside the parent
+         * rule. Re-parse it as a rule so its selector can be scoped and write the
+         * transformed rule back.
+         */
+        const scopeRawNestedRule = (node) => {
+            if (!node.value.includes("{")) {
+                return;
+            }
+            try {
+                const rule = parse(node.value, { context: "rule" });
+                if (rule.type !== "Rule") {
+                    return;
                 }
-                itemsToInsertScopeBefore.forEach((scopePositionItem) => {
-                    selector.children.insertData(attributeSelector, scopePositionItem);
+                scopeRule(rule);
+                node.value = generate(rule);
+            }
+            catch {
+                // Leave constructs css-tree cannot parse untouched.
+            }
+        };
+        const scopeRawSelectorPrelude = (prelude) => {
+            const parts = splitOnColumnCombinator(prelude.value);
+            if (parts.length === 1) {
+                return;
+            }
+            try {
+                const scopedParts = parts.map((part) => {
+                    const selectorList = parse(part.trim(), {
+                        context: "selectorList",
+                    });
+                    scopeSelectorList(selectorList.children);
+                    return generate(selectorList);
                 });
+                prelude.value = scopedParts.join(" || ");
+            }
+            catch {
+                // Leave constructs css-tree cannot parse untouched.
+            }
+        };
+        const scopeNodes = (children, insideRule) => {
+            children.forEach((node) => {
+                if (node.type === "Rule") {
+                    scopeRule(node);
+                }
+                else if (node.type === "Atrule" &&
+                    node.block &&
+                    !isKeyframesAtRule(node.name)) {
+                    // Recurse into conditional/group at-rules (`@media`, `@container`,
+                    // `@supports`, `@layer`, `@scope`, etc.) so their rules get scoped.
+                    scopeNodes(node.block.children, insideRule);
+                }
+                else if (insideRule && node.type === "Raw") {
+                    scopeRawNestedRule(node);
+                }
             });
-        });
+        };
+        const scopeRule = (rule) => {
+            if (rule.prelude?.type === "SelectorList") {
+                scopeSelectorList(rule.prelude.children);
+            }
+            else if (rule.prelude?.type === "Raw") {
+                scopeRawSelectorPrelude(rule.prelude);
+            }
+            if (rule.block) {
+                // Nested rules (`& ...`) and nested at-rules live in the rule block.
+                scopeNodes(rule.block.children, true);
+            }
+        };
+        scopeNodes(ast.children, false);
         const { css: scopedCss, map } = generate(ast, {
             sourceMap: true,
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "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",
@@ -9,7 +9,9 @@
     "build": "tsc",
     "build:watch": "tsc --watch",
     "lint": "eslint '*/**/*.{js,jsx,ts,tsx}'",
-    "test": "jest"
+    "test": "jest",
+    "test:e2e": "node e2e/run.mjs",
+    "test:e2e:install": "playwright install chromium"
   },
   "repository": {
     "type": "git",
@@ -42,7 +44,7 @@
   },
   "homepage": "https://github.com/cmseguin/rollup-plugin-react-scoped-css#readme",
   "dependencies": {
-    "@rollup/pluginutils": "^5.3.0",
+    "@rollup/pluginutils": "^5.5.1",
     "css-tree": "3.2.1",
     "escodegen": "2.1.0",
     "js-xxhash": "5.0.1"
@@ -51,33 +53,34 @@
     "rollup": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.0",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
+    "@babel/core": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@babel/preset-react": "7.29.7",
+    "@babel/preset-typescript": "7.29.7",
     "@semantic-release/commit-analyzer": "13.0.1",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "12.0.6",
-    "@semantic-release/npm": "13.1.5",
-    "@semantic-release/release-notes-generator": "14.1.0",
-    "@types/css-tree": "2.3.11",
+    "@semantic-release/github": "12.0.10",
+    "@semantic-release/npm": "13.2.0",
+    "@semantic-release/release-notes-generator": "14.1.1",
+    "@types/css-tree": "3.2.0",
     "@types/escodegen": "0.0.10",
-    "@types/estree": "1.0.8",
+    "@types/estree": "1.0.9",
     "@types/jest": "30.0.0",
-    "@types/node": "25.3.5",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
-    "acorn": "8.16.0",
-    "eslint": "9.12.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.31.0",
+    "@types/node": "26.6.5",
+    "@typescript-eslint/eslint-plugin": "8.72.0",
+    "@typescript-eslint/parser": "8.72.0",
+    "acorn": "8.19.0",
+    "eslint": "9.39.5",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.37.1",
-    "jest": "30.2.0",
-    "rollup": "^4.59.0",
-    "semantic-release": "25.0.3",
-    "source-map-js": "1.2.1",
-    "typescript": "5.9.3"
+    "eslint-plugin-prettier": "5.5.7",
+    "eslint-plugin-react": "7.37.5",
+    "jest": "30.5.2",
+    "playwright": "1.64.1",
+    "rollup": "^4.65.0",
+    "semantic-release": "25.0.9",
+    "source-map-js": "1.2.2",
+    "typescript": "6.0.3"
   }
 }