yukukotani/eslint-plugin-chakra-ui

ESLint plugin for Chakra UI

Yuku Kotani, a Software Engineer based in Japan

• Software Engineer @ Ubie, Inc.
• Undergraduate Student @ Univ. of Tsukuba

eslint-plugin-chakra-ui's Issues

Typo and missing props in `props-order`

There are a few props that are missing, and one misspelled. Specifically under Padding props.

The paddingBottom prop is spelled as paddingButton (src)

The props paddingX and paddingY are missing. I know px and py exist, but it would be nice to have the full set of props.

The same is true for marginX and marginY.

Select which ones will be shorthanded.

Instead of all shorehand being converted, I would like to select which targets are shorthanded.
e.g. target:['default', 'all', 'none' , [margin]

Cannot read properties of null (reading 'getTypeChecker')

Error

yarn run v1.22.19
$ yarn workspace @project/partners lint
$ eslint --max-warnings=0 "**/*.{ts*,js}"

Oops! Something went wrong! :(

ESLint: 8.46.0

TypeError: Cannot read properties of null (reading 'getTypeChecker')
Occurred while linting /project/packages/partners/src/App.tsx:22
Rule: "chakra-ui/props-order"
    at isChakraElement (/project/node_modules/eslint-plugin-chakra-ui/dist/lib/isChakraElement.js:13:48)
    at JSXOpeningElement (/project/node_modules/eslint-plugin-chakra-ui/dist/rules/props-order.js:76:155)
    at ruleErrorHandler (/project/node_modules/eslint/lib/linter/linter.js:1050:28)
    at /project/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/project/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/project/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/project/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/project/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
    at CodePathAnalyzer.enterNode (/project/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:795:23)
error Command failed with exit code 2.

It happens because program is null.

eslint-plugin-chakra-ui/src/lib/isChakraElement.ts

Line 5 in f84ca01

const typeChecker = parserServices.program.getTypeChecker();

Context

• Monorepo
• TS version: 5.1.6
• ESLINT version: 8.46.0

Config

extends: [
   'eslint:recommended',
   // 'standard-with-typescript',
   'prettier',
   'plugin:@typescript-eslint/recommended',
   'plugin:import/recommended',
   'plugin:import/typescript',
   'plugin:react/recommended',
   'plugin:react/jsx-runtime',
   'plugin:react-hooks/recommended',
   'plugin:jsx-a11y/recommended',
   'plugin:storybook/recommended',
 ],
 parser: '@typescript-eslint/parser',
 plugins: ['@typescript-eslint', 'chakra-ui', 'relay'],
 env: { browser: true, node: true }, // @TODO: Change this based in the package
 parserOptions: {
   ecmaVersion: 'latest',
   sourceType: 'module',
   ecmaFeatures: { jsx: true },
 },
 rules: {
    // chakra-ui rules
   'chakra-ui/props-order': 'error',
   'chakra-ui/props-shorthand': 'error',
   'chakra-ui/require-specific-component': 'error',
   ...
  },
 settings: {
   react: { version: 'detect' },
   'import/resolver': { typescript: true, node: true },
 },

`gridArea` to `area` shorthand doesn't exist on `Grid` element

This rule is wrong, it should be on GridItem

eslint-plugin-chakra-ui/src/lib/getShorthand.ts

Line 61 in 8df8209

gridArea: "area",

GridItem is the one with area shorthand https://chakra-ui.com/docs/components/grid/props#griditem-props

const shorthandMap: ShorthandMap = {
  common: {
    // Margin
    margin: "m",
    marginTop: "mt",
    marginRight: "mr",
    marginEnd: "me",
    marginBottom: "mb",
    marginLeft: "ml",
    marginStart: "ms",
    marginX: "mx",
    marginY: "my",
    // Padding
    padding: "p",
    paddingTop: "pt",
    paddingRight: "pr",
    paddingEnd: "pe",
    paddingBottom: "pb",
    paddingLeft: "pl",
    paddingStart: "ps",
    paddingX: "px",
    paddingY: "py",
    //Layout
    width: "w",
    height: "h",
    minWidth: "minW",
    maxWidth: "maxW",
    minHeight: "minH",
    maxHeight: "maxH",
    // Flex
    flexDirection: "flexDir",
    // Background
    background: "bg",
    backgroundImage: "bgImage",
    backgroundSize: "bgSize",
    backgroundPosition: "bgPosition",
    backgroundRepeat: "bgRepeat",
    backgroundAttachment: "bgAttachment",
    backgroundColor: "bgColor",
    backgroundClip: "bgClip",
    // Position
    position: "pos",
    // Shadow
    boxShadow: "shadow",
  },
  Flex: {
    alignItems: "align",
    justifyContent: "justify",
    flexWrap: "wrap",
    flexDirection: "direction",
    flexDir: "direction",
  },
  Grid: {
    gridGap: "gap",
    gridRowGap: "rowGap",
    gridColumnGap: "columnGap",
    gridColumn: "column",
    gridRow: "row",
-    gridArea: "area",
    gridAutoFlow: "autoFlow",
    gridAutoRows: "autoRows",
    gridAutoColumns: "autoColumns",
    gridTemplateRows: "templateRows",
    gridTemplateColumns: "templateColumns",
    gridTemplateAreas: "templateAreas",
  },
+  GridItem: {
+.   gridArea: "area",
+ },
};

New rule to detect deprecated props

Like #40, some props are deprecated but remained for the backward compatibility.

This rule detects and fixes it.

customize `chakra-ui/props-order`

Hello! just have a few suggestions to leave here about how I believe this rule can be more like eslint-plugin-react's jsx-sort-props, only more specific to chakra.

I think it would be cool if like jsx-sort-props, one could sort with options like callbacksLast and shorthandFirst. for chakra-specific use case it would also be cool to have something like pseudoFirst so that one could choose if they want it at the beginning or the end.

Additionally, (this is a lot more complex) it would be cool if there was an option called something like uniqueFirst which moves unique props specific to that element to the front. For example, on a Flex element, align, justify, and direction props would show up before props that aren't specific to Flex.

Let me know what you think!

Support component-specific props

Currently, component-specific props such as Button's isActive prop are treated as non-chakra props.

This should be treated as Chakra props and sorted properly.

It's hard to list all props so code generation from chakra's source code is worth to consider.

[New Rule Proposal]: Use Value with Unit

Rule Summary

When non-united number is not predefined in theme, suggest adding unit for explicitness.

Example of incorrect code for this rule:

import { Box } from "@chakra-ui/react";

<Box p="11" mx="17" width="200">
  Hello
</Box>;

Example of correct code for this rule:

import { Box } from "@chakra-ui/react";

<Box p="11px" mx="17px" width="200px">
  Hello
</Box>;

It may be desirable to have this rule turned off by default.

Why needed?

In Chakra UI, we can use numbers for spacing without units.
However, Chakra UI doesn't offer consistent behavior, and there are times when it is preferable to explicitly add units.

Inconsistency 1: Different conversion methods depending value is predefined or not.

First of all, the behavior differs depending on whether the value has already been defined.

• let x is 20, then output is 5rem, it will be equal to 80px in most case.
• let x is 21, then output is 21px

Chakra UI claims mental model of spacing:

Mental model: If you need a spacing of 40px, divide it by 4. That'll give you 10. Then use it in your component.

But it is not true model. Most numbers will not be quadruple.

For example, if you pass a variable to width, some values are quadrupled, some are not. This is something that many developers would not expect.

Inconsistency 2: Some prop does not convert numbers as ${number}px

Secondly, in some case width props can output numbers without px or any units. ref: Different width depending on how props are passed

• <Box w='11'/> // output will be 11
• <Box w={11}/> // output will be 11px

I think both of these problems should be improved in Chakra UI itself, but I don't have much motivation to do so right now.

Flat config support

SSIA

[props-order]: Reconsider props order rule

from #13 (review)

Configure renovate

Configure renovate to keep dependencies updated like #37 semi-automatically.

chakra-ui/require-specific-component error

When enabling the chakra-ui/require-specific-component rule, I get 1:1 error Definition for rule 'chakra-ui/require-specific-component' was not found

I'm using the latest eslint-plugin-chakra-ui, 0.60 and the other rules seem to work just fine. I'm up to date on all my other dev dependencies as well.

Looks like it's missing from the export here:
https://github.com/Monchi/eslint-plugin-chakra-ui/blob/master/src/index.ts

Roadmap for 1.0.0 release.

If there is anything you want to implement before the 1.0.0 release, please add it!

General

• No breaking change for the code (needs more unit test)
• #30

New Rule

• #20

Props Order

• #15
• Reserved props

Props Shorthand

• #17

Detect chakra components that are not imported directly

Follow up #45

Alternate to applyToAllComponents option, automatically detect Chakra component whether it's directly imported from @chakra-ui/react or not.

[props-order]: Unintended value override by sorting

Sorting with JSXSpreadAttribute can cause value override.
If JSXSpreadAttribute is at index n, we need to sort [0, n-1], [n+1, arr.length], then concatenate them.

Input:

const props = {fontSize:"xl"}
<Box {...props} fontSize="md">Hello</Box>

fontSize = 'md'

Current Output:

const props = {fontSize:"xl"}
<Box fontSize="md" {...props} >Hello</Box> 

fontSize = 'xl'

Expected

const props = {fontSize:"xl"}
<Box {...props} fontSize="md">Hello</Box>

fontSize = 'md'

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency @types/node to ^18.19.33
• chore(deps): update dependency eslint to ^8.57.0
• chore(deps): update dependency eslint-plugin-eslint-plugin to ^5.5.1
• chore(deps): update dependency typescript to ^5.4.5
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-plugin-eslint-plugin to v6
• chore(deps): update dependency eslint-plugin-unused-imports to v4
• chore(deps): update pnpm to v9
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency npm-run-all with npm-run-all2 ^5.0.0
• chore(deps): update dependency vite to ^4.5.3
• chore(deps): update dependency eslint-plugin-unused-imports to ^3.2.0
• chore(deps): update pnpm to >=8.15.8
• chore(deps): update swc monorepo (@swc/cli, @swc/core)
• chore(deps): update @typescript-eslint/* to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, @typescript-eslint/rule-tester, @typescript-eslint/types, @typescript-eslint/utils)
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency vite to v5
• chore(deps): update dependency vitest to v1
• chore(deps): lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/composite-actions/install/action.yml

• pnpm/action-setup v2
• actions/setup-node v4

.github/workflows/build.yml

• actions/checkout v4

.github/workflows/lint.yml

• actions/checkout v4

.github/workflows/test.yml

• actions/checkout v4

npm

package.json

• @typescript-eslint/utils ^6.21.0
• @swc/cli ^0.1.62
• @swc/core ^1.4.1
• @types/node ^18.19.30
• @typescript-eslint/eslint-plugin ^6.21.0
• @typescript-eslint/parser ^6.21.0
• @typescript-eslint/rule-tester ^6.21.0
• @typescript-eslint/types ^6.21.0
• eslint ^8.56.0
• eslint-plugin-eslint-plugin ^5.3.0
• eslint-plugin-unused-imports ^3.0.0
• npm-run-all ^4.1.5
• prettier ^3.2.5
• typescript ^5.3.3
• vite ^4.5.2
• vitest ^0.34.6
• watchlist ^0.3.1
• node 12.x || 14.x || >= 16
• pnpm >=8

---

• Check this box to trigger a request for Renovate to run again on this repository

[CI]: CI succeeds, but testing fails.

See CI log of 54ae167

Provide recommended config

Provide preset of recommended rules.

It will be introduced like

  "extends": [
    "plugin:chakra-ui/recommended"
  ]

`require-specific-component` does not raise an error when only one prop is passed in the `<Box>` component

Problem

Currently, the require-specific-component feature does not raise an error when only one prop is passed to the <Box> component. For example:

<Box display='flex'>
  test1
</Box>

Expected Behavior

The require-specific-component should raise an error in this scenario, indicating that multiple props should be provided.
However, when a second prop is added (such as padding, margin, color, etc.), the require-specific-component feature works as expected. For instance:

<Box display='flex' p={2}>
  test2
</Box>

This results in:

<Flex p={2}>
  test2
</Flex>

Request

I kindly request clarification on whether the current behavior is intentional or not. Thank you for your attention to this matter.

---

Edit

Instead of referencing props-order, I should have mentioned require-specific-component. I just fixed it.

[New Rule] prefer layout component

Example of incorrect code for this rule:

import { Box } from "@chakra-ui/react";

<Box display="flex" flexDirection="column">
  <Box>First</Box>
  <Box>Second</Box>
</Box>

Example of correct code for this rule:

import { Box, Flex } from "@chakra-ui/react";

<Flex flexDirection="column">
  <Box>First</Box>
  <Box>Second</Box>
</Flex>

Border color should have last priority

When adding borderColor after borderLeft to the same component, the linter will move the borderColor before borderLeft. This results in the border using the initial color of the specified color.

Example (Results in a initial border as border-color is placed before border-left)

<Flex borderColor='red' borderLeft='1px solid'>
  ...
</Flex>