fix(testing-library): do not transform css imports

[upupming]

Summary by CodeRabbit

• Bug Fixes

  • Fixed a CSS transform error in the React testing library, improving stability when loading styles in tests.

• Tests

  • Added tests covering global CSS and CSS Modules to ensure components render with styled classes.

• Chores

  • Prepared a patch release for the React package.

• Notes

  • Test tooling now restricts transforms to JavaScript/TypeScript files; no public API changes.

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

🦋 Changeset detected

Latest commit: 9deab2b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lynx-js/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a changeset for @lynx-js/react, restricts the vitest transform plugin to JS/TS files, updates a test import path, and adds CSS and CSS-module test assets plus a new test exercising CSS Modules rendering.

Changes

Cohort / File(s)	Summary
Release metadata ./.changeset/curvy-dragons-appear.md	Adds a patch changeset for @lynx-js/react with description "fix css transform error in testing library."
Vitest transform plugin packages/react/testing-library/src/vitest.config.js	Limits transformReactLynxPlugin to JS/TS file extensions via regex; non-JS/TS files now return null (skip) instead of being dropped/emptied.
CSS test assets packages/react/testing-library/src/__tests__/css/style1.css, packages/react/testing-library/src/__tests__/css/style2.css, packages/react/testing-library/src/__tests__/css/style3.module.css	Adds plain CSS files (.foo, .bar) and a CSS Module (.baz) used by tests.
CSS tests packages/react/testing-library/src/__tests__/css/index.test.jsx	Adjusts render import path, imports CSS assets, and adds a test asserting CSS Module class mapping and rendered output.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• chore(testing-library): remove debug info #1330 — Edits the same transformReactLynxPlugin area in vitest config (related transform behavior changes).

Suggested reviewers

• colinaaa
• hzy
• gaoachao

Poem

I twitch my whiskers at a regex beat,
Skipping stray files so transforms stay neat.
Foo, bar, baz hop into the test light,
A blue module winks — the snapshot looks right. 🐇✨

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d573ef1 and 9deab2b.

📒 Files selected for processing (1)

• packages/react/testing-library/src/__tests__/css/index.test.jsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/react/testing-library/src/tests/css/index.test.jsx

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (3)

.changeset/curvy-dragons-appear.md (1)

1-5: Nit: make the changeset summary clearer for release notes.

Be explicit that we’re skipping CSS transforms in Vitest to fix CSS Modules import errors.

Apply:

-fix css transform error in testing library
+testing-library: skip transforming CSS imports in Vitest to fix CSS Modules import error

packages/react/testing-library/src/vitest.config.js (2)

65-75: Hoist the regex to avoid re-allocating it on every transform call

Very minor perf/readability nit: define the regex once per plugin instance instead of recreating it per file transform.

