# @ecopages/postcss-processor 中文文档

规范地址：https://npmcn.com/package/%40ecopages/postcss-processor/

版本：0\.7\.1
npm 元数据更新时间：2026-11-12T23:40:46.217Z
中文译文更新时间：2026-11-13T06:12:42.737Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ecopages/postcss-processor
原文对照：https://npmcn.com/package/%40ecopages/postcss-processor/?lang=original
源码仓库：https://github.com/ecopages/ecopages

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：53.2 kB，21 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^24\.22\.0 \|\| \>=26\.0\.0
- 运行依赖：8 个
- peer 依赖：tailwindcss \>=3，@ecopages/core 0\.7\.1，@tailwindcss/postcss \>=4
- 首次发布：2026-03-08T20:18:04.728Z
- 最新版本发布：2026-11-12T23:40:45.802Z
- 近 30 天下载量：3338（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：124（近 12 个月 124 个）

## 中文简介

Postcs 处理器, 将字符串或 Postcs 文件转换为 css

## 安装

```sh
npm install @ecopages/postcss-processor
```

也可以使用：`pnpm add @ecopages/postcss-processor`、`yarn add @ecopages/postcss-processor`、`bun add @ecopages/postcss-processor`

## README

# @ optcs- 处理器

Ecopage的CSS后处理管道. 它提供了一个处理器插件,将PostCSS无缝地集成到Ecopages构建系统中,并包括了为Tailwind CSS(v3和v4)所设置的内置预设.

## 特征

处理器不提供构建插件: 核心通过它编译应用程序导入的每个样式表 `transformStylesheet`。在第一个样式表转换时, PostCSS 插件列表加载.

-   **生态页面处理器插件**钩入管道 Core在为 CSS HMR 开发的源与源相对路径上写入已处理过的 CSS, 在制作样式表时, 管道会在其字节的散列下发布每个链接的样式表; 插件本身不会写出任何内容 .
-   **尾风预设**: 为Tailwind CSS v3和v4预配置了管道.
-   **自动配置**: 检测现有 `postcss.config.{js,ts,etc}`。 。 。 .
-   **CSS进口**数字 : `import styles from './card.css'` 获得在服务器构建、浏览器捆绑和 `ecopages dev` 同样的,因为核心运行 处理器每一个.

## 安装

```bash
bun add @ecopages/postcss-processor
```

## 使用量

将处理器整合到您的 `eco.config.ts` 使用预设.

### 尾风 v4 预设( 建议)

要求数 `@tailwindcss/postcss` 财务报告和审定财务报表 `tailwindcss` 将安装.

```typescript
// eco.config.ts
import path from 'node:path';
import { defineConfig } from '@ecopages/core/config';
import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
import { tailwindV4Preset } from '@ecopages/postcss-processor/presets/tailwind-v4';

export default defineConfig({
    processors: [
        postcssProcessorPlugin(
            tailwindV4Preset({
                referencePath: path.resolve(process.cwd(), 'src/styles/app.css'),
            }),
        ),
    ],
});
```

### 尾风 v3 预设

要求数 `tailwindcss@3`, (中文(简体) ), `autoprefixer`, (中文(简体) ), `postcss-import`,以及 `cssnano` 将安装.

```typescript
// eco.config.ts
import { defineConfig } from '@ecopages/core/config';
import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
import { tailwindV3Preset } from '@ecopages/postcss-processor/presets/tailwind-v3';

export default defineConfig({ processors: [postcssProcessorPlugin(tailwindV3Preset())] });
```

## 自定义配置

用你自己的 `postcss.config.js`,简单的呼叫 `postcssProcessorPlugin()` 没有争论.

您也可以手动通过原始插件或变换钩:

```typescript
import { defineConfig } from '@ecopages/core/config';
import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
import myPlugin from 'postcss-my-plugin';

export default defineConfig({
    processors: [
        postcssProcessorPlugin({
            filter: /\.css$/,
            plugins: {
                'my-plugin': myPlugin(),
            },
            transformInput: async (css) => `/* Header */\n${css}`,
            transformOutput: async (css) => css.replace('blue', 'red'),
        }),
    ],
});
```

## 独立处理

您可以全部绕过 Ecopage 并直接使用处理器公用:

```typescript
import postcssImport from 'postcss-import';
import { PostCssProcessor, transformWithPostcss } from '@ecopages/postcss-processor';

// Process a string
const result = await PostCssProcessor.processStringOrBuffer('.class { @apply bg-red-500; }', { filePath: 'style.css' });

// Process a string and list the files its plugins read
const { css, dependencies } = await transformWithPostcss("@import './base.css';", {
    filePath: 'src/main.css',
    plugins: [postcssImport()],
});
```

## 常见问题

### @ecopages/postcss-processor 是什么？

Postcs 处理器, 将字符串或 Postcs 文件转换为 css

### 如何安装 @ecopages/postcss-processor？

在项目目录运行 npm install @ecopages/postcss-processor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@ecopages/core（0\.7\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ecopages/postcss-processor 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ecopages/postcss-processor 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ecopages/postcss-processor 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^24\.22\.0 \|\| \>=26\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @ecopages/postcss-processor 可以商用吗？

@ecopages/postcss-processor 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ecopages/postcss-processor 的下载量有多少？

根据 npm 官方下载统计，@ecopages/postcss-processor 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,338 次，日均约 111 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ecopages/postcss-processor 还在维护吗？

最新版本 0\.7\.1 发布于 2026/11/13（今天）；至今共发布 124 个版本，其中过去 12 个月发布了 124 个；首次发布于 2026/03/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。