내장 플러그인

Oxc 변환기는 개발자 경험과 빌드 성능을 향상시키기 위해 인기 있는 변환 플러그인에 대한 내장 지원을 포함하고 있습니다.

스타일드 컴포넌트

스타일드 컴포넌트 플러그인은 서버 사이드 렌더링, 스타일 최소화 및 강화된 디버깅 기능과 함께 스타일드 컴포넌트에 대한 포괄적인 지원을 추가합니다.

기본 사용법

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 속성 변환 (계획됨)
topLevelImportPaths	string[]	[]	사용자 정의 임포트 경로 처리 (계획됨)

지원되는 임포트 패턴

이 플러그인은 다양한 스타일드 컴포넌트 임포트 패턴과 함께 작동합니다:

// 기본 임포트
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 속성 변환
• 사용자 정의 임포트 경로 처리