eslint-plugin-styled-jsx

ESLint plugin for styled-jsx.

Installation

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

Usage

Make sure you are using ESLint Flat Config.

This is an example configuration:

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

Recommended

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

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

Prohibit

Next.js setup styled-jsx by default. If you want to prohibit its usage, use this configuration.

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

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

Strict

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!