Plugins embutidos

O transformador Oxc inclui suporte embutido a plugins comuns para melhorar DX e desempenho de build.

Escape em template literal marcado

Quando ligado, sequências </script> dentro de template literals marcados são escapadas para o navegador não fechar cedo uma tag <script> ao redor. Evita erro de parsing e riscos de XSS quando o JS sai embutido em HTML.

Recomendação

Ligue quando a saída puder ir direto em <script> no HTML. Sem isso, foo`</script>` pode quebrar páginas com script embutido. Detalhes: oxc-project/oxc#15306.

import { transform } from "oxc-transform";

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

Por exemplo, foo`</script>` vira uma chamada auxiliar onde </script> vira <\/script>.

Styled Components

O plugin adiciona suporte completo ao styled-components: SSR, minificação de estilos e melhor experiência de depuração.

Uso básico

import { transform } from "oxc-transform";

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

Exemplo

Entrada:

import styled from "styled-components";

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

Saída (opções padrão):

import styled from "styled-components";

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

Opções de configuração

Principais

Opção	Tipo	Padrão	Descrição
displayName	boolean	true	Enriquece o nome de classe CSS com o nome do componente para debug
ssr	boolean	true	IDs únicos para evitar divergência de checksum no SSR
fileName	boolean	true	Prefixa displayName com o nome do arquivo

Template literals

Opção	Tipo	Padrão	Descrição
transpileTemplateLiterals	boolean	true	Converte templates para representação menor
minify	boolean	true	Remove espaços em branco e comentários do CSS

Avançadas

Opção	Tipo	Padrão	Descrição
pure	boolean	false	Insere /*#__PURE__*/ para tree-shaking
namespace	string	undefined	Prefixo de namespace nos IDs dos componentes
meaninglessFileNames	string[]	["index"]	Nomes de arquivo tratados como genéricos no naming

Ainda não implementado

Opção	Tipo	Padrão	Descrição
cssProp	boolean	true	Transformação da prop JSX css (planejado)
topLevelImportPaths	string[]	[]	Caminhos de import personalizados (planejado)

Padrões de import suportados

// Import default
import styled from "styled-components";

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

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

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

Estado do suporte

Totalmente suportado:

• Nomes para debug
• Prefixo com nome de arquivo no display name
• SSR
• Transpilação de template literals
• Minificação de CSS
• Prefixos de namespace
• Anotações puras em expressões de chamada

Parcial:

• Anotações puras (apenas chamadas; não templates marcados por limitações de bundler)

Não implementado:

• Prop JSX css
• Import paths customizados