@stylexjs/babel-plugin

Configuration options

type StyleXOptions = {
  // Should insert debug class names to identify the source of the styles
  // Also, sets the default value of `runtimeInjection`
  //
  // Default: `false`
  dev: boolean,

  // Are you in testing environment
  // When true, StyleX will generate styles or functional classNames.
  // Instead it will only output debug classNames that reference the 
  // filePath and variables names of the styles applied.
  //
  // Default: `false`
  test: boolean,

  // Should StyleX generate code to inject styles at runtime?
  // This may be useful during development but should be disabled
  // in production.
  //
  // Default: the value of `dev`
  runtimeInjection?: boolean,

  // Prefix to applied to every generated className
  //
  // Default: 'x'
  classNamePrefix: string,

  // Should `px` values for `fontSize` be converted to `rem`?
  // It is a best practice to use `rem` for font sizes to allow
  // users to scale the font size up or down.
  //
  // Default: `true`
  useRemForFontSize?: boolean,

  // Strategy to use for merging styles
  //
  // Default: 'application-order'
  styleResolution:
    // The last style applied wins. Consistent with how inline styles work on the web.
    | 'application-order' 
    // More specific styles will win over less specific styles. (margin-top wins over margin)
    // Consistent with how React Native works.
    | 'property-specificity'
    // @deprecated
    // Similar to 'application-order' but incomplete and error-prone.
    // Will be removed in a future release.
    | 'legacy-expand-shorthands',

  // Override the name of the package where you can import stylex from.
  //
  // Default: ['@stylexjs/stylex']
  importSources: Array<string>,

  // Enable experimental compile-time optimization to pre-compute
  // `stylex.props` and `stylex()` function calls with conditional styles
  // when all possible styles used are defined in the same file and known 
  // at compile-time.
  //
  // Default: `false`
  genConditionalClasses?: boolean,

  // 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'`)
  //
  // Default: `false`
  treeshakeCompensation?: boolean,

  // Strategy to use for resolving variables defined with 
  // `stylex.defineVars()`
  // This is required if you plan to use StyleX's theming APIs
  // 
  // Default: undefined
  unstable_moduleResolution?:
    | {
        // 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,
      }
};

...