fix(styles/shop): remove '@theme inline' to silence lightningcss warning by sukvvon · Pull Request #1036 · TanStack/tanstack.com · GitHub

Summary

src/styles/shop.css is injected as a plain <link> stylesheet (imported with ?url in src/routes/shop.tsx), so it never passes through the Tailwind pipeline. Its @theme inline block therefore generated no utilities, but lightningcss tried to minify it and emitted Unknown at rule: @theme warnings during vite build (twice).

The @theme inline block here was pure duplication: the matching block already lives in app.css (which Tailwind does process), and that is what actually generates bg-shop-panel, text-shop-muted, font-shop-display, etc.

Changes

Remove the @theme inline block from shop.css.
Keep --color-shop-green and --color-shop-orange under :root, because the shop-pulse keyframes in this same file reference var(--color-shop-green).
Update the file header comment to reflect that this file is a plain stylesheet outside the Tailwind pipeline.

Verification

vite build: passes. The Unknown at rule: @theme warning (previously emitted twice) is now gone.
Verified on the deployment preview that /shop renders correctly: product grid, cards, hero gradient, and .shop-scope tokens all resolve, and --color-shop-green still resolves to #22c993 (so the shop-pulse animation color is unaffected).

Summary by CodeRabbit

Style
- Updated shop styling setup to better align theme colors and CSS variable handling.
- Clarified how the shop stylesheet is loaded in the app.

📝 Walkthrough

Walkthrough

The header comment and theming variable structure in src/styles/shop.css were updated. The stylesheet now documents itself as loaded directly via a plain link (bypassing Tailwind), and shop token color variables were moved from a Tailwind @theme inline block into a :root declaration.

Changes

Shop stylesheet variable wiring

Layer / File(s)	Summary
Token variable relocation and header update src/styles/shop.css	Shop token variables (e.g., green/orange colors) moved from a Tailwind @theme inline block to a :root declaration, and the header comment updated to describe direct <link>-based loading via ?url.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5 ✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: removing @theme inline from shop.css to устранить the lightningcss warning.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/shop-css-theme-warning

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

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	36437b6	Commit Preview URL Branch Preview URL	Jul 27 2026, 12:35 AM

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/styles/shop.css`:
- Line 15: The stylesheet import in the top-level font declaration is using the
wrapped URL form, which conflicts with the configured import notation. Update
the existing `@import` in shop.css to use the bare string form expected by
Stylelint, keeping the same Google Fonts URL and leaving the rest of the font
setup unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info ⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 95101058-63a3-463e-9757-a0df2fa93f6e

📥 Commits

Reviewing files that changed from the base of the PR and between 0b90bdb and 4cdbe6e.

📒 Files selected for processing (1)

src/styles/shop.css

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Use the configured import notation.

Stylelint expects the bare string form here, so this line will keep failing lint until the url(...) wrapper is removed.

Proposed fix

-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
+@import 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap';

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

      
            @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
          
            `@import` 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap';

🧰 Tools 🪛 Stylelint (17.14.0)

[error] 15-15: Expected "url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap')" to be "'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'" (import-notation)

(import-notation)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/shop.css` at line 15, The stylesheet import in the top-level font
declaration is using the wrapped URL form, which conflicts with the configured
import notation. Update the existing `@import` in shop.css to use the bare string
form expected by Stylelint, keeping the same Google Fonts URL and leaving the
rest of the font setup unchanged.

Source: Linters/SAST tools

fix(styles/shop): remove '@theme inline' to silence lightningcss warning

4cdbe6e

sukvvon self-assigned this Jul 8, 2026

sukvvon marked this pull request as ready for review July 8, 2026 00:46

sukvvon requested a review from a team July 8, 2026 00:46

coderabbitai Bot reviewed Jul 8, 2026

View reviewed changes

sukvvon added 2 commits July 8, 2026 12:20

Merge branch 'main' into fix/shop-css-theme-warning

2ed1a5f

Merge branch 'main' into fix/shop-css-theme-warning

36437b6

fix(styles/shop): remove '@theme inline' to silence lightningcss warning by sukvvon · Pull Request #1036 · TanStack/tanstack.com · GitHub

Uh oh!

Uh oh!

fix(styles/shop): remove '@theme inline' to silence lightningcss warning - #1036

fix(styles/shop): remove '@theme inline' to silence lightningcss warning#1036
sukvvon wants to merge 3 commits into
mainfrom
fix/shop-css-theme-warning

sukvvon commented Jul 8, 2026 •
edited by coderabbitai Bot
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 8, 2026 •
edited
Loading

Uh oh!

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 8, 2026 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
	`@import` 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap';

fix(styles/shop): remove '@theme inline' to silence lightningcss warning by sukvvon · Pull Request #1036 · TanStack/tanstack.com · GitHub

Uh oh!

Uh oh!

fix(styles/shop): remove '@theme inline' to silence lightningcss warning - #1036

fix(styles/shop): remove '@theme inline' to silence lightningcss warning#1036sukvvon wants to merge 3 commits intomainTanStack/tanstack.com:mainfrom fix/shop-css-theme-warningTanStack/tanstack.com:fix/shop-css-theme-warningCopy head branch name to clipboard

Conversation

sukvvon commented Jul 8, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Verification

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix(styles/shop): remove '@theme inline' to silence lightningcss warning#1036
sukvvon wants to merge 3 commits into
mainfrom
fix/shop-css-theme-warning

sukvvon commented Jul 8, 2026 •
edited by coderabbitai Bot
Loading

coderabbitai Bot commented Jul 8, 2026 •
edited
Loading

cloudflare-workers-and-pages Bot commented Jul 8, 2026 •
edited
Loading