Skip to main content

@stylexjs/babel-plugin

Configuration options​

dev​

dev: boolean // Default: false

When true, StyleX will insert debug class names to identify the source of the styles.

test​

test: boolean // Default: false

When true, StyleX will only output debug classNames identifying the source of the styles.

It will not generate any styles or functional classNames. This can be useful for snapshot testing.

runtimeInjection​

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

Should StyleX generate code to inject styles at runtime? This may be useful during development but should be disabled in production.

classNamePrefix​

classNamePrefix: string // Default: 'x'

Prefix to applied to every generated className.

useRemForFontSize​

useRemForFontSize: boolean // Default: false

Should px values for fontSize be converted to rem? It is considered a best practice to use rem for font sizes to allow users to scale the font size up or down.

styleResolution​

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

Strategy to use for merging styles.

  • application-order: The last style applied wins. Consistent with how inline styles work on the web.
  • property-specificity: More specific styles will win over less specific styles. Consistent with React Native. (margin-top wins over margin)
  • Deprecated - legacy-expand-shorthands: Similar to 'application-order' but incomplete and error-prone. Will be removed in a future release.

importSources​

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

Override the package name where you can import stylex from. Used for setting up custom module aliases.

genConditionalClasses​

genConditionalClasses: boolean // Default: false

Enable experimental compile-time optimization to pre-compute stylex.props function calls with conditional styles when all possible styles used are defined in the same file and known at compile-time.

treeshakeCompensation​

treeshakeCompensation: boolean // Default: false

Named imports of StyleX variables are unused after compilation. Some bundlers may remove them as dead code. Causing variables to be undefined. Enable this option to prevent that by adding an import with no specifier. (e.g. import './my-vars.stylex.js')

aliases​

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

aliases option allows you to alias project directories to absolute paths, making it easier to import modules.

Example: '@/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,
    }

Strategy to use for resolving variables defined with stylex.defineVars(). This is required if you plan to use StyleX's theming APIs.

NOTE: While theming APIs are stable, the shape of this configuration option may change in the future.