Handle css quotes when collecting dev styles

[jmbockhorst]

CSS with quotes like this:

.something {
    content: ' ';
}

was breaking the CSS detection when collecting styles in dev, causing it to cut off at that point.

This updates the regex to fix that, and handle quotes when they are escaped.

Summary by CodeRabbit

• Bug Fixes
  • Improved CSS processing and handling across React, Solid, and Vue framework starters.
  • Enhanced CSS extraction and parsing in the development server to ensure proper style handling.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds CSS pseudo-elements (.global-container:before) to e2e test stylesheets and refactors the CSS extraction regex pattern in the dev-styles plugin to use separate capturing groups for delimiters and content, improving robustness of CSS processing.

Changes

Cohort / File(s)	Summary
E2E Test CSS Modules e2e/react-start/css-modules/src/styles/global.css, e2e/solid-start/css-modules/src/styles/global.css, e2e/vue-start/css-modules/src/styles/global.css	Added .global-container:before pseudo-element rules with content declarations to test framework stylesheets
Dev Styles Regex Refactoring packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts	Reworked VITE_CSS_REGEX to use separate capturing groups for delimiter and CSS content; updated extractCssFromCode and error handling paths to reference new group indices (match[2] instead of match[1])

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix: properly handle sass in dev styles #6372: Modifies the same dev-styles.ts file with related CSS regex extraction and unescaping logic improvements

Suggested labels

package: start-plugin-core

Poem

🐰 Before pseudo-elements hop into view,
CSS groups capture what delimiters do,
Regex patterns refined with careful precision,
E2E tests verify each style decision! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.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 clearly and accurately summarizes the main change: updating CSS handling in dev-style collection to properly process quoted values.

_{✏️ 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 1c440c3 and 8b9d6bb.

📒 Files selected for processing (4)

• e2e/react-start/css-modules/src/styles/global.css
• e2e/solid-start/css-modules/src/styles/global.css
• e2e/vue-start/css-modules/src/styles/global.css
• packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts

🧰 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:

• packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts

**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

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

Files:

• packages/start-plugin-core/src/dev-server-plugin/dev-styles.ts

🧠 Learnings (1)

📓 Common learnings

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.

🪛 Biome (2.1.2)

e2e/vue-start/css-modules/src/styles/global.css

[error] 5-5: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

content is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

e2e/react-start/css-modules/src/styles/global.css

[error] 5-5: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

content is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

e2e/solid-start/css-modules/src/styles/global.css

[error] 5-5: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

content is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

🔇 Additional comments (5)

e2e/react-start/css-modules/src/styles/global.css (1)

3-6: Intentional duplication for testing quote handling – LGTM.

The duplicate content properties are intentional here to test that the updated regex in dev-styles.ts correctly handles both single-quoted and double-quoted CSS values. The Biome warning can be safely ignored since this is e2e test code specifically designed to exercise both quote variants. Based on learnings, e2e test directories have relaxed lint requirements.

e2e/vue-start/css-modules/src/styles/global.css (1)

3-6: Consistent with other framework e2e tests – LGTM.

Same intentional duplication pattern as the React e2e test to validate quote handling across frameworks. The Biome warning is expected and acceptable for this test scenario.

e2e/solid-start/css-modules/src/styles/global.css (1)

3-6: Completes cross-framework test coverage – LGTM.

Consistent with React and Vue e2e tests. The Biome duplicate property warning is acceptable for this test case.

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

23-24: Robust regex update for quoted string handling – LGTM.

The updated regex correctly handles CSS in quoted strings by:

1. Capturing the delimiter in group 1 (["'\]`)
2. Matching escaped characters (\\[\s\S]) or any character except the delimiter ((?!\1)[\s\S])
3. Using backreference \1 to match the closing quote

This properly handles edge cases like content: "it's \"quoted\"" and escaped backslashes.

---

252-261: Correct unescape sequence order – LGTM.

The addition of .replace(/\\\\/g, '\\') for backslash unescaping is placed correctly at the end of the replacement chain. This ensures that escape sequences like \\n are processed as newlines before the double-backslash to single-backslash conversion occurs.

---

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

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

[schiller-manuel]

thanks! closing in favor of #6383