Skip to content

Commit 288a5f0

Browse files
sxzzautofix-ci[bot]
sxzz
and
autofix-ci[bot]
authored
feat(css): default css.transformer to lightningcss (#797)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 13e67d2 commit 288a5f0

49 files changed

Lines changed: 392 additions & 156 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/options/css.md‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -187,18 +187,18 @@ export default defineConfig({
187187
188188
The `css.transformer` option controls how CSS is processed. PostCSS and Lightning CSS are **mutually exclusive** processing paths:
189189

190-
- **`'postcss'`** (default): `@import` is resolved by [`postcss-import`](https://github.com/postcss/postcss-import), PostCSS plugins are applied, then Lightning CSS is used only for final syntax lowering and minification.
191-
- **`'lightningcss'`**: `@import` is resolved by Lightning CSS's `bundleAsync()`, and PostCSS is **not used at all**.
190+
- **`'lightningcss'`** (default): `@import` is resolved by Lightning CSS's `bundleAsync()`, and PostCSS is **not used at all**.
191+
- **`'postcss'`**: `@import` is resolved by [`postcss-import`](https://github.com/postcss/postcss-import), PostCSS plugins are applied, then Lightning CSS is used only for final syntax lowering and minification.
192192

193193
```ts
194194
export default defineConfig({
195195
css: {
196-
transformer: 'lightningcss', // Use Lightning CSS for everything
196+
transformer: 'postcss', // Use PostCSS for @import and plugins
197197
},
198198
})
199199
```
200200

201-
When using the default `'postcss'` transformer, install `postcss` and optionally `postcss-import` for `@import` resolution:
201+
When using the `'postcss'` transformer, install `postcss` and optionally `postcss-import` for `@import` resolution:
202202

203203
```bash
204204
npm install -D postcss postcss-import
@@ -211,6 +211,7 @@ Configure PostCSS inline or point to a config file:
211211
```ts
212212
export default defineConfig({
213213
css: {
214+
transformer: 'postcss',
214215
postcss: {
215216
plugins: [require('autoprefixer')],
216217
},
@@ -223,12 +224,13 @@ Or specify a directory path to search for a PostCSS config file (`postcss.config
223224
```ts
224225
export default defineConfig({
225226
css: {
227+
transformer: 'postcss',
226228
postcss: './config', // Search for postcss.config.js in ./config/
227229
},
228230
})
229231
```
230232

231-
When `css.postcss` is omitted, tsdown auto-detects PostCSS config from the project root.
233+
When `css.postcss` is omitted and `transformer` is `'postcss'`, tsdown auto-detects PostCSS config from the project root.
232234

233235
## Lightning CSS
234236

@@ -345,13 +347,13 @@ dist/
345347

346348
## Options Reference
347349

348-
| Option | Type | Default | Description |
349-
| ------------------------- | ----------------------------- | --------------- | ---------------------------------------------------------------------------- |
350-
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'postcss'` | CSS processing pipeline (requires `@tsdown/css`) |
351-
| `css.splitting` | `boolean` | `false` | Enable CSS code splitting per chunk |
352-
| `css.fileName` | `string` | `'style.css'` | File name for the merged CSS file (when `splitting: false`) |
353-
| `css.minify` | `boolean` | `false` | Enable CSS minification (requires `@tsdown/css`) |
354-
| `css.target` | `string \| string[] \| false` | _from `target`_ | CSS-specific syntax lowering target (requires `@tsdown/css`) |
355-
| `css.postcss` | `string \| object` | — | PostCSS config path or inline options (requires `@tsdown/css`) |
356-
| `css.preprocessorOptions` | `object` | — | Options for CSS preprocessors (requires `@tsdown/css`) |
357-
| `css.lightningcss` | `object` | — | Options passed to Lightning CSS for syntax lowering (requires `@tsdown/css`) |
350+
| Option | Type | Default | Description |
351+
| ------------------------- | ----------------------------- | ---------------- | ---------------------------------------------------------------------------- |
352+
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'lightningcss'` | CSS processing pipeline (requires `@tsdown/css`) |
353+
| `css.splitting` | `boolean` | `false` | Enable CSS code splitting per chunk |
354+
| `css.fileName` | `string` | `'style.css'` | File name for the merged CSS file (when `splitting: false`) |
355+
| `css.minify` | `boolean` | `false` | Enable CSS minification (requires `@tsdown/css`) |
356+
| `css.target` | `string \| string[] \| false` | _from `target`_ | CSS-specific syntax lowering target (requires `@tsdown/css`) |
357+
| `css.postcss` | `string \| object` | — | PostCSS config path or inline options (requires `@tsdown/css`) |
358+
| `css.preprocessorOptions` | `object` | — | Options for CSS preprocessors (requires `@tsdown/css`) |
359+
| `css.lightningcss` | `object` | — | Options passed to Lightning CSS for syntax lowering (requires `@tsdown/css`) |

‎docs/zh-CN/options/css.md‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -187,18 +187,18 @@ export default defineConfig({
187187
188188
`css.transformer` 选项控制 CSS 的处理方式。PostCSS 和 Lightning CSS 是**互斥的**处理路径：
189189

190-
- **`'postcss'`**（默认）：`@import` 由 [`postcss-import`](https://github.com/postcss/postcss-import) 解析，PostCSS 插件被应用，然后 Lightning CSS 仅用于最终的语法降级和压缩。
191-
- **`'lightningcss'`**：`@import` 由 Lightning CSS 的 `bundleAsync()` 解析，**完全不使用** PostCSS。
190+
- **`'lightningcss'`**（默认）：`@import` 由 Lightning CSS 的 `bundleAsync()` 解析，**完全不使用** PostCSS。
191+
- **`'postcss'`**：`@import` 由 [`postcss-import`](https://github.com/postcss/postcss-import) 解析，PostCSS 插件被应用，然后 Lightning CSS 仅用于最终的语法降级和压缩。
192192

193193
```ts
194194
export default defineConfig({
195195
css: {
196-
transformer: 'lightningcss', // 使用 Lightning CSS 处理所有内容
196+
transformer: 'postcss', // 使用 PostCSS 处理 @import 和插件
197197
},
198198
})
199199
```
200200

201-
使用默认的 `'postcss'` 转换器时，需安装 `postcss` 和可选的 `postcss-import` 用于 `@import` 解析：
201+
使用 `'postcss'` 转换器时，需安装 `postcss` 和可选的 `postcss-import` 用于 `@import` 解析：
202202

203203
```bash
204204
npm install -D postcss postcss-import
@@ -211,6 +211,7 @@ npm install -D postcss postcss-import
211211
```ts
212212
export default defineConfig({
213213
css: {
214+
transformer: 'postcss',
214215
postcss: {
215216
plugins: [require('autoprefixer')],
216217
},
@@ -223,12 +224,13 @@ export default defineConfig({
223224
```ts
224225
export default defineConfig({
225226
css: {
227+
transformer: 'postcss',
226228
postcss: './config', // 在 ./config/ 中搜索 postcss.config.js
227229
},
228230
})
229231
```
230232

231-
未设置 `css.postcss` 时，tsdown 会自动从项目根目录检测 PostCSS 配置。
233+
未设置 `css.postcss` 且 `transformer` 为 `'postcss'` 时，tsdown 会自动从项目根目录检测 PostCSS 配置。
232234

233235
## Lightning CSS
234236

@@ -345,13 +347,13 @@ dist/
345347

346348
## 选项参考
347349

348-
| 选项 | 类型 | 默认值 | 描述 |
349-
| ------------------------- | ----------------------------- | --------------- | --------------------------------------------------------- |
350-
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'postcss'` | CSS 处理管线（需要 `@tsdown/css`） |
351-
| `css.splitting` | `boolean` | `false` | 启用按 chunk 的 CSS 代码分割 |
352-
| `css.fileName` | `string` | `'style.css'` | 合并 CSS 的文件名（当 `splitting: false` 时） |
353-
| `css.minify` | `boolean` | `false` | 启用 CSS 压缩（需要 `@tsdown/css`） |
354-
| `css.target` | `string \| string[] \| false` | _继承 `target`_ | CSS 专用语法降级目标（需要 `@tsdown/css`） |
355-
| `css.postcss` | `string \| object` | — | PostCSS 配置路径或内联选项（需要 `@tsdown/css`） |
356-
| `css.preprocessorOptions` | `object` | — | CSS 预处理器选项（需要 `@tsdown/css`） |
357-
| `css.lightningcss` | `object` | — | 传递给 Lightning CSS 的语法降级选项（需要 `@tsdown/css`） |
350+
| 选项 | 类型 | 默认值 | 描述 |
351+
| ------------------------- | ----------------------------- | ---------------- | --------------------------------------------------------- |
352+
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'lightningcss'` | CSS 处理管线（需要 `@tsdown/css`） |
353+
| `css.splitting` | `boolean` | `false` | 启用按 chunk 的 CSS 代码分割 |
354+
| `css.fileName` | `string` | `'style.css'` | 合并 CSS 的文件名（当 `splitting: false` 时） |
355+
| `css.minify` | `boolean` | `false` | 启用 CSS 压缩（需要 `@tsdown/css`） |
356+
| `css.target` | `string \| string[] \| false` | _继承 `target`_ | CSS 专用语法降级目标（需要 `@tsdown/css`） |
357+
| `css.postcss` | `string \| object` | — | PostCSS 配置路径或内联选项（需要 `@tsdown/css`） |
358+
| `css.preprocessorOptions` | `object` | — | CSS 预处理器选项（需要 `@tsdown/css`） |
359+
| `css.lightningcss` | `object` | — | 传递给 Lightning CSS 的语法降级选项（需要 `@tsdown/css`） |

‎skills/tsdown/references/option-css.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -125,13 +125,13 @@ Set `css.target: false` to disable CSS syntax lowering entirely.
125125

126126
`css.transformer` controls mutually exclusive CSS processing paths:
127127

128-
- `'postcss'` (default): `@import` via `postcss-import`, PostCSS plugins applied, Lightning CSS for final transform only.
129-
- `'lightningcss'`: `@import` via Lightning CSS `bundleAsync()`, no PostCSS.
128+
- `'lightningcss'` (default): `@import` via Lightning CSS `bundleAsync()`, no PostCSS.
129+
- `'postcss'`: `@import` via `postcss-import`, PostCSS plugins applied, Lightning CSS for final transform only.
130130

131131
```ts
132132
export default defineConfig({
133133
css: {
134-
transformer: 'lightningcss',
134+
transformer: 'postcss',
135135
},
136136
})
137137
```
@@ -141,6 +141,7 @@ export default defineConfig({
141141
```ts
142142
export default defineConfig({
143143
css: {
144+
transformer: 'postcss',
144145
postcss: {
145146
plugins: [require('autoprefixer')],
146147
},
@@ -149,7 +150,7 @@ export default defineConfig({
149150
})
150151
```
151152

152-
Auto-detects PostCSS config from project root when omitted.
153+
Auto-detects PostCSS config from project root when `transformer` is `'postcss'` and `css.postcss` is omitted.
153154

154155
## Lightning CSS (Syntax Lowering, requires `@tsdown/css`)
155156

@@ -214,7 +215,7 @@ export default defineConfig({
214215

215216
| Option | Type | Default | Description |
216217
|--------|------|---------|-------------|
217-
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'postcss'` | CSS processing pipeline (requires `@tsdown/css`) |
218+
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'lightningcss'` | CSS processing pipeline (requires `@tsdown/css`) |
218219
| `css.splitting` | `boolean` | `false` | Per-chunk CSS splitting |
219220
| `css.fileName` | `string` | `'style.css'` | Merged CSS file name |
220221
| `css.minify` | `boolean` | `false` | CSS minification (requires `@tsdown/css`) |

‎src/features/css/index.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export interface CssOptions {
5959
* - `object`: Inline PostCSS options with optional `plugins` array.
6060
* - Omitted: Auto-detect PostCSS config from the project root.
6161
*
62-
* Only used when `transformer` is `'postcss'` (default).
62+
* Only used when `transformer` is `'postcss'`.
6363
* Requires `postcss` and `@tsdown/css` to be installed.
6464
*
6565
* @see https://github.com/postcss/postcss
@@ -69,15 +69,15 @@ export interface CssOptions {
6969
/**
7070
* CSS transformer to use. Controls how CSS is processed:
7171
*
72-
* - `'postcss'` (default): `@import` handled by `postcss-import`,
72+
* - `'lightningcss'` (default): `@import` handled by Lightning CSS
73+
* `bundleAsync()`, PostCSS is **not** used at all.
74+
* - `'postcss'`: `@import` handled by `postcss-import`,
7375
* PostCSS plugins applied, Lightning CSS used only for final
7476
* targets/minify transform.
75-
* - `'lightningcss'`: `@import` handled by Lightning CSS `bundleAsync()`,
76-
* PostCSS is **not** used at all.
7777
*
7878
* Requires `@tsdown/css` to be installed.
7979
*
80-
* @default 'postcss'
80+
* @default 'lightningcss'
8181
* @see https://vite.dev/config/shared-options#css-transformer
8282
*/
8383
transformer?: 'postcss' | 'lightningcss'
@@ -157,7 +157,7 @@ export function resolveCssOptions(
157157
}
158158

159159
return {
160-
transformer: options.transformer ?? 'postcss',
160+
transformer: options.transformer ?? 'lightningcss',
161161
splitting: options.splitting ?? false,
162162
fileName: options.fileName ?? defaultCssBundleName,
163163
minify: options.minify ?? false,

‎tests/__snapshots__/case-insensitivity/IMPORT-and-LAYER-are-case-insensitive.snap.md‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
## entry.css
22

33
```css
4-
@IMPORT Url("nested.css") LAYER(layer-name);
4+
@layer layer-name {
5+
@keyframes Foo {
6+
from {
7+
opacity: 0;
8+
}
9+
10+
to {
11+
opacity: 1;
12+
}
13+
}
14+
15+
body {
16+
background-color: red;
17+
}
18+
}
519

620
```
721

‎tests/__snapshots__/code-splitting/CSS-and-JS-code-splitting-with-shared-modules.snap.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,13 @@ export { };
2525
## c.css
2626

2727
```css
28+
body {
29+
background: #000;
30+
}
2831

29-
body { background: black }
30-
body { color: red }
31-
32+
body {
33+
color: red;
34+
}
3235

3336
```
3437

@@ -41,10 +44,13 @@ export { };
4144
## d.css
4245

4346
```css
47+
body {
48+
background: #000;
49+
}
4450

45-
body { background: black }
46-
body { color: blue }
47-
51+
body {
52+
color: #00f;
53+
}
4854

4955
```
5056

‎tests/__snapshots__/css-entry-point/css-file-as-sole-entry.snap.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
## entry.css
22

33
```css
4-
5-
body {
6-
background: white;
7-
color: black;
8-
}
9-
4+
body {
5+
color: #000;
6+
background: #fff;
7+
}
108

119
```
1210

‎tests/__snapshots__/css-entry-point/multiple-CSS-entry-points.snap.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
## a.css
22

33
```css
4-
.a { color: red }
4+
.a {
5+
color: red;
6+
}
57

68
```
79

@@ -14,7 +16,9 @@ export { };
1416
## b.css
1517

1618
```css
17-
.b { color: blue }
19+
.b {
20+
color: #00f;
21+
}
1822

1923
```
2024

‎tests/__snapshots__/css-from-js/js-entry-imports-css-with-other-code.snap.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export { foo };
1111
## style.css
1212

1313
```css
14-
.foo { color: blue }
14+
.foo {
15+
color: #00f;
16+
}
1517

1618
```

‎tests/__snapshots__/css-from-js/js-entry-imports-css.snap.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ export { };
77
## style.css
88

99
```css
10-
.entry { color: red }
10+
.entry {
11+
color: red;
12+
}
1113

1214
```

0 commit comments

Comments
 (0)