Skip to content

feat(css): support ?inline query for CSS imports#810

Merged
sxzz merged 4 commits intomainfrom
sxzz/css-inline-query
Mar 7, 2026
Merged

feat(css): support ?inline query for CSS imports#810
sxzz merged 4 commits intomainfrom
sxzz/css-inline-query

Conversation

@sxzz
Copy link
Member

@sxzz sxzz commented Mar 7, 2026

Summary

Adds Vite-aligned ?inline support for CSS imports. import css from './foo.css?inline' returns the fully processed CSS as a JS string export instead of emitting a separate .css file.

  • Add resolveId/load hooks scoped to CSS ?inline (won't intercept non-CSS ?inline like foo.svg?inline)
  • Process inline CSS through the full pipeline (preprocessors, Lightning CSS, PostCSS, @import bundling, minification)
  • Return export default "..." with moduleSideEffects: false (tree-shakeable)
  • Fix getPreprocessorLang to use clean ID (without query) so SCSS/Less/Stylus compile correctly with ?inline
  • Allow ?inline CSS through @import bundling path (real files, not virtual)
  • Move CSS_LANGS_RE to shared utils
  • Add documentation (EN, zh-CN, skill reference)

Test plan

  • .css?inline — CSS inlined as JS string, no .css file emitted
  • .scss?inline — verifies SCSS is actually compiled ($color variable resolved)
  • Mixed: regular CSS import + ?inline coexist (regular → .css file, inline → JS string)
  • .css?raw with unplugin-raw still works
  • Vue SFC CSS (#800) still works
  • All 357 tests pass, typecheck clean, lint clean

Aligns with Vite's `?inline` behavior: `import css from './foo.css?inline'`
returns the fully processed CSS as a JS string export instead of emitting
a separate CSS file.

- Add `resolveId`/`load` hooks scoped to CSS `?inline` (won't intercept
  non-CSS `?inline` like `foo.svg?inline`)
- Process inline CSS through the full pipeline (preprocessors, Lightning CSS,
  PostCSS, @import bundling, minification)
- Return `export default "..."` with `moduleSideEffects: false` (tree-shakeable)
- Fix `getPreprocessorLang` to use clean ID (without query) so SCSS/Less/Stylus
  compile correctly with `?inline`
- Allow `?inline` CSS through `@import` bundling path (real files, not virtual)
- Move `CSS_LANGS_RE` to shared utils
@netlify
Copy link

netlify bot commented Mar 7, 2026

Deploy Preview for tsdown-main ready!

Name Link
🔨 Latest commit 4c3f932
🔍 Latest deploy log https://app.netlify.com/projects/tsdown-main/deploys/69ac8077dec4920008e91e25
😎 Deploy Preview https://deploy-preview-810--tsdown-main.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 7, 2026

Open in StackBlitz

tsdown

pnpm add https://pkg.pr.new/tsdown@810 -D
npm i https://pkg.pr.new/tsdown@810 -D
yarn add https://pkg.pr.new/tsdown@810.tgz -D

create-tsdown

pnpm add https://pkg.pr.new/create-tsdown@810 -D
npm i https://pkg.pr.new/create-tsdown@810 -D
yarn add https://pkg.pr.new/create-tsdown@810.tgz -D

@tsdown/css

pnpm add https://pkg.pr.new/@tsdown/css@810 -D
npm i https://pkg.pr.new/@tsdown/css@810 -D
yarn add https://pkg.pr.new/@tsdown/css@810.tgz -D

@tsdown/exe

pnpm add https://pkg.pr.new/@tsdown/exe@810 -D
npm i https://pkg.pr.new/@tsdown/exe@810 -D
yarn add https://pkg.pr.new/@tsdown/exe@810.tgz -D

tsdown-migrate

pnpm add https://pkg.pr.new/tsdown-migrate@810 -D
npm i https://pkg.pr.new/tsdown-migrate@810 -D
yarn add https://pkg.pr.new/tsdown-migrate@810.tgz -D

commit: 454739a

sxzz and others added 3 commits March 8, 2026 03:43
`RE_CSS_INLINE` now matches `foo.css?x=1&inline` in addition to
`foo.css?inline`, aligning with Vite's `[?&]inline` pattern.
@sxzz sxzz mentioned this pull request Mar 7, 2026
16 tasks
@sxzz sxzz merged commit b737941 into main Mar 7, 2026
15 checks passed
@sxzz sxzz deleted the sxzz/css-inline-query branch March 7, 2026 19:47
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