跳到主要内容

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