This plugin contains rules that should be used when working with @compiled/react
.
npm install @compiled/eslint-plugin --save-dev
Add @compiled
to the plugins section of your .eslintrc
configuration file, then configure the rules you want to use under the rules section.
{
"plugins": ["@compiled"],
"rules": {
"@compiled/rule-name": "error"
}
}
You can also enable the recommended rules for compiled by adding plugin:@compiled/recommended
in extends:
{
+ "extends": ["plugin:@compiled/recommended"],
- "plugins": ["@compiled"]
}
✅ = recommended, 🔧 = automatically fixable, 💡 = manually fixable
Name | Description | ✅ | Fixable |
---|---|---|---|
@compiled/jsx-pragma | Enforces a jsx pragma when using the css prop |
🔧 | |
@compiled/no-css-tagged-template-expression | Disallows the css tagged template expression |
✅ | 🔧 |
@compiled/no-emotion-css | Disallows @emotion usages |
🔧 | |
@compiled/no-exported-css | Disallows css usages from being exported |
✅ | |
@compiled/no-exported-keyframes | Disallows keyframes usages from being exported |
✅ | |
@compiled/no-keyframes-tagged-template-expression | Disallows the keyframes tagged template expression |
✅ | 🔧 |
@compiled/no-styled-tagged-template-expression | Disallows the styled tagged template expression |
✅ | 🔧 |
@compiled/no-css-prop-without-css-function | Disallows css prop without the css function | ✅ | 🔧 |