@ 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 同样的,因为核心运行 处理器每一个.

安装

bun add @ecopages/postcss-processor

使用量

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

尾风 v4 预设( 建议)

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

// 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 将安装.

// 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() 没有争论.

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

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 并直接使用处理器公用:

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()],
});