Reproduction link or steps
https://github.com/dadajam4/tsdown-css-order-repro
Two entries sharing one module that imports CSS:
// src/base.ts
import './base.css' // .button-reset { padding: 0 }
export const buttonReset = 'button-reset'
// src/index.ts
import { buttonReset } from './base'
import './index.css' // .nav-item { padding: 12px }
export const navItem = `${buttonReset} nav-item`
// src/other.ts
export { buttonReset } from './base'
// tsdown.config.ts
export default defineConfig({
entry: ['src/index.ts', 'src/other.ts'],
})
Run npx tsdown with tsdown 0.23.0 and the default css options (splitting: false).
What is expected?
index.ts imports base before its own stylesheet, so base.css should come first in dist/style.css:
.button-reset {
padding: 0;
}
.nav-item {
padding: 12px;
}
That is also what Vite 8 gives for the same sources with build.lib and cssCodeSplit: false.
What is actually happening?
.nav-item {
padding: 12px;
}
.button-reset {
padding: 0;
}
So an element with both classes gets . Since is shared by the two entries it goes into its own chunk (), and that chunk's CSS is appended after the entry chunk's. With only one entry the order is correct.