To get started, install this plugin
npm add -D eslint-plugin-tonic-ui-react
and add to your eslintrc. A recommended config is provided. Individual rules are listed below.
extends: ['plugin:tonic-ui-react/recommended'],
"tonic-ui-react/enforce-shorthands": "error"
Several props like margin, border, color, have shorthand values to promote consistency when styling. This rule when run will update those CSS props. Supports eslint auto-fix
Example:
<Box padding="4px" p="16rem" p={12} sx={{p:8}}/>
<Text borderColor="rgba(255, 255, 255, 1.0)" background="#005242" backgroundColor="#EeE1fe"/>
to
<Box padding="1x" p="64x" p="3x" sx={{p:"2x"}}/>
<Text borderColor="white:emphasis" background="teal:90" backgroundColor="purple:10"/>
To find out the name and structure of AST used by ESLint https://astexplorer.net/