跳至主要内容

@stylexjs/babel-plugin

配置选项​

dev​

dev: boolean // Default: false

当设置为 true 时，StyleX 将插入调试类名以识别样式的来源。

test​

test: boolean // Default: false

当设置为 true 时，StyleX 将仅输出识别样式来源的调试类名。

它不会生成任何样式或功能类名。这对于快照测试很有用。

runtimeInjection​

runtimeInjection: boolean // Default: the value of `dev`

StyleX 是否应生成代码以在运行时注入样式？这在开发期间可能很有用，但在生产环境中应禁用。

classNamePrefix​

classNamePrefix: string // Default: 'x'

应用于每个生成的类名的前缀。

useRemForFontSize​

useRemForFontSize: boolean // Default: false

是否应将 fontSize 的 px 值转换为 rem？建议使用 rem 作为字体大小，以便用户可以放大或缩小字体大小。

styleResolution​

styleResolution: // Default: 'application-order'
  | 'application-order'
  | 'property-specificity'
  // @deprecated
  | 'legacy-expand-shorthands'

用于合并样式的策略。

  • application-order：最后应用的样式优先。与 Web 上内联样式的工作方式一致。
  • property-specificity：更具体的样式将优先于不太具体的样式。与 React Native 一致。（margin-top 优先于 margin）
  • 已弃用 - legacy-expand-shorthands：类似于“application-order”，但功能不完整且容易出错。将在未来版本中删除。

importSources​

importSources: Array<string> // Default: ['@stylexjs/stylex']

覆盖可以从中导入 stylex 的包名称。用于设置自定义模块别名。

genConditionalClasses​

genConditionalClasses: boolean // Default: false

启用实验性的编译时优化，以便在所有使用的可能样式都在同一文件中定义并在编译时已知的情况下，预先计算具有条件样式的 stylex.props 函数调用。

treeshakeCompensation​

treeshakeCompensation: boolean // Default: false

StyleX 变量的命名导入在编译后未使用。某些打包器可能会将其删除作为死代码。导致变量未定义。启用此选项可通过添加没有指定符的导入来防止这种情况。（例如 import './my-vars.stylex.js'）

aliases​

aliases: {[key: string]: string | Array<string>} // Default: undefined

aliases 选项允许您将项目目录关联到绝对路径，从而更轻松地导入模块。

示例：'@/components/*': [path.join(__dirname, './src/components/*')]

unstable_moduleResolution​

unstable_moduleResolution: // Default: undefined
  | {
      // The module system to be used.
      // Use this value when using `ESModules`.
      type: 'commonJS',
      // The absolute path to the root directory of your project.
      rootDir: string,
      // Override `.stylex.js` with your own extension.
      themeFileExtension?: string,
    }
  | {
      // Use this when using the Haste module system
      // Where all files are imported by filename rather
      // than relative paths and all filenames must be unique.
      type: 'haste',
      // Override `.stylex.js` with your own extension.
      themeFileExtension?: string,
    }

用于解析使用 stylex.defineVars() 定义的变量的策略。如果您计划使用 StyleX 的主题 API，则需要此选项。

注意：虽然主题 API 是稳定的，但此配置选项的形状在未来可能会发生变化。