Встроенные плагины

Трансформер Oxc включает встроенную поддержку распространённых плагинов преобразований для удобства разработки и скорости сборки.

Экранирование в шаблонных литералах (Tagged Template Escape)

При включении последовательности </script> внутри тегированных шаблонных литералов экранируются, чтобы браузер не закрыл окружающий тег <script> преждевременно. Так избегают ошибок разбора и потенциальных XSS, когда JS встроен в HTML.

Рекомендация

Включайте эту опцию, если результат может встраиваться в HTML <script>. Иначе литералы с </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 добавляет поддержку styled-components: SSR, минификация стилей и расширенная отладка.

Базовое использование

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 компонентов, чтобы избежать рассинхрона контрольных сумм при SSR
fileName	boolean	true	Префикс displayName именем файла

Шаблонные литералы

Параметр	Тип	По умолчанию	Описание
transpileTemplateLiterals	boolean	true	Шаблонные литералы в более компактный вид для меньшего бандла
minify	boolean	true	Минификация CSS: пробелы и комментарии

Дополнительные

Параметр	Тип	По умолчанию	Описание
pure	boolean	false	Комментарии /*#__PURE__*/ для лучшего tree-shaking
namespace	string	undefined	Префикс пространства имён для ID компонентов
meaninglessFileNames	string[]	["index"]	Имена файлов, считающиеся «пустыми» для имён компонентов

Ещё не реализовано

Параметр	Тип	По умолчанию	Описание
cssProp	boolean	true	Преобразование JSX css prop (планируется)
topLevelImportPaths	string[]	[]	Свои пути импорта (планируется)

Поддерживаемые варианты импорта

// Default import
import styled from "styled-components";

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

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

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

Возможности

✅ Полностью:

• Display names для отладки
• Префикс имени файла в display names
• Поддержка SSR
• Транспиляция шаблонных литералов
• Минификация CSS
• Префиксы namespace
• Pure-аннотации для вызовов

⚠️ Частично:

• Pure-аннотации только для call expressions, не для тегированных шаблонов (ограничения бандлеров)

❌ Не реализовано:

• Преобразование JSX css prop
• Свои пути импорта