rollup-plugin-react-scoped-css 1.2.5 → 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.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) => {

package/package.json

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