Skip to main content

@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"
          }
        }
      }
    ]
  }
}

@stylexjs/sort-keys rule​

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