Skip to content

Conversation

@schiller-manuel
Copy link
Contributor

@schiller-manuel schiller-manuel commented Jan 13, 2026

Summary by CodeRabbit

Release Notes

  • New Features

    • Added new "Quoted CSS" page accessible from the main navigation featuring styled demonstrations of quoted content handling
  • Improvements

    • Enhanced CSS content extraction mechanism to properly identify, parse, and preserve styles containing quoted strings
  • Tests

    • Added comprehensive end-to-end test coverage validating CSS extraction behavior with quoted content and edge cases

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 13, 2026

📝 Walkthrough

Walkthrough

This PR introduces a new "/quotes" route to the CSS modules e2e test fixture to validate CSS extraction with quoted content. It updates the generated route tree, adds the quotes route component with accompanying CSS, includes a new e2e test, and refactors the CSS extraction logic in the dev server plugin from regex-based to marker/JSON.parse-based parsing.

Changes

Cohort / File(s) Summary
E2E Test Fixture - Route Tree & Navigation
e2e/react-start/css-modules/.gitignore, e2e/react-start/css-modules/src/routeTree.gen.ts, e2e/react-start/css-modules/src/routes/__root.tsx
Removes .gitignore entries for routeTree.gen.ts (now tracked); generates route tree with FileRoutesByFullPath, FileRoutesByTo, FileRoutesById, and RootRouteChildren type definitions; adds "/quotes" link to root navigation.
E2E Test Fixture - Route Implementation
e2e/react-start/css-modules/src/routes/quotes.tsx, e2e/react-start/css-modules/src/styles/quotes.css
Adds new Quotes route component rendering test divs with classNames for CSS validation; introduces quotes.css with .quote-test and .after-quote classes targeting content extraction edge cases with quoted strings.
E2E Test Fixture - Test Case
e2e/react-start/css-modules/tests/css.spec.ts
Adds end-to-end test navigating to /quotes and validating that both .quote-test (rgb(239, 68, 68)) and .after-quote (rgb(245, 158, 11)) styles are properly applied across quoted content.
CSS Extraction Logic
packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts
Replaces regex-based CSS extraction with marker-based approach; introduces VITE_CSS_MARKER constant and new extractCssFromCode() function that locates marker, parses JSON.stringify content, and returns CSS or undefined on failure.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested labels

package: start-plugin-core, package: react-router

Suggested reviewers

  • nlynzaad

Poem

🐰 A new route hops into the tree,
With quotes and styles for all to see,
The marker found where Vite did hide,
CSS now flows with open pride! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix: css dev extraction correctness and performance' directly addresses the main changes in this PR, which focus on fixing CSS extraction logic in the dev-styles.ts file and adding tests to validate proper handling of quoted CSS content.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ed3f2b0 and 90d103d.

📒 Files selected for processing (7)
  • e2e/react-start/css-modules/.gitignore
  • e2e/react-start/css-modules/src/routeTree.gen.ts
  • e2e/react-start/css-modules/src/routes/__root.tsx
  • e2e/react-start/css-modules/src/routes/quotes.tsx
  • e2e/react-start/css-modules/src/styles/quotes.css
  • e2e/react-start/css-modules/tests/css.spec.ts
  • packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts
💤 Files with no reviewable changes (1)
  • e2e/react-start/css-modules/.gitignore
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript strict mode with extensive type safety for all code

Files:

  • e2e/react-start/css-modules/src/routes/quotes.tsx
  • packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts
  • e2e/react-start/css-modules/src/routes/__root.tsx
  • e2e/react-start/css-modules/tests/css.spec.ts
  • e2e/react-start/css-modules/src/routeTree.gen.ts
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Implement ESLint rules for router best practices using the ESLint plugin router

Files:

  • e2e/react-start/css-modules/src/routes/quotes.tsx
  • packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts
  • e2e/react-start/css-modules/src/routes/__root.tsx
  • e2e/react-start/css-modules/tests/css.spec.ts
  • e2e/react-start/css-modules/src/routeTree.gen.ts
🧠 Learnings (8)
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.

