@stylexjs/babel-plugin

Configuration options

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/*')]

classNamePrefix

classNamePrefix: string; // Default: 'x'

Prefix to applied to every generated className.

debug

debug: boolean; // Default: false

When true, StyleX will use debug class names and insert data-style-src props to help identify the source of the styles.

dev

dev: boolean; // Default: false

When true, StyleX will insert function calls to inject the CSS rules at runtime, making it possible to use StyleX without setting up CSS file extraction.

importSources

importSources: Array<string | { from: string; as: string }>; // Default: ['@stylexjs/stylex']

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

Example: importSources: ['stylex', { from: '@acme/ui', as: 'css' }]

runtimeInjection

runtimeInjection: boolean; // Default: false

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

styleResolution

styleResolution: // Default: 'property-specificity'
  | 'application-order'
  | 'property-specificity'

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)

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.

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')

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.
      // Only used as a fallback
      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 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.