ESLint plugin for styled-jsx
npm install eslint-plugin-styled-jsxESLint plugin for styled-jsx.
``bash`
pnpm add -D eslint eslint-plugin-styled-jsx
Make sure you are using ESLint Flat Config.
This is an example configuration:
`ts
import { defineConfig } from "eslint/config";
import styledJSX from "eslint-plugin-styled-jsx";
export default defineConfig({
plugins: {
"styled-jsx": styledJSX,
},
rules: {
"styled-jsx/no-dynamic-external-style-except-resolve-tag": "error",
},
});
`
`ts
import { defineConfig } from "eslint/config";
import styledJSX from "eslint-plugin-styled-jsx";
export default defineConfig({
extends: [styledJSX.configs.recommended],
});
`
Next.js setup styled-jsx by default. If you want to prohibit its usage, use this configuration.
`ts
import { defineConfig } from "eslint/config";
import styledJSX from "eslint-plugin-styled-jsx";
export default defineConfig({
extends: [styledJSX.configs.prohibit],
});
`
`ts
import { defineConfig } from "eslint/config";
import styledJSX from "eslint-plugin-styled-jsx";
export default defineConfig({
extends: [styledJSX.configs.strict],
});
`
💼 Configurations enabled in.\
💥 Set in the prohibit configuration.\recommended
✅ Set in the configuration.\strict
🔒 Set in the configuration.
| Name                                    | Description | 💼 |
| :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------- | :---- |
| no-styled-jsx | Prohibit the use of styled-jsx. | 💥 |css.resolve
| require-resolve-for-dynamic-external-css | Require when using dynamic values in external styled-jsx/css` tags. | ✅ 🔒 |
Contributions are welcome!