Skip to content
Merged
3 changes: 1 addition & 2 deletions CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,6 @@ Each feature is self-contained and modular:

**Advanced Features:**

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

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

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

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

Expand Down
48 changes: 15 additions & 33 deletions docs/options/css.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,19 @@ CSS support in `tsdown` is still an experimental feature. While it covers the co
> [!WARNING] Experimental Feature
> CSS support is experimental. Please test thoroughly and report any issues you encounter. The API and behavior may change as the feature matures.

## Basic vs Advanced CSS
## Getting Started

`tsdown` provides two levels of CSS support:

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

```bash
npm install -D @tsdown/css
```

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

## CSS Import

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:
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:

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

### `@import` Inlining

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:
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:

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

## CSS Pre-processors

> [!NOTE]
> Requires `@tsdown/css` to be installed.

`tsdown` provides built-in support for `.scss`, `.sass`, `.less`, `.styl`, and `.stylus` files. The corresponding pre-processor must be installed as a dev dependency:

::: code-group
Expand Down Expand Up @@ -138,9 +132,6 @@ export default defineConfig({

## CSS Minification

> [!NOTE]
> Requires `@tsdown/css` to be installed.

Enable CSS minification via `css.minify`:

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

## CSS Target

> [!NOTE]
> Requires `@tsdown/css` to be installed.

By default, CSS syntax lowering uses the top-level [`target`](/options/target) option. You can override this specifically for CSS with `css.target`:

```ts
Expand All @@ -182,9 +170,6 @@ export default defineConfig({

## CSS Transformer

> [!NOTE]
> Requires `@tsdown/css` to be installed.

The `css.transformer` option controls how CSS is processed. PostCSS and Lightning CSS are **mutually exclusive** processing paths:

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

## Lightning CSS

> [!NOTE]
> Requires `@tsdown/css` to be installed.

`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.

To enable CSS syntax lowering, install `lightningcss`:
Expand Down Expand Up @@ -347,13 +329,13 @@ dist/

## Options Reference

| Option | Type | Default | Description |
| ------------------------- | ----------------------------- | ---------------- | ---------------------------------------------------------------------------- |
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'lightningcss'` | CSS processing pipeline (requires `@tsdown/css`) |
| `css.splitting` | `boolean` | `false` | Enable CSS code splitting per chunk |
| `css.fileName` | `string` | `'style.css'` | File name for the merged CSS file (when `splitting: false`) |
| `css.minify` | `boolean` | `false` | Enable CSS minification (requires `@tsdown/css`) |
| `css.target` | `string \| string[] \| false` | _from `target`_ | CSS-specific syntax lowering target (requires `@tsdown/css`) |
| `css.postcss` | `string \| object` | — | PostCSS config path or inline options (requires `@tsdown/css`) |
| `css.preprocessorOptions` | `object` | — | Options for CSS preprocessors (requires `@tsdown/css`) |
| `css.lightningcss` | `object` | — | Options passed to Lightning CSS for syntax lowering (requires `@tsdown/css`) |
| Option | Type | Default | Description |
| ------------------------- | ----------------------------- | ---------------- | ----------------------------------------------------------- |
| `css.transformer` | `'postcss' \| 'lightningcss'` | `'lightningcss'` | CSS processing pipeline |
| `css.splitting` | `boolean` | `false` | Enable CSS code splitting per chunk |
| `css.fileName` | `string` | `'style.css'` | File name for the merged CSS file (when `splitting: false`) |
| `css.minify` | `boolean` | `false` | Enable CSS minification |
| `css.target` | `string \| string[] \| false` | _from `target`_ | CSS-specific syntax lowering target |
| `css.postcss` | `string \| object` | — | PostCSS config path or inline options |
| `css.preprocessorOptions` | `object` | — | Options for CSS preprocessors |
| `css.lightningcss` | `object` | — | Options passed to Lightning CSS for syntax lowering |
44 changes: 13 additions & 31 deletions docs/zh-CN/options/css.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,15 @@
> [!WARNING] 实验性功能
> CSS 支持属于实验性特性。请务必充分测试,并反馈您遇到的任何问题。随着功能的完善,API 和行为可能会有所调整。

## 基础与高级 CSS
## 快速开始

`tsdown` 提供两个层级的 CSS 支持:

- **内置(基础):** CSS 文件提取和打包开箱即用,无需额外依赖。
- **高级(`@tsdown/css`):** 预处理器(Sass/Less/Stylus)、CSS 语法降级、压缩和 `@import` 内联需要安装 `@tsdown/css` 包:
`tsdown` 的所有 CSS 功能由 `@tsdown/css` 包提供。安装后即可启用 CSS 处理:

```bash
npm install -D @tsdown/css
```

安装 `@tsdown/css` 后,高级 CSS 插件会自动替代内置的基础插件
安装 `@tsdown/css` 后,CSS 处理会自动启用

## CSS 导入

Expand Down Expand Up @@ -51,9 +48,6 @@ export function greet() {

## CSS 预处理器

> [!NOTE]
> 需要安装 `@tsdown/css`。

`tsdown` 内置支持 `.scss`、`.sass`、`.less`、`.styl` 和 `.stylus` 文件。需要安装对应的预处理器作为开发依赖:

::: code-group
Expand Down Expand Up @@ -138,9 +132,6 @@ export default defineConfig({

## CSS 压缩

> [!NOTE]
> 需要安装 `@tsdown/css`。

通过 `css.minify` 启用 CSS 压缩:

```ts
Expand All @@ -155,9 +146,6 @@ export default defineConfig({

## CSS 目标

> [!NOTE]
> 需要安装 `@tsdown/css`。

默认情况下,CSS 语法降级使用顶层的 [`target`](/zh-CN/options/target) 选项。你可以通过 `css.target` 单独为 CSS 设置目标:

```ts
Expand All @@ -182,9 +170,6 @@ export default defineConfig({

## CSS 转换器

> [!NOTE]
> 需要安装 `@tsdown/css`。

`css.transformer` 选项控制 CSS 的处理方式。PostCSS 和 Lightning CSS 是**互斥的**处理路径:

- **`'lightningcss'`**(默认):`@import` 由 Lightning CSS 的 `bundleAsync()` 解析,**完全不使用** PostCSS。
Expand Down Expand Up @@ -234,9 +219,6 @@ export default defineConfig({

## Lightning CSS

> [!NOTE]
> 需要安装 `@tsdown/css`。

`tsdown` 使用 [Lightning CSS](https://lightningcss.dev/) 进行 CSS 语法降级——根据 `target` 设置将现代 CSS 特性转换为兼容旧版浏览器的语法。

要启用 CSS 语法降级,需安装 `lightningcss`:
Expand Down Expand Up @@ -347,13 +329,13 @@ dist/

## 选项参考

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