@stylexjs/eslint-plugin

Configuration options

@stylexjs/valid-styles rule

type Options = {
  // Possible strings where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,

  // Custom limits for values of various properties
  propLimits?: PropLimits,

  // @deprecated
  // Allow At Rules and Pseudo Selectors outside of style values.
  // Default: false
  allowOuterPseudoAndMedia: boolean,

  // @deprecated
  // Disallow properties that are known to break
  // in 'legacy-expand-shorthands' style resolution mode.
  // Default: false
  banPropsForLegacy: boolean,

};

type PropLimits = {
  // The property name as a string or a glob pattern
  [propertyName: string]: {
    limit:
      // Disallow the property
      | null
      // Allow any string value
      | 'string'
      // Allow any number value
      | 'number'
      // Any string other 'string' or 'number'
      // will be considered to be a valid constant
      // e.g. 'red' or '100px'.
      | string
      // You can also provide numeric constants
      // e.g. 100 or 0.5
      | number
      // You can also provide an array of valid
      // number or string constant values.
      | Array<string | number>,
    // The error message to show when a value doesn't
    // conform to the provided restriction.
    reason: string,
  },
};

Example

{
  "rules": {
    "@stylexjs/valid-styles": [
      "error",
      {
        "propLimits": {
          "mask+([a-zA-Z])": {
            "limit": null,
            "reason": "Use the `mask` shorthand property instead."
          },
          "fontSize": {
            "limit": "number",
            "reason": "Only numeric font values are allowed"
          },
          "padding": {
            "limit": [0, 4, 8, 16, 32, 64],
            "reason": "Use a padding that conforms to the design system"
          }
        }
      }
    ]
  }
}

@stylexjs/sort-keys rule

type Options = {
  // Possible string where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,

  // Minimum number of keys required after which the rule is enforced
  // Default: 2
  minKeys: number,

  // Sort groups of keys that have a blank line between them separately
  // Default: false
  allowLineSeparatedGroups: boolean,
};

Example

{
  "rules": {
    "@stylexjs/valid-styles": "error",
    "@stylexjs/sort-keys": [
      "warn",
      {
        "minKeys": 3,
        "allowLineSeparatedGroups": true
      }
    ]
  }
}

@stylexjs/valid-shorthands rule

type Options = {
  // Possible string where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,

  // Whether `!important` is allowed
  // Default: false
  allowImportant: boolean,

  // Whether the expansion uses logical direction properties over physical
  // Default: false
  preferInline: boolean,
};

@stylexjs/enforce-extension rule

Ensures that files exporting defineVars or defineConsts variables end with a configurable extension (defaults to .stylex). This rule helps maintain consistent file naming conventions for StyleX theme and constant files.

type Options = {
  // Possible string where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,

  // The file extension to enforce for theme files
  // Default: '.stylex'
  themeFileExtension: string,

  // Allow mixed exports in the same file (legacy support)
  // Default: false
  legacyAllowMixedExports: boolean,

  // Enforce a separate `.const` suffix for defineConsts files
  // Default: false
  enforceDefineConstsExtension: boolean,
};

Example

{
  "rules": {
    "@stylexjs/enforce-extension": [
      "error",
      {
        "themeFileExtension": ".stylex",
        "enforceDefineConstsExtension": true,
        "legacyAllowMixedExports": false
      }
    ]
  }
}

When enforceDefineConstsExtension is enabled:

• Files with stylex.defineConsts() exports must use .stylex.const.js extension
• Files with stylex.defineVars() exports must use .stylex.js extension
• Files cannot mix defineConsts, defineVars, and other exports

@stylexjs/no-unused rule

type Options = {
  // Possible string where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,
};

@stylexjs/no-legacy-contextual-styles rule

type Options = {
  // Possible string where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,
};

@stylexjs/no-lookahead-selectors rule

Warns against usage of stylex.when.anySibling, stylex.when.descendant, and stylex.when.siblingAfter due to their reliance on the CSS :has() selector, which does not yet have widespread browser support.

type Options = {
  // Possible string where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,
};

Limited browser support

const styles = stylex.create({
  foo: {
    backgroundColor: {
      default: 'blue',
      [stylex.when.anySibling('.sibling')]: 'red',
    },
    color: {
      default: 'black',
      [stylex.when.descendant('.child')]: 'purple',
    },
    marginTop: {
      default: '0px',
      [stylex.when.siblingAfter('.next')]: '8px',
    },
  },
});

Example

{
  "rules": {
    "@stylexjs/no-lookahead-selectors": "warn"
  }
}

See caniuse.com/css-has for current browser compatibility.

@stylexjs/no-nonstandard-styles rule

Enforces that you create standard CSS values and properties for StyleX. This rule validates that all CSS properties and values conform to standard CSS specifications.

type Options = {
  // Possible string where you can import stylex from
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,
};

Example

{
  "rules": {
    "@stylexjs/no-nonstandard-styles": "error"
  }
}

This rule will:

• Detect invalid CSS property names
• Suggest standard property names for common mistakes
• Validate CSS values against property specifications
• Provide auto-fixes for common issues like non-standard float: start (suggesting float: inline-start)