Apply this diff:

 function transformReactLynxPlugin() {
-    return {
+    // Same regex as rspack's `CHAIN_ID.RULE.JS`
+    const JS_EXT_RE = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)(\?.*)?$/;
+    return {
       name: 'transformReactLynxPlugin',
       enforce: 'pre',
       transform(sourceText, sourcePath) {
         const id = sourcePath;
-        // Only transform JS files
-        // Using the same regex as rspack's `CHAIN_ID.RULE.JS` rule
-        const regex = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)(\?.*)?$/;
-        if (!regex.test(id)) return null;
+        // Only transform JS files
+        if (!JS_EXT_RE.test(id)) return null;

---

69-75: Optionally ignore virtual module ids early

Slight hardening: skip Vite/Rollup virtual modules (ids starting with “\0”) explicitly. It’s harmless here but keeps intent clear and avoids touching synthetic ids.

Apply this diff:

       transform(sourceText, sourcePath) {
         const id = sourcePath;
+        // Ignore virtual modules
+        if (id[0] === '\0') return null;
         // Only transform JS files

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 517ac33 and d573ef1.

📒 Files selected for processing (6)

• .changeset/curvy-dragons-appear.md (1 hunks)
• packages/react/testing-library/src/__tests__/css/index.test.jsx (2 hunks)
• packages/react/testing-library/src/__tests__/css/style1.css (1 hunks)
• packages/react/testing-library/src/__tests__/css/style2.css (1 hunks)
• packages/react/testing-library/src/__tests__/css/style3.module.css (1 hunks)
• packages/react/testing-library/src/vitest.config.js (1 hunks)

🧰 Additional context used

🧠 Learnings (8)

📓 Common learnings

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/react/testing-library/src/vitest.config.js` is source code for the testing library that gets exported for users, not a test configuration that should be included in the main vitest projects array.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.627Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/rspeedy/create-rspeedy/template-react-vitest-rltl-js/vitest.config.js` is a template file for scaffolding new Rspeedy projects, not a test configuration that should be included in the main vitest projects array.

Learnt from: upupming
PR: lynx-family/lynx-stack#1305
File: packages/react/testing-library/src/plugins/vitest.ts:4-6
Timestamp: 2025-08-11T05:59:28.508Z
Learning: In the lynx-family/lynx-stack repository, the `packages/react/testing-library` package does not have `vite` as a direct dependency. It relies on `vitest` being available from the monorepo root and accesses Vite types through re-exports from `vitest/node`. Direct imports from `vite` should not be suggested for this package.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.

📚 Learning: 2025-07-22T09:26:16.722Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.

Applied to files:

• .changeset/curvy-dragons-appear.md

📚 Learning: 2025-07-22T09:23:07.797Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.

Applied to files:

• .changeset/curvy-dragons-appear.md

📚 Learning: 2025-08-07T04:00:59.627Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.627Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.

Applied to files:

• .changeset/curvy-dragons-appear.md

📚 Learning: 2025-08-06T13:28:57.139Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/react/testing-library/src/vitest.config.js` is source code for the testing library that gets exported for users, not a test configuration that should be included in the main vitest projects array.

Applied to files:

• packages/react/testing-library/src/vitest.config.js

📚 Learning: 2025-08-06T13:28:57.139Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/rspeedy/create-rspeedy/template-react-vitest-rltl-js/vitest.config.js` is a template file for scaffolding new Rspeedy projects, not a test configuration that should be included in the main vitest projects array.

Applied to files:

• packages/react/testing-library/src/vitest.config.js

📚 Learning: 2025-08-11T06:00:04.354Z

Learnt from: upupming
PR: lynx-family/lynx-stack#1305
File: packages/react/testing-library/src/plugins/vitest.ts:59-61
Timestamp: 2025-08-11T06:00:04.354Z
Learning: In the lynx-family/lynx-stack repository, the `testingLibraryPlugin` in `packages/react/testing-library/src/plugins/vitest.ts` intentionally uses `process.exit` when jsdom installation fails, maintaining consistency with the previous implementation from `packages/react/testing-library/src/vitest.config.js`. This behavior should not be changed to use `this.error` despite being a Vite plugin best practice.

Applied to files:

• packages/react/testing-library/src/vitest.config.js

📚 Learning: 2025-08-11T05:59:28.508Z

Learnt from: upupming
PR: lynx-family/lynx-stack#1305
File: packages/react/testing-library/src/plugins/vitest.ts:4-6
Timestamp: 2025-08-11T05:59:28.508Z
Learning: In the lynx-family/lynx-stack repository, the `packages/react/testing-library` package does not have `vite` as a direct dependency. It relies on `vitest` being available from the monorepo root and accesses Vite types through re-exports from `vitest/node`. Direct imports from `vite` should not be suggested for this package.

Applied to files:

• packages/react/testing-library/src/vitest.config.js

🔇 Additional comments (5)

packages/react/testing-library/src/__tests__/css/style2.css (1)

1-3: LGTM: simple CSS fixture for import side-effects.

This is a minimal, clear asset for exercising CSS imports in tests. No issues.

packages/react/testing-library/src/__tests__/css/style1.css (1)

1-3: LGTM: concise CSS fixture.

Appropriate for validating that plain CSS imports don’t break under the new transform behavior.

packages/react/testing-library/src/__tests__/css/style3.module.css (1)

1-3: LGTM: CSS Module fixture aligns with test usage.

Class name matches the test expectations (style3.baz). No concerns.

packages/react/testing-library/src/__tests__/css/index.test.jsx (1)

5-7: CSS/CSS Module handling is correctly delegated to Vite

• The transform hook in packages/react/testing-library/src/vitest.config.js (lines 69–76) uses a JS/TS-only regex (\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)(\?.*)?$), returning null for CSS files.
• No direct import … from 'vite' statements are present in this package.

packages/react/testing-library/src/vitest.config.js (1)

71-74: LGTM: gating the transform to JS/TS correctly avoids transforming CSS

Returning null for non-JS/TS ids delegates CSS/CSS-Modules to Vite’s CSS pipeline, aligning with the PR objective and fixing the prior CSS transform issue. Using the rspack-aligned regex is a nice consistency touch.

[codspeed-hq]

CodSpeed Performance Report

Merging #1500 will not alter performance

_{Comparing upupming:fix/testing-css-common (9deab2b) with main (cb6d23c)}

Summary

✅ 10 untouched benchmarks

[relativeci]

React Example

#4191 Bundle Size — 237.04KiB (0%).

9deab2b(current) vs cb6d23c main#4175(baseline)

Bundle metrics  no changes

	Current #4191	Baseline #4175
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	4	4
Modules	158	158
Duplicate Modules	64	64
Duplicate Code	45.86%	45.86%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #4191	Baseline #4175
IMG	145.76KiB	145.76KiB
Other	91.28KiB	91.28KiB

Bundle analysis report Branch upupming:fix/testing-css-common Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

Web Explorer

#4186 Bundle Size — 344.52KiB (0%).

9deab2b(current) vs cb6d23c main#4171(baseline)

Bundle metrics  no changes

	Current #4186	Baseline #4171
Initial JS	143.37KiB	143.37KiB
Initial CSS	31.84KiB	31.84KiB
Cache Invalidation	0%	41.61%
Chunks	7	7
Assets	7	7
Modules	211	211
Duplicate Modules	17	17
Duplicate Code	3.96%	3.96%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #4186	Baseline #4171
JS	229.72KiB	229.72KiB
Other	82.95KiB	82.95KiB
CSS	31.84KiB	31.84KiB

Bundle analysis report Branch upupming:fix/testing-css-common Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[colinaaa]

👍