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

...