@stylexjs/eslint-plugin

Configuration options

@stylexjs/valid-styles rule

type Options = {
  // Possible strings where you can import stylex from
  //
  // Default: ['@stylexjs/stylex']
  validImports: Array<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"
          }
        }
      }
    ]
  }
}