eslint-plugin-styled-jsx

ESLint plugin for styled-jsx.

Installation

``bash
pnpm add -D eslint eslint-plugin-styled-jsx
`

Usage

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",
},
});
`

Shareable Configs

$3

`ts
import { defineConfig } from "eslint/config";
import styledJSX from "eslint-plugin-styled-jsx";

export default defineConfig({
extends: [styledJSX.configs.recommended],
});
`

$3

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],
});
`

$3

`ts
import { defineConfig } from "eslint/config";
import styledJSX from "eslint-plugin-styled-jsx";

export default defineConfig({
extends: [styledJSX.configs.strict],
});
`

Rules

💼 Configurations enabled in.\
💥 Set in the prohibit configuration.\
✅ Set in the recommended configuration.\
🔒 Set in the strict configuration.

| Name                                     | Description | 💼 |
| :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------- | :---- |
| no-styled-jsx | Prohibit the use of styled-jsx. | 💥 |
| require-resolve-for-dynamic-external-css | Require css.resolve when using dynamic values in external styled-jsx/css` tags. | ✅ 🔒 |

Contributing

Contributions are welcome!