内置插件

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

Styled Components

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

基本用法

javascript

import { transform } from "oxc-transform";

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

示例

输入：

jsx

import styled from "styled-components";

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

输出（使用默认选项）：

jsx

import styled from "styled-components";

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

配置选项

核心选项

选项	类型	默认值	描述
`displayName`	`boolean`	`true`	为附加的 CSS 类名添加组件名称，便于调试
`ssr`	`boolean`	`true`	添加唯一的组件 ID，避免在服务器端渲染时出现校验和不匹配问题
`fileName`	`boolean`	`true`	控制是否在 `displayName` 前加上文件名

模板字面量选项

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

高级选项

选项	类型	默认值	描述
`pure`	`boolean`	`false`	为调用表达式添加 `/#__PURE__/` 注释，以更好地进行树摇
`namespace`	`string`	`undefined`	为组件 ID 添加命名空间前缀
`meaninglessFileNames`	`string[]`	`["index"]`	被认为对组件命名无意义的文件名列表

尚未实现的功能

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

支持的导入模式

该插件支持多种 styled-components 导入模式：

javascript

// 默认导入
import styled from "styled-components";

// 命名空间导入
import * as styled from "styled-components";

// 命名导入
import { createGlobalStyle, css, keyframes } from "styled-components";

// 原生和基础类型
import styled from "styled-components/native";
import styled from "styled-components/primitives";

功能特性

✅ 完全支持：

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

⚠️ 部分支持：

纯注解（仅限调用表达式，由于打包工具限制，暂不支持标签模板）

❌ 尚未实现：

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

内置插件 ​

Styled Components ​

基本用法 ​

示例 ​

配置选项 ​

核心选项 ​

模板字面量选项 ​

高级选项 ​

尚未实现的功能 ​

支持的导入模式 ​

功能特性 ​