CSS Support #472
Description
Rolldown recently removed its built-in CSS support, so we'll be implementing our own. The first step is to replicate Vite's CSS implementation in JavaScript.
Docs: https://main.tsdown.dev/options/css
Track rolldown/rolldown#4271
Current Status
- CSS extraction/bundling (
css.fileName) - CSS Code Splitting (
css.splitting) - CSS Minification (
css.minify) — feat(css): extract CSS pipeline into@tsdown/csspackage #790 - CSS Syntax Lowering (
css.target) — feat(css): extract CSS pipeline into@tsdown/csspackage #790 - Preprocessors: Sass/Less/Stylus (
css.preprocessorOptions) — feat(css): extract CSS pipeline into@tsdown/csspackage #790 -
@importinlining — feat(css): extract CSS pipeline into@tsdown/csspackage #790 - Lightning CSS passthrough (
css.lightningcss) — feat(css): extract CSS pipeline into@tsdown/csspackage #790 - Pure CSS chunk removal
- PostCSS support (
css.postcss) — feat(css): add PostCSS support withcss.transformeroption #791 -
css.transformerselection ('postcss'|'lightningcss') — feat(css): add PostCSS support withcss.transformeroption #791 - CSS inject (
css.inject) — feat(css): addcss.injectoption to preserve CSS imports in JS output #808 - CSS Modules (
css.modules) - CSS
url()asset resolution - Preprocessor worker pool (
css.preprocessorMaxWorkers) - CSS
?inlinequery — feat(css): support?inlinequery for CSS imports #810 - CSS
?urlquery
Pinned by sxzz
Updated status after #808, #809, #810:
tsdown CSS vs Vite Lib Mode CSS Feature Comparison
All CSS support has been moved to the
@tsdown/csspackage (#809).
Implemented
| Feature | tsdown | Vite Lib Mode | Notes |
|---|---|---|---|
| CSS extraction/bundling | css.fileName |
build.lib.cssFileName |
tsdown defaults to style.css
|
| CSS Code Splitting | css.splitting |
build.cssCodeSplit |
Both default to off in lib mode |
| CSS Minification | css.minify |
build.cssMinify |
tsdown: Lightning CSS only; Vite: esbuild/lightningcss |
| CSS Syntax Lowering | css.target |
build.cssTarget |
Both use esbuild target format |
| Preprocessors (Sass/Less/Stylus) | css.preprocessorOptions |
css.preprocessorOptions |
Aligned, including additionalData
|
@import inl… |