eslint-plugin-yak

ESLint plugin for next-yak - a powerful CSS-in-JS library for React applications.

Helps with the migration from styled-components to next-yak and nudges you towards using it the most performant way.

Installation

npm install --save-dev eslint-plugin-yak

Usage

Recommended

Import the plugin and add the recommended configuration

import yakPlugin from "eslint-plugin-yak";
import { defineConfig } from "eslint/config";

export default defineConfig([
  yakPlugin.configs.recommended,
]);

Customize

If you need to customize the recommended settings, you can just override the rules setting:

import yakPlugin from "eslint-plugin-yak";
import { defineConfig } from "eslint/config";

export default defineConfig({
  plugins: {
    yak: yakPlugin,
  },
  rules: {
    "eslint-plugin-yak/css-nesting-operator": "error",
    "eslint-plugin-yak/enforce-semicolon": "warn",
    "eslint-plugin-yak/style-conditions": "off",
  },
});

Rules

🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.
💭 Requires type information.

| Name                 | Description | 🔧 | 💡 | 💭 | | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | :- | :- | :- | | css-nesting-operator | Enforces css selectors in next-yak to correctly use the nesting selector (&) | 🔧 | 💡 | | | enforce-semicolon | Enforces that expression in styled/css literals from next-yak use semicolons | 🔧 | | | | style-conditions | Enforces that arrow functions only return runtime values or css literals in styled/css literals from next-yak | | | 💭 |