Applied to files:

  • e2e/react-start/css-modules/src/routes/quotes.tsx
  • e2e/react-start/css-modules/src/routeTree.gen.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Applies to **/*.{js,ts,tsx} : Implement ESLint rules for router best practices using the ESLint plugin router

Applied to files:

  • e2e/react-start/css-modules/src/routes/quotes.tsx
  • e2e/react-start/css-modules/src/routeTree.gen.ts
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.

Applied to files:

  • e2e/react-start/css-modules/src/routes/quotes.tsx
  • e2e/react-start/css-modules/src/routeTree.gen.ts
📚 Learning: 2025-12-17T02:17:55.086Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 6120
File: packages/router-generator/src/generator.ts:654-657
Timestamp: 2025-12-17T02:17:55.086Z
Learning: In `packages/router-generator/src/generator.ts`, pathless_layout routes must receive a `path` property when they have a `cleanedPath`, even though they are non-path routes. This is necessary because child routes inherit the path from their parent, and without this property, child routes would not have the correct full path at runtime.

Applied to files:

  • e2e/react-start/css-modules/src/routes/quotes.tsx
  • e2e/react-start/css-modules/src/routeTree.gen.ts
📚 Learning: 2025-10-09T12:59:02.129Z
Learnt from: hokkyss
Repo: TanStack/router PR: 5418
File: e2e/react-start/custom-identifier-prefix/src/styles/app.css:19-21
Timestamp: 2025-10-09T12:59:02.129Z
Learning: In e2e test directories (paths containing `e2e/`), accessibility concerns like outline suppression patterns are less critical since the code is for testing purposes, not production use.

Applied to files:

  • e2e/react-start/css-modules/tests/css.spec.ts
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.

Applied to files:

  • e2e/react-start/css-modules/src/routeTree.gen.ts
📚 Learning: 2025-12-21T12:52:35.231Z
Learnt from: Sheraff
Repo: TanStack/router PR: 6171
File: packages/router-core/src/new-process-route-tree.ts:898-898
Timestamp: 2025-12-21T12:52:35.231Z
Learning: In `packages/router-core/src/new-process-route-tree.ts`, the matching logic intentionally allows paths without trailing slashes to match index routes with trailing slashes (e.g., `/a` can match `/a/` route), but not vice-versa (e.g., `/a/` cannot match `/a` layout route). This is implemented via the condition `!pathIsIndex || node.kind === SEGMENT_TYPE_INDEX` and is a deliberate design decision to provide better UX by being permissive with missing trailing slashes.

Applied to files:

  • e2e/react-start/css-modules/src/routeTree.gen.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Use file-based routing in `src/routes/` directories or code-based routing with route definitions

Applied to files:

  • e2e/react-start/css-modules/src/routeTree.gen.ts
🧬 Code graph analysis (1)
e2e/react-start/css-modules/src/routes/quotes.tsx (2)
e2e/react-start/css-modules/src/routes/__root.tsx (1)
  • Route (9-17)
packages/router-core/src/ssr/tsrScript.ts (1)
  • p (16-18)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Test
  • GitHub Check: Preview
🔇 Additional comments (7)
e2e/react-start/css-modules/src/styles/quotes.css (1)

1-17: LGTM! Good test case for CSS extraction.

This CSS file correctly tests the edge case where quoted content in CSS (like content: 'Hello World') could break regex-based extraction. The styles after the quoted content (.after-quote) validate that the full CSS is extracted.

packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts (2)

23-24: LGTM! Clear marker definition.

The marker constant is well-defined and matches Vite's output format.


252-291: Solid refactor from regex to marker-based JSON parsing.

The new approach correctly handles CSS content with quotes by leveraging JSON.parse to reverse the escaping that Vite applies via JSON.stringify. The escape sequence handling (skipping i += 2 on backslash) is correct for JSON string literals.

One minor observation: the loop handles escape sequences by blindly skipping the next character. This works because:

  1. JSON escape sequences are either single-char (\", \\, \/, \b, \f, \n, \r, \t) or \uXXXX
  2. For \uXXXX, the subsequent hex chars are processed as regular characters (not backslash-prefixed), which is correct

The try/catch around JSON.parse provides a safe fallback for malformed input.

e2e/react-start/css-modules/src/routes/__root.tsx (1)

58-64: LGTM!

The new navigation link follows the established pattern with consistent styling and proper test ID naming convention.

e2e/react-start/css-modules/tests/css.spec.ts (1)

155-181: LGTM! Comprehensive test for the CSS extraction fix.

The test correctly validates that:

  1. CSS with quoted content property is extracted (quote-styled element)
  2. CSS rules following the quoted content are also extracted (after-quote-styled element)

Testing with JavaScript disabled ensures we're validating SSR CSS extraction behavior. The comment on line 172 clearly documents the regression being tested.

e2e/react-start/css-modules/src/routes/quotes.tsx (1)

1-23: LGTM!

The route component is well-structured as a test fixture:

  • Proper file-based route setup using createFileRoute
  • CSS import correctly references the styles
  • Test IDs align with the e2e test expectations
  • Clear descriptive content explaining the test purpose
e2e/react-start/css-modules/src/routeTree.gen.ts (1)

1-9: Autogenerated file — skipping review.

Based on learnings, routeTree.gen.ts files in TanStack Router repositories are autogenerated and should not be manually modified or reviewed. The file header confirms this with /* eslint-disable */, // @ts-nocheck, and explicit comments stating it will be overwritten.


Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link

nx-cloud bot commented Jan 13, 2026

View your CI Pipeline Execution ↗ for commit 90d103d

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 16m 41s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 37s View ↗

☁️ Nx Cloud last updated this comment at 2026-01-13 19:27:46 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 13, 2026

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@6383

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@6383

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@6383

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@6383

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@6383

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@6383

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@6383

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@6383

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@6383

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@6383

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@6383

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@6383

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@6383

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@6383

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@6383

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@6383

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@6383

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@6383

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@6383

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@6383

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@6383

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@6383

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@6383

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@6383

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@6383

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@6383

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-fn-stubs@6383

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@6383

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@6383

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@6383

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@6383

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@6383

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@6383

@tanstack/vue-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router@6383

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-devtools@6383

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-ssr-query@6383

@tanstack/vue-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start@6383

@tanstack/vue-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-client@6383

@tanstack/vue-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-server@6383

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@6383

commit: 90d103d

@schiller-manuel schiller-manuel merged commit 88aca7f into main Jan 13, 2026
6 checks passed
@schiller-manuel schiller-manuel deleted the dev-styles-quote-fix branch January 13, 2026 19:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants