ビルトインプラグイン

Oxc transformer は、開発者の体験とビルドパフォーマンスを向上させるために、人気の変換プラグインをビルトインでサポートしています。

スタイルドコンポーネント

styled-components プラグインは、サーバーサイドレンダリング、スタイルの最小化、強化されたデバッグ機能を含む、styled-components に対する包括的なサポートを追加します。

基本的な使い方

import { transform } from "oxc-transform";

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

例

入力:

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;"]);

設定オプション

コアオプション

オプション	型	デフォルト	説明
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 prop の変換（計画中）
topLevelImportPaths	string[]	[]	カスタムインポートパスの処理（計画中）

対応するインポートパターン

このプラグインは、さまざまな styled-components インポートパターンに対応しています：

// デフォルトインポート
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 prop 変換
• カスタムインポートパス処理