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 2 commits into
Conversation
📝 WalkthroughWalkthroughThe 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 ChangesShop stylesheet variable wiring
Estimated code review effort: 1 (Trivial) | ~5 minutes Estimated code review effort: 1 (Trivial) | ~5 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tanstack-com | 2ed1a5f | Commit Preview URL Branch Preview URL |
Jul 08 2026, 03:22 AM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
| * selectors, no global leakage. | ||
| */ | ||
|
|
||
| @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'); |
There was a problem hiding this comment.
📐 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.
| @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
1 participant
Summary
src/styles/shop.cssis injected as a plain<link>stylesheet (imported with?urlinsrc/routes/shop.tsx), so it never passes through the Tailwind pipeline. Its@theme inlineblock therefore generated no utilities, but lightningcss tried to minify it and emittedUnknown at rule: @themewarnings duringvite build(twice).The
@theme inlineblock here was pure duplication: the matching block already lives inapp.css(which Tailwind does process), and that is what actually generatesbg-shop-panel,text-shop-muted,font-shop-display, etc.Changes
@theme inlineblock fromshop.css.--color-shop-greenand--color-shop-orangeunder:root, because theshop-pulsekeyframes in this same file referencevar(--color-shop-green).Verification
vite build: passes. TheUnknown at rule: @themewarning (previously emitted twice) is now gone./shoprenders correctly: product grid, cards, hero gradient, and.shop-scopetokens all resolve, and--color-shop-greenstill resolves to#22c993(so theshop-pulseanimation color is unaffected).Summary by CodeRabbit