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

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,135 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported privately to the project maintainer on GitHub at
+[@cmseguin](https://github.com/cmseguin). If you would rather not contact the
+maintainer directly, you can use GitHub's
+[report abuse](https://github.com/contact/report-abuse) form.
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

package/CONTRIBUTING.md

@@ -0,0 +1,182 @@
+# Contributing to rollup-plugin-react-scoped-css
+
+Thanks for your interest in improving the plugin! Contributions of every size
+are welcome — bug reports, documentation fixes, new test cases, and code.
+
+## Code of Conduct
+
+This project follows the [Contributor Covenant](CODE_OF_CONDUCT.md). By
+participating, you are expected to uphold it. Disagreement about technical
+decisions is fine; personal attacks, harassment, and abusive behavior are not.
+Report unacceptable behavior through the channels listed in the policy.
+
+Anyone is free to open a PR and contribute to this project... just be civilized!
+
+## Ways to contribute
+
+### Reporting bugs
+
+Before opening an issue, please search
+[existing issues](https://github.com/cmseguin/rollup-plugin-react-scoped-css/issues)
+to avoid duplicates. A good bug report includes:
+
+- the plugin version (from `package.json` or `npm ls rollup-plugin-react-scoped-css`),
+- your bundler and version (Vite, Rollup, or Rolldown), plus your Node version,
+- a minimal reproduction — the smallest component and stylesheet that show the
+  problem, ideally as a link to a repository or a code sandbox,
+- the actual output and the output you expected,
+- any error output in full.
+
+### Suggesting features
+
+Open an issue describing the problem you are trying to solve before writing
+code. Explain the use case and, if possible, how other libraries handle it.
+Features that can be implemented by an existing CSS or bundler plugin are
+usually out of scope — this plugin deliberately does not transpile JSX,
+preprocess SCSS/LESS, or bundle CSS.
+
+### Improving documentation
+
+The README is the primary documentation. Fixes for typos, unclear examples, or
+missing caveats are always appreciated and can go straight to a pull request.
+
+## Development setup
+
+**Requirements:** Node >= 18 (CI runs Node 24) and npm.
+
+```sh
+git clone https://github.com/cmseguin/rollup-plugin-react-scoped-css.git
+cd rollup-plugin-react-scoped-css
+npm ci
+npm run build
+```
+
+Useful scripts:
+
+| Script | What it does |
+| --- | --- |
+| `npm run build` | Type-checks and compiles `src/` to `dist/` with `tsc` |
+| `npm run build:watch` | Rebuilds on change |
+| `npm test` | Runs the Jest unit test suite |
+| `npm run lint` | Runs ESLint (including Prettier formatting checks) |
+| `npm run test:e2e` | Runs the browser compatibility harness (see below) |
+
+## Project structure
+
+```text
+src/
+├── index.ts              # Plugin entry point: the Vite plugin and the
+│                         # pre/post halves used by Rollup and Rolldown
+├── ast-program.ts        # Walks the compiled React output
+├── ast-transformer.ts    # Adds the data-<hash> attributes to JSX elements
+├── ast-iterator.ts       # Generic AST traversal helpers
+├── parsers/              # Babel output parsers (classic and automatic JSX)
+├── css/
+│   ├── scope-css.ts      # The CSS scoper and selector rewriting
+│   └── css-features.spec.ts  # CSS support matrix tests
+└── utils/                # Shared helpers
+e2e/                      # Playwright harness for Vite, Rollup, and Rolldown
+```
+
+Unit tests live next to the code they cover as `*.spec.ts`. The e2e harness
+installs the packed plugin into isolated throwaway projects under
+`e2e/.cache/`, so it is slow but exercises the real published artifact.
+
+## Running tests
+
+Unit tests are fast and should cover any new scoping logic:
+
+```sh
+npm test
+```
+
+The end-to-end harness drives a real browser against Vite 2–8, Rollup, and
+Rolldown. It needs Node >= 20.19 and a Playwright browser:
+
+```sh
+npm run test:e2e:install   # once; installs Chromium
+npm run test:e2e           # all bundlers
+```
+
+See the [Testing](README.md#testing) section of the README for the full option
+list. If your change touches CSS scoping, please add cases to
+`src/css/scope-css.spec.ts` or `src/css/css-features.spec.ts` rather than
+relying on the e2e harness alone.
+
+## Coding standards
+
+- **TypeScript** with `strict` mode enabled. Add types; avoid `any`.
+- **Formatting** is enforced by Prettier through ESLint. Run `npm run lint`
+  before pushing (or `npx eslint --fix` on the files you changed).
+- Match the style of the surrounding code: small, focused modules with
+  descriptive names.
+- Keep the plugin's scope tight. It transforms CSS and JSX; it should not start
+  transpiling, bundling, or resolving dependencies.
+- New behavior needs tests. New options need a JSDoc comment in the plugin
+  options type and a README entry.
+
+## Commit messages
+
+This project uses [Conventional Commits](https://www.conventionalcommits.org/)
+and releases are automated with
+[semantic-release](https://github.com/semantic-release/semantic-release). The
+commit message controls the next version number, so it matters:
+
+| Prefix | Use for | Effect |
+| --- | --- | --- |
+| `feat:` | A new feature | Minor release |
+| `fix:` | A bug fix | Patch release |
+| `docs:` | Documentation only | No release |
+| `test:` | Tests only | No release |
+| `chore:` | Tooling, dependencies, CI | No release |
+| `refactor:` | Code change with no behavior change | No release |
+| `perf:` | Performance improvement | Patch release |
+
+A scope is optional but encouraged, e.g. `fix(css): scope selectors inside
+container queries`. A `!` after the type or scope marks a breaking change:
+
+```text
+feat(css)!: rename the deep selector to ::deep
+```
+
+Pull requests are squash-merged, so the PR title becomes the commit message —
+please make it conventional too.
+
+## Pull request process
+
+1. Fork the repository and create a topic branch from `main`
+   (`git checkout -b fix/scoped-at-rules`).
+2. Make your change, add tests, and update the README if you changed behavior
+   or options.
+3. Make sure the full suite passes locally:
+
+   ```sh
+   npm run build && npm test && npm run lint
+   ```
+
+4. Open the pull request against `main`. Describe the problem, the approach,
+   and any trade-offs. Link related issues with `Closes #123`.
+5. CI runs the build, unit tests, lint, and the e2e harness. All jobs must be
+   green before a review.
+6. Address review feedback by pushing additional commits; the branch is
+   squash-merged when approved.
+
+Draft pull requests are welcome if you want early feedback on an approach.
+
+## Release process
+
+Releases are cut automatically from `main` by semantic-release on every merge.
+It determines the version from the commit history, publishes to npm, creates the
+GitHub release with generated notes, and commits the new version back to the
+repository with `[skip ci]`. Maintainers do not publish manually — merging a
+`feat:` or `fix:` pull request is the release.
+
+Prereleases are published under the `alpha` npm tag from `releases/<version>-alpha`
+branches, independently of `main`. You do not need to do anything special for
+those; contributors work against `main`.
+
+## Questions
+
+If anything here is unclear, open a
+[discussion or issue](https://github.com/cmseguin/rollup-plugin-react-scoped-css/issues).
+We would rather answer a question than have you guess.

package/README.md

@@ -3,13 +3,14 @@
 [![npm version](https://img.shields.io/npm/v/rollup-plugin-react-scoped-css.svg?style=flat-square)](https://www.npmjs.com/package/rollup-plugin-react-scoped-css)
 [![npm downloads](https://img.shields.io/npm/dm/rollup-plugin-react-scoped-css.svg?style=flat-square)](https://www.npmjs.com/package/rollup-plugin-react-scoped-css)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg?style=flat-square)](CODE_OF_CONDUCT.md)
 
 ## Motivations
 While using react in a professional context, I realized that it was lacking the scoped css feature that I learned to love from Vue and Angular. After some research I came across good plugins, but sadly were not compatible with vite and/or rollup. Thus, I decided to create this plugin.
 
 ## Requirements
 + **node** >= 18
-+ **vite** >= 5
++ **vite** >= 2, or **rollup** >= 4, or **rolldown** >= 1
 
 ## How to install
 
@@ -32,19 +33,22 @@ export default defineConfig({
 })
 ```
 
-in rollup:
+without vite (rollup or rolldown):
 ```js
-// rollup.config.js
+// rollup.config.js / rolldown.config.js
 import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css';
 
+// The plugin returns two halves that must run before and after your JSX and
+// CSS plugins.
+const [scopedCssPre, scopedCssPost] = reactScopedCssPlugin();
+
 export default {
-  input: 'src/input.js',
-  output: { file: 'ouput.js' },
-  plugins: [ reactScopedCssPlugin() ]
+  input: 'src/main.tsx',
+  plugins: [scopedCssPre, /* JSX + CSS plugins go here */, scopedCssPost],
 };
 ```
 
-***Notes:** Because this plugin has been built with vite as its primary usecase, it doesn't transpile LESS, SCSS or other preprocessors. For that reason, you will likely need to add your transpilation plugins before reactScopedCssPlugin if you plan on using this without vite.*
+***Notes:** Because this plugin has been built with vite as its primary usecase, it doesn't transpile JSX/TypeScript, LESS, SCSS or other preprocessors, and it doesn't process CSS imports. When you use Rollup or Rolldown directly, you need to plug in those pieces between the two halves of the plugin. See [Using without Vite](#using-without-vite-rollup-and-rolldown) for complete, working configs.*
 
 ### Customizing the plugin
 There are a few options available to customize how the plugin works
@@ -102,17 +106,213 @@ There are a few options available to customize how the plugin works
 }
 ```
 
-### Advanced Rollup usecases
-Since this plugin works in two parts, you might need to expose the first part, then add any other plugin, and then expose the second part of the plugin. This part is automatically handled with vite thanks to the enforce attribute.
+### Using without Vite (Rollup and Rolldown)
+The plugin works in two halves:
+
+1. `scopedCssPre` rewrites scoped style imports such as
+   `./Component.scoped.css` to `./Component.scoped.css?scope=<hash>`.
+2. `scopedCssPost` scopes the CSS and adds the matching `data-<hash>` attributes
+   to the compiled React output.
+
+Vite orders these automatically through the `enforce` option. With Rollup or
+Rolldown, `enforce` is ignored, so you must place them in the `plugins` array
+yourself and put the following between them:
+
+- **JSX/TypeScript transpilation first.** The second half inspects compiled
+  `React.createElement()` or `_jsx()` calls, not raw JSX. Babel (shown below) or
+  any equivalent transpiler works.
+- **A CSS loader/emitter.** Rollup and Rolldown do not process `.css` imports
+  on their own. The bridge below reads the file, lets `scopedCssPost` transform
+  it, then emits the transformed CSS and replaces the import with an empty
+  module.
+
+#### When is the bridge needed?
+
+The bridge is needed when nothing else in your build turns `.css` imports into
+JavaScript. Neither Rollup nor Rolldown does that on its own, so a plain config
+fails as soon as it reaches the first style import.
+
+Use the bridge when:
+
+- you are adding the plugin to a plain Rollup or Rolldown config and want
+  minimal CSS handling — all styles collected into one stylesheet;
+- you don't already have a CSS plugin that can load the scoped imports.
+
+You can skip it when:
+
+- Vite is handling CSS and plugin ordering for you;
+- another CSS plugin already handles `.css` imports. Put that plugin between
+  `scopedCssPre` and `scopedCssPost`, and make sure it accepts the
+  `?scope=<hash>` query the plugin adds to scoped imports.
+
+The bridge only does extraction. If you need style injection, CSS modules,
+preprocessor support, or per-chunk styles, use a dedicated CSS plugin instead.
+
+#### CSS bridge
+Save this next to your config:
 
 ```js
-const reactScopedPlugins = reactScopedCssPlugin()
+// scoped-css-bridge.js
+import { readFile } from 'node:fs/promises'
+
+const stripQuery = (id) => id.split('?')[0]
+const isCss = (id) => stripQuery(id).endsWith('.css')
+
+export function scopedCssBridge() {
+  const styles = new Map()
+
+  return [
+    {
+      name: 'scoped-css:load',
+      async load(id) {
+        if (isCss(id)) {
+          return readFile(stripQuery(id), 'utf8')
+        }
+      },
+    },
+    {
+      name: 'scoped-css:emit',
+      transform(code, id) {
+        if (!isCss(id)) return
+        styles.set(stripQuery(id), code)
+        return { code: 'export default undefined', map: null }
+      },
+      generateBundle() {
+        this.emitFile({
+          type: 'asset',
+          fileName: 'styles.css',
+          source: [...styles.values()].join('\n'),
+        })
+      },
+    },
+  ]
+}
+```
+
+#### Rollup
+
+```sh
+npm i -D rollup @babel/core @babel/preset-react @babel/preset-typescript \
+  @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve \
+  @rollup/plugin-replace
+```
+
+```js
+// rollup.config.js
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'
+import { scopedCssBridge } from './scoped-css-bridge.js'
+
+const [scopedCssPre, scopedCssPost] = reactScopedCssPlugin()
+const [cssLoader, cssEmitter] = scopedCssBridge()
+
 export default {
-  //...
-  plugins: [ reactScopedPlugins[0], {...stylingPlugins}, reactScopedPlugins[1] ]
-};
+  input: 'src/main.tsx',
+  output: {
+    dir: 'dist',
+    format: 'esm',
+    entryFileNames: 'main.js',
+    sourcemap: true,
+  },
+  plugins: [
+    scopedCssPre,
+    babel({
+      babelHelpers: 'bundled',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      exclude: '**/node_modules/**',
+      presets: [
+        ['@babel/preset-react', { runtime: 'automatic' }],
+        '@babel/preset-typescript',
+      ],
+    }),
+    cssLoader,
+    scopedCssPost,
+    cssEmitter,
+    replace({
+      preventAssignment: true,
+      values: { 'process.env.NODE_ENV': JSON.stringify('production') },
+    }),
+    nodeResolve({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
+    commonjs(),
+  ],
+}
+```
+
+`nodeResolve` and `commonjs` are only needed if React is bundled rather than
+loaded externally. `replace` is needed because React's CommonJS build checks
+`process.env.NODE_ENV` at runtime.
+
+#### Rolldown
+
+Rolldown resolves node_modules and bundles CommonJS itself, but Babel still has
+to run before `scopedCssPost`, and CSS has to be treated as JavaScript for the
+bridge to take over.
+
+```sh
+npm i -D rolldown @babel/core @babel/preset-react @babel/preset-typescript \
+  @rollup/plugin-babel
 ```
 
+```js
+// rolldown.config.js
+import { defineConfig } from 'rolldown'
+import babel from '@rollup/plugin-babel'
+import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'
+import { scopedCssBridge } from './scoped-css-bridge.js'
+
+const [scopedCssPre, scopedCssPost] = reactScopedCssPlugin()
+const [cssLoader, cssEmitter] = scopedCssBridge()
+
+export default defineConfig({
+  input: 'src/main.tsx',
+  platform: 'browser',
+  // Rolldown no longer bundles CSS itself. The bridge emits it instead.
+  moduleTypes: { '.css': 'js' },
+  transform: {
+    define: { 'process.env.NODE_ENV': JSON.stringify('production') },
+  },
+  plugins: [
+    scopedCssPre,
+    babel({
+      babelHelpers: 'bundled',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      exclude: '**/node_modules/**',
+      presets: [
+        ['@babel/preset-react', { runtime: 'automatic' }],
+        '@babel/preset-typescript',
+      ],
+    }),
+    cssLoader,
+    scopedCssPost,
+    cssEmitter,
+  ],
+  output: {
+    dir: 'dist',
+    format: 'esm',
+    entryFileNames: 'main.js',
+    sourcemap: true,
+  },
+})
+```
+
+#### Notes
+- Neither Rollup nor Rolldown generates an HTML entry. Load the emitted files
+  yourself, for example
+  `<link rel="stylesheet" href="./styles.css">` and
+  `<script type="module" src="./main.js"></script>`.
+- If you use a CSS plugin such as `rollup-plugin-postcss` instead of the bridge,
+  make sure it accepts the `?scope=<hash>` query that `scopedCssPre` adds and
+  runs between the two halves of the plugin.
+- Preprocessors (SCSS, LESS, etc.) still need to run before `scopedCssPost`.
+  Compile them to CSS inside the bridge (or add a preprocessor plugin between
+  `cssLoader` and `scopedCssPost`) so the scoper receives plain CSS.
+- `scopedCssPost` must stay after your JSX transpiler and after the CSS loader,
+  and the CSS emitter must stay after `scopedCssPost`.
+
+
 ## Usage
 
 ```jsx
@@ -170,24 +370,34 @@ Be careful with descendant selectors in recursive components! For a CSS rule wit
 npm test
 ```
 
-### End-to-end Vite compatibility harness
+### End-to-end compatibility harness
+
+The e2e harness packs the plugin with `npm pack`, installs it into isolated
+projects, then drives a real browser against each setup:
 
-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`.
+- **Vite 2, 3, 4, 5, 6, 7, and 8** — the dev server and a production build
+  served with `vite preview`.
+- **Rollup** — a production build using `@rollup/plugin-babel`, the CSS bridge
+  documented above, and the bundled React runtime, served by a static Node
+  server.
+- **Rolldown** — the same production build and CSS bridge with Rolldown's
+  built-in resolver, served the same way.
 
 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
+npm run test:e2e           # all bundlers (Vite matrix + Rollup + Rolldown)
+npm run test:e2e:vite      # Vite only
+npm run test:e2e:bundlers  # Rollup and Rolldown only
 ```
 
 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 -- --bundler rollup      # vite, rollup, rolldown, or all (default)
+npm run test:e2e -- --bundler vite --vite 7   # one Vite major
+npm run test:e2e -- --mode dev            # dev, build, or both (Vite only)
 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
@@ -195,25 +405,35 @@ npm run test:e2e -- --keep-temp           # keep production build output
 npm run test:e2e -- --allow-broken-sourcemap
 ```
 
+`--vite` and `--mode` only affect the Vite matrix. The Rollup and Rolldown
+setups run production builds only, so `--mode dev` fails when either is
+selected.
+
 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;
+- computed styles match in Vite dev, Vite production, and the standalone
+  bundles;
 - 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.
+- there are no page/console/network errors, and Vite runs emit 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.
+All installs are cached in `e2e/.cache/`; the cache key includes the packed
+plugin, so plugin changes trigger a reinstall. Each Vite major uses the
+`@vitejs/plugin-react` release that still declares it as a peer. Vite 8 uses
+Rolldown rather than Rollup; `rollup` is installed in the Vite projects only to
+satisfy this package's peer dependency. The `e2e` CI job runs
+`npm run test:e2e`, covering all three bundlers.
 
 ## Contributing
 Anyone is free to open a PR and contribute to this project... just be civilized!
 
+Read [CONTRIBUTING.md](CONTRIBUTING.md) for the development setup, test commands, commit conventions, and pull request process.
+
 
 ## Credits
 Inspired by [react-scoped-css](https://github.com/gaoxiaoliangz/react-scoped-css).

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,7 +1,7 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "1.2.7",
-  "description": "Bring scoped CSS to React with Vite & Rollup. Lightweight component-level style isolation similar to Vue and Angular.",
+  "version": "1.3.1",
+  "description": "Bring scoped CSS to React with Vite, Rollup & Rolldown. Lightweight component-level style isolation similar to Vue and Angular.",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,6 +11,8 @@
     "lint": "eslint '*/**/*.{js,jsx,ts,tsx}'",
     "test": "jest",
     "test:e2e": "node e2e/run.mjs",
+    "test:e2e:vite": "node e2e/run.mjs --bundler vite",
+    "test:e2e:bundlers": "node e2e/run.mjs --bundler rollup,rolldown",
     "test:e2e:install": "playwright install chromium"
   },
   "repository": {
@@ -25,6 +27,7 @@
   ],
   "keywords": [
     "rollup",
+    "rolldown",
     "react",
     "css",
     "styles",
@@ -39,6 +42,15 @@
     "isolation"
   ],
   "license": "MIT",
+  "jest": {
+    "modulePathIgnorePatterns": [
+      "<rootDir>/e2e/.cache/"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/e2e/"
+    ]
+  },
   "bugs": {
     "url": "https://github.com/cmseguin/rollup-plugin-react-scoped-css/issues"
   },