내장 플러그인

Oxc Transformer는 개발 경험과 빌드 성능을 높이기 위해 널리 쓰이는 변환 플러그인을 내장합니다.

태그드 템플릿 이스케이프

켜 두면 태그드 템플릿 리터럴 안의 </script> 시퀀스가 이스케이프되어 브라우저가 바깥의 <script> 태그를 일찍 닫아 버리는 것을 방지합니다. JavaScript가 HTML에 직접 삽입될 때 파싱 오류와 잠재적 XSS 위험을 줄입니다.

권장

변환 결과를 HTML <script>에 직접 넣을 수 있다면 이 옵션을 켜세요. 끄면 </script>가 들어간 태그드 템플릿이 HTML <script> 안에서 깨질 수 있습니다. 자세한 내용은 oxc-project/oxc#15306를 참고하세요.

import { transform } from "oxc-transform";

const result = await transform("lib.js", sourceCode, {
  plugins: {
    taggedTemplateEscape: true,
  },
});

예를 들어 foo`</script>`는 </script> 시퀀스가 <\/script>로 이스케이프된 헬퍼 호출로 변환됩니다.

Styled Components

styled-components 플러그인은 SSR(서버 렌더링), 스타일 축약, 디버깅 기능을 포함한 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[]	[]	사용자 정의 import 경로 처리 (계획됨)

지원하는 import 패턴

플러그인은 다양한 styled-components import 패턴을 처리합니다:

// 기본 import
import styled from "styled-components";

// 네임스페이스 import
import * as styled from "styled-components";

// 이름 있는 import
import { createGlobalStyle, css, keyframes } from "styled-components";

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

기능

✅ 완전히 지원:

• 디버깅용 displayName
• displayName의 파일 이름 접두사
• 서버 사이드 렌더링
• 템플릿 리터럴 transpile
• CSS minify
• 네임스페이스 접두사
• 호출 표현식용 pure 주석

⚠️ 부분 지원:

• pure 주석 (호출 표현식만 지원; 번들러 제한으로 태그드 템플릿은 미지원)

❌ 아직 미구현:

• JSX css prop 변환
• 사용자 정의 import 경로 처리