rollup-plugin-react-scoped-css 1.2.4 → 1.2.6

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.d.ts

@@ -1 +1,5 @@
-export declare function scopeCss(css: string, filename: string, hash: string): string;
+export interface ScopedCssResult {
+    code: string;
+    map: string | null;
+}
+export declare function scopeCss(css: string, filename: string, hash: string, source?: string): ScopedCssResult;

package/dist/css/scope-css.js

@@ -1,22 +1,24 @@
 import { parse, generate, } 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 getSelectors = (items) => {
-    const selectorLists = items.reduce((acc, node) => {
-        if (node.type === "Rule" && node?.prelude?.type === "SelectorList") {
-            acc.push(node.prelude.children);
+    const selectorLists = [];
+    items.forEach((node) => {
+        if (node.type === "Rule" && node.prelude?.type === "SelectorList") {
+            selectorLists.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);
-                }
-            });
+        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 too.
+            selectorLists.push(...getSelectors(node.block.children));
         }
-        return acc;
-    }, []);
+    });
     return selectorLists;
 };
 const isScopePiercingPseudoSelector = (item) => {
@@ -30,9 +32,9 @@ const isPseudoSelector = (item) => {
 const isCombinator = (item) => {
     return item?.data?.type === "Combinator";
 };
-export function scopeCss(css, filename, hash) {
+export function scopeCss(css, filename, hash, source = filename) {
     try {
-        const ast = parse(css);
+        const ast = parse(css, { positions: true, filename: source });
         const selectorLists = getSelectors(ast.children);
         const attributeSelector = {
             type: "AttributeSelector",
@@ -75,10 +77,13 @@ export function scopeCss(css, filename, hash) {
                 });
             });
         });
-        return generate(ast);
+        const { css: scopedCss, map } = generate(ast, {
+            sourceMap: true,
+        });
+        return { code: scopedCss, map: map.toString() };
     }
     catch (e) {
         console.log(`Failed scoping css of file: ${filename}\n\nError:\n`, e);
-        return css;
+        return { code: css, map: null };
     }
 }

package/dist/index.js

@@ -5,6 +5,7 @@ import { generate } from "escodegen";
 import { addHashAttributesToJsxTagsAst } from "./ast-program.js";
 import { scopeCss } from "./css/scope-css.js";
 import { getImportDeclarationsValue } from "./utils/getImportDeclarationsValue.js";
+import { addLocationsToAst } from "./utils/addLocationsToAst.js";
 const getFilenameFromPath = (filePath) => {
     const parts = filePath.split("/");
     return parts[parts.length - 1].split("?")[0];
@@ -81,8 +82,13 @@ export function reactScopedCssPlugin(optionsIn = {}) {
                             ? `data-${hashPrefix}-${importerHash}`
                             : `data-${importerHash}`;
                         const newAst = addHashAttributesToJsxTagsAst(rootNode, scopedAttr);
-                        const newCode = generate(newAst);
-                        return newCode;
+                        addLocationsToAst(newAst, code, id);
+                        const { code: newCode, map } = generate(newAst, {
+                            sourceMap: id,
+                            sourceContent: code,
+                            sourceMapWithCode: true,
+                        });
+                        return { code: newCode, map: map.toString() };
                     }
                 }
                 else {
@@ -94,7 +100,7 @@ export function reactScopedCssPlugin(optionsIn = {}) {
                         const scopedAttr = options.hashPrefix
                             ? `data-${options.hashPrefix}-${importerHash}`
                             : `data-${importerHash}`;
-                        return scopeCss(code, getFilenameFromPath(id), scopedAttr);
+                        return scopeCss(code, getFilenameFromPath(id), scopedAttr, id);
                     }
                 }
             },

package/dist/utils/addLocationsToAst.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Escodegen generates source maps from the AST nodes' `loc` property, but
+ * Rollup's `this.parse()` only exposes `start`/`end` offsets. This walks the
+ * AST and adds equivalent `loc` information so a source map can be generated.
+ */
+export declare const addLocationsToAst: (ast: any, code: string, source: string) => any;

package/dist/utils/addLocationsToAst.js

@@ -0,0 +1,62 @@
+const getLineStarts = (code) => {
+    const lineStarts = [0];
+    for (let index = 0; index < code.length; index++) {
+        if (code.charCodeAt(index) === 10) {
+            lineStarts.push(index + 1);
+        }
+    }
+    return lineStarts;
+};
+const getPosition = (offset, lineStarts) => {
+    // Binary search for the last line start that is <= offset
+    let low = 0;
+    let high = lineStarts.length - 1;
+    while (low < high) {
+        const middle = Math.ceil((low + high) / 2);
+        if (lineStarts[middle] <= offset) {
+            low = middle;
+        }
+        else {
+            high = middle - 1;
+        }
+    }
+    return { line: low + 1, column: offset - lineStarts[low] };
+};
+/**
+ * Escodegen generates source maps from the AST nodes' `loc` property, but
+ * Rollup's `this.parse()` only exposes `start`/`end` offsets. This walks the
+ * AST and adds equivalent `loc` information so a source map can be generated.
+ */
+export const addLocationsToAst = (ast, code, source) => {
+    const lineStarts = getLineStarts(code);
+    const visit = (node) => {
+        if (!node || typeof node !== "object") {
+            return;
+        }
+        if (Array.isArray(node)) {
+            node.forEach(visit);
+            return;
+        }
+        if (typeof node.type === "string" &&
+            typeof node.start === "number" &&
+            typeof node.end === "number") {
+            const loc = {
+                start: getPosition(node.start, lineStarts),
+                end: getPosition(node.end, lineStarts),
+                source,
+            };
+            node.loc = loc;
+        }
+        for (const key of Object.keys(node)) {
+            if (key === "loc") {
+                continue;
+            }
+            const value = node[key];
+            if (value && typeof value === "object") {
+                visit(value);
+            }
+        }
+    };
+    visit(ast);
+    return ast;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "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,32 +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",
-    "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"
   }
 }