Skip to content

Fix @import order in tokens.css to stop invalid CSS after bundling - #10

Merged
StanBarrows merged 1 commit into
mainfrom
fix/tokens-import-order
Aug 3, 2026
Merged

Fix @import order in tokens.css to stop invalid CSS after bundling#10
StanBarrows merged 1 commit into
mainfrom
fix/tokens-import-order

Conversation

@StanBarrows

Copy link
Copy Markdown
Contributor

Summary

  • Google Fonts (Open Sans) @import in src/tokens.css was listed after the local @fontsource/jetbrains-mono @imports
  • Consumers' bundlers (Vite/lightningcss) inline the local imports as real CSS content in place, but leave the remote import literal — after bundling, the remote @import ended up after real rules, which is invalid per spec ("@import rules must precede all rules")
  • Every consuming app (e.g. flows-portal.docuhub) saw a CSS optimizer warning on every production build
  • Fix: move the Open Sans @import above the @fontsource imports so it stays first regardless of what the bundler inlines

Test plan

  • npm run build in this repo succeeds, dist/tokens.css reflects the new order
  • Verified in a consuming app (flows-portal.docuhub, npm run build): the "@import rules must precede all rules" warning is gone

🤖 Generated with Claude Code

Consumers' bundlers (Vite/lightningcss) inline the local @fontsource
@import rules as real CSS content in place, but leave the remote Google
Fonts @import literal. With the Google Fonts import listed after the
@fontsource ones, it ended up after real rules post-bundle, which is
invalid per spec ("@import rules must precede all rules") and surfaced
as a build warning in every consuming app.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@StanBarrows
StanBarrows merged commit cc81501 into main Aug 3, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant