内置插件

🌐 Built-in Plugins

Oxc transformer 内置支持流行的转换插件，以提升开发者体验和构建性能。

🌐 Oxc transformer includes built-in support for popular transformation plugins to improve developer experience and build performance.

样式化组件

🌐 Styled Components

styled-components 插件提供对 styled-components 的全面支持，包括服务器端渲染、样式压缩以及增强的调试功能。

🌐 The styled-components plugin adds comprehensive support for styled-components with server-side rendering, style minification, and enhanced debugging capabilities.

基本用法

🌐 Basic Usage

import { transform } from "oxc-transform";

const result = await transform("Component.jsx", sourceCode, {
  plugins: {
    styledComponents: {
      displayName: true,
      ssr: true,
      fileName: true,
      minify: true,
    },
  },
});

示例

🌐 Example

输入:

import styled from "styled-components";

const Button = styled.div`
  color: blue;
  padding: 10px;
`;

输出（默认选项）：

import styled from "styled-components";

const Button = styled.div.withConfig({
  displayName: "Button",
  componentId: "sc-1234567-0",
})(["color:blue;padding:10px;"]);

配置选项

🌐 Configuration Options

核心选项

🌐 Core Options

选项	类型	默认值	描述
displayName	boolean	true	使用组件名称增强附加的 CSS 类名以便于调试
ssr	boolean	true	添加唯一的组件 ID 以避免服务器端渲染期间校验和不匹配
fileName	boolean	true	控制 displayName 是否以文件名作为前缀

模板字面量选项

🌐 Template Literal Options

选项	类型	默认值	描述
transpileTemplateLiterals	boolean	true	将模板字面量转换为更小的表示，以减小打包体积
minify	boolean	true	通过删除空格和注释来压缩 CSS 内容

高级选项

🌐 Advanced Options

选项	类型	默认值	描述
pure	boolean	false	添加 /*#__PURE__*/ 注释以实现更好的 tree-shaking
namespace	string	undefined	为组件 ID 添加命名空间前缀
meaninglessFileNames	string[]	["index"]	被视为无意义的文件名列表，用于组件命名

尚未实现

🌐 Not Yet Implemented

选项	类型	默认值	描述
cssProp	boolean	true	JSX CSS 属性转换（计划中）
topLevelImportPaths	string[]	[]	自定义导入路径处理（计划中）

支持的导入模式

🌐 Supported Import Patterns

该插件适用于各种 styled-components 导入模式：

🌐 The plugin works with various styled-components import patterns:

// Default import
import styled from "styled-components";

// Namespace import
import * as styled from "styled-components";

// Named imports
import { createGlobalStyle, css, keyframes } from "styled-components";

// Native and primitives
import styled from "styled-components/native";
import styled from "styled-components/primitives";

特性

🌐 Features

✅ 完全支持：

• 用于调试的显示名称
• 显示名称中的文件名前缀
• 服务器端渲染支持
• 模板字面量转译
• CSS 压缩
• 命名空间前缀
• 调用表达式的纯注解

⚠️ 部分支持:

• 纯注解（仅调用表达式，不包括标记模板，因为打包工具的限制）

❌ 尚未实现:

• JSX 的 css 属性转换
• 自定义导入路径处理