Skip to main content

@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.

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.

importSources​

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

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

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.

styleResolution​

styleResolution: // Default: 'application-order'
  | '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 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.

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.