Skip to content

Commit 1b1a172

Browse files
sxzzautofix-ci[bot]
sxzz
and
autofix-ci[bot]
authored
feat(css)!: move all CSS support to @tsdown/css package (#809)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent ad74582 commit 1b1a172

35 files changed

+522
-559
lines changed

‎CLAUDE.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,6 @@ Each feature is self-contained and modular:
156156

157157
**Advanced Features:**
158158

159-
- `css/` - CSS handling with Lightning CSS integration
160159
- `pkg/exports.ts` - Auto-generate package.json exports field
161160
- `pkg/publint.ts` - Package linting
162161
- `pkg/attw.ts` - "Are the types wrong" integration
@@ -176,7 +175,7 @@ Public plugin exports in `src/plugins.ts`: `DepPlugin`, `NodeProtocolPlugin`, `R
176175

177176
2. **Package-aware building:** Detects package.json, auto-generates exports field, validates bundled dependencies, runs package linters
178177

179-
3. **Lazy feature loading:** Optional peer dependencies loaded on-demand (unplugin-unused, unplugin-lightningcss, etc.)
178+
3. **Lazy feature loading:** Optional peer dependencies loaded on-demand (`@tsdown/css`, unplugin-unused, etc.)
180179

181180
4. **Watch mode coordination:** Config file changes trigger full rebuild restart; file changes tracked per bundle; keyboard shortcuts for manual rebuild/exit
182181

‎docs/options/css.md‎

Lines changed: 15 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,19 @@ CSS support in `tsdown` is still an experimental feature. While it covers the co
55
> [!WARNING] Experimental Feature
66
> CSS support is experimental. Please test thoroughly and report any issues you encounter. The API and behavior may change as the feature matures.
77
8-
## Basic vs Advanced CSS
8+
## Getting Started
99

10-
`tsdown` provides two levels of CSS support:
11-
12-
- **Built-in (basic):** CSS file extraction and bundling works out of the box — no extra dependencies needed.
13-
- **Advanced (`@tsdown/css`):** Preprocessors (Sass/Less/Stylus), CSS syntax lowering, minification, and `@import` inlining require the `@tsdown/css` package:
10+
All CSS support in `tsdown` is provided by the `@tsdown/css` package. Install it to enable CSS handling:
1411

1512
```bash
1613
npm install -D @tsdown/css
1714
```
1815

19-
When `@tsdown/css` is installed, the advanced CSS plugin is automatically used in place of the built-in one.
16+
When `@tsdown/css` is installed, CSS processing is automatically enabled.
2017

2118
## CSS Import
2219

23-
Importing `.css` files from your TypeScript or JavaScript entry points is supported out of the box. The CSS content is extracted and emitted as a separate `.css` asset file:
20+
Importing `.css` files from your TypeScript or JavaScript entry points is supported. The CSS content is extracted and emitted as a separate `.css` asset file:
2421

2522
```ts
2623
// src/index.ts
@@ -35,7 +32,7 @@ This produces both `index.mjs` and `index.css` in the output directory.
3532

3633
### `@import` Inlining
3734

38-
When `@tsdown/css` is installed, CSS `@import` statements are automatically resolved and inlined into the output. This means you can use `@import` to organize your CSS across multiple files without producing separate output files:
35+
CSS `@import` statements are automatically resolved and inlined into the output. This means you can use `@import` to organize your CSS across multiple files without producing separate output files:
3936

4037
```css
4138
/* style.css */
@@ -51,9 +48,6 @@ All imported CSS is bundled into a single output file with `@import` statements
5148

5249
## CSS Pre-processors
5350

54-
> [!NOTE]
55-
> Requires `@tsdown/css` to be installed.
56-
5751
`tsdown` provides built-in support for `.scss`, `.sass`, `.less`, `.styl`, and `.stylus` files. The corresponding pre-processor must be installed as a dev dependency:
5852

5953
::: code-group
@@ -138,9 +132,6 @@ export default defineConfig({
138132

139133
## CSS Minification
140134

141-
> [!NOTE]
142-
> Requires `@tsdown/css` to be installed.
143-
144135
Enable CSS minification via `css.minify`:
145136

146137
```ts
@@ -155,9 +146,6 @@ Minification is powered by [Lightning CSS](https://lightningcss.dev/).
155146

156147
## CSS Target
157148

158-
> [!NOTE]
159-
> Requires `@tsdown/css` to be installed.
160-
161149
By default, CSS syntax lowering uses the top-level [`target`](/options/target) option. You can override this specifically for CSS with `css.target`:
162150

163151
```ts
@@ -182,9 +170,6 @@ export default defineConfig({
182170

183171
## CSS Transformer
184172

185-
> [!NOTE]
186-
> Requires `@tsdown/css` to be installed.
187-
188173
The `css.transformer` option controls how CSS is processed. PostCSS and Lightning CSS are **mutually exclusive** processing paths:
189174

190175
- **`'lightningcss'`** (default): `@import` is resolved by Lightning CSS's `bundleAsync()`, and PostCSS is **not used at all**.
@@ -234,9 +219,6 @@ When `css.postcss` is omitted and `transformer` is `'postcss'`, tsdown auto-dete
234219

235220
## Lightning CSS
236221

237-
> [!NOTE]
238-
> Requires `@tsdown/css` to be installed.
239-
240222
`tsdown` uses [Lightning CSS](https://lightningcss.dev/) for CSS syntax lowering — transforming modern CSS features into syntax compatible with older browsers based on your `target` setting.
241223

242224
To enable CSS syntax lowering, install `lightningcss`:
@@ -347,13 +329,13 @@ dist/
347329

348330
## Options Reference
349331

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`) |
332+
| Option | Type | Default | Description |
333+
| ------------------------- | ----------------------------- | ---------------- | ----------------------------------------------------------- |
334+
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'lightningcss'` | CSS processing pipeline |
335+
| `css.splitting` | `boolean` | `false` | Enable CSS code splitting per chunk |
336+
| `css.fileName` | `string` | `'style.css'` | File name for the merged CSS file (when `splitting: false`) |
337+
| `css.minify` | `boolean` | `false` | Enable CSS minification |
338+
| `css.target` | `string \| string[] \| false` | _from `target`_ | CSS-specific syntax lowering target |
339+
| `css.postcss` | `string \| object` | — | PostCSS config path or inline options |
340+
| `css.preprocessorOptions` | `object` | — | Options for CSS preprocessors |
341+
| `css.lightningcss` | `object` | — | Options passed to Lightning CSS for syntax lowering |

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

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,15 @@
55
> [!WARNING] 实验性功能
66
> CSS 支持属于实验性特性。请务必充分测试，并反馈您遇到的任何问题。随着功能的完善，API 和行为可能会有所调整。
77
8-
## 基础与高级 CSS
8+
## 快速开始
99

10-
`tsdown` 提供两个层级的 CSS 支持：
11-
12-
- **内置（基础）：** CSS 文件提取和打包开箱即用，无需额外依赖。
13-
- **高级（`@tsdown/css`）：** 预处理器（Sass/Less/Stylus）、CSS 语法降级、压缩和 `@import` 内联需要安装 `@tsdown/css` 包：
10+
`tsdown` 的所有 CSS 功能由 `@tsdown/css` 包提供。安装后即可启用 CSS 处理：
1411

1512
```bash
1613
npm install -D @tsdown/css
1714
```
1815

19-
安装 `@tsdown/css` 后，高级 CSS 插件会自动替代内置的基础插件。
16+
安装 `@tsdown/css` 后，CSS 处理会自动启用。
2017

2118
## CSS 导入
2219

@@ -51,9 +48,6 @@ export function greet() {
5148

5249
## CSS 预处理器
5350

54-
> [!NOTE]
55-
> 需要安装 `@tsdown/css`。
56-
5751
`tsdown` 内置支持 `.scss`、`.sass`、`.less`、`.styl` 和 `.stylus` 文件。需要安装对应的预处理器作为开发依赖：
5852

5953
::: code-group
@@ -138,9 +132,6 @@ export default defineConfig({
138132

139133
## CSS 压缩
140134

141-
> [!NOTE]
142-
> 需要安装 `@tsdown/css`。
143-
144135
通过 `css.minify` 启用 CSS 压缩：
145136

146137
```ts
@@ -155,9 +146,6 @@ export default defineConfig({
155146

156147
## CSS 目标
157148

158-
> [!NOTE]
159-
> 需要安装 `@tsdown/css`。
160-
161149
默认情况下，CSS 语法降级使用顶层的 [`target`](/zh-CN/options/target) 选项。你可以通过 `css.target` 单独为 CSS 设置目标：
162150

163151
```ts
@@ -182,9 +170,6 @@ export default defineConfig({
182170

183171
## CSS 转换器
184172

185-
> [!NOTE]
186-
> 需要安装 `@tsdown/css`。
187-
188173
`css.transformer` 选项控制 CSS 的处理方式。PostCSS 和 Lightning CSS 是**互斥的**处理路径：
189174

190175
- **`'lightningcss'`**（默认）：`@import` 由 Lightning CSS 的 `bundleAsync()` 解析，**完全不使用** PostCSS。
@@ -234,9 +219,6 @@ export default defineConfig({
234219

235220
## Lightning CSS
236221

237-
> [!NOTE]
238-
> 需要安装 `@tsdown/css`。
239-
240222
`tsdown` 使用 [Lightning CSS](https://lightningcss.dev/) 进行 CSS 语法降级——根据 `target` 设置将现代 CSS 特性转换为兼容旧版浏览器的语法。
241223

242224
要启用 CSS 语法降级，需安装 `lightningcss`：
@@ -347,13 +329,13 @@ dist/
347329

348330
## 选项参考
349331

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`） |
332+
| 选项 | 类型 | 默认值 | 描述 |
333+
| ------------------------- | ----------------------------- | ---------------- | --------------------------------------------- |
334+
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'lightningcss'` | CSS 处理管线 |
335+
| `css.splitting` | `boolean` | `false` | 启用按 chunk 的 CSS 代码分割 |
336+
| `css.fileName` | `string` | `'style.css'` | 合并 CSS 的文件名（当 `splitting: false` 时） |
337+
| `css.minify` | `boolean` | `false` | 启用 CSS 压缩 |
338+
| `css.target` | `string \| string[] \| false` | _继承 `target`_ | CSS 专用语法降级目标 |
339+
| `css.postcss` | `string \| object` | — | PostCSS 配置路径或内联选项 |
340+
| `css.preprocessorOptions` | `object` | — | CSS 预处理器选项 |
341+
| `css.lightningcss` | `object` | — | 传递给 Lightning CSS 的语法降级选项 |

0 commit comments

Comments
 (0)