Add prefer-shorthand-properties rule

chakra-ui · Feb 8, 2024 · 5c3577d · 5c3577d
1 parent e4e9b0f
commit 5c3577d
Show file tree

Hide file tree

Showing 11 changed files with 340 additions and 129 deletions.
diff --git a/.changeset/eight-crabs-sniff.md b/.changeset/eight-crabs-sniff.md
@@ -0,0 +1,5 @@
+---
+"@pandacss/eslint-plugin": patch
+---
+
+Add `prefer-shorthand-properties` rule
diff --git a/README.md b/README.md
@@ -1,109 +1,110 @@
-<!-- This file is built by build-readme.js. Do not edit it directly; edit README.md.template instead. -->
-<br>
-<div align="center">
-
-<p align="center">
-    <a href="https://panda-css.com">
-        <picture>
-            <img alt="Panda CSS" src="https://github.com/chakra-ui/eslint-plugin-panda/raw/main/.github/banner.png" width="100%">
-        </picture>
-    </a>
-</p>
-<p align="center">ESLint plugin for Panda CSS</p>
-
-<p align="center">
-    <a aria-label="Github Actions" href="https://github.com/chakra-ui/eslint-plugin-panda/actions/workflows/quality.yml">
-        <picture>
-            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
-            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
-            <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
-        </picture>
-    </a>
-</p>
-
-</div>
-
-## Getting Started
-
-### Installation
-
-```bash
-pnpm add -D @pandacss/eslint-plugin
-```
-
-### Usage
-
-Add `@pandacss/eslint-plugin` to the plugins section of your `.eslintrc` configuration file. You can omit the
-`/eslint-plugin` suffx:
-
-```json
-{
-  "plugins": ["@pandacss"]
-}
-```
-
-Then configure the rules you want to use under the rules section.
-
-```json
-{
-  "rules": {
-    "@pandacss/no-debug": "error"
-  }
-}
-```
-
-You can also enable the `recommended` rules in extends:
-
-```diff
-{
--   "plugins": ["@pandacss"]
-+   "extends": ["plugin:@pandacss/recommended"]
-}
-```
-
-Or enable all rules in extends:
-
-```diff
-{
--   "plugins": ["@pandacss"]
-+   "extends": ["plugin:@pandacss/all"]
-}
-```
-
-> [!WARNING]  
-> This is not recommended. You should only enable the rules you need.
-
-## Rules
-
-Where rules are included in the configs `recommended`, or `all` it is indicated below.
-
-* [`@pandacss/file-not-included`](docs/rules/file-not-included.md) `all`, `recommended`
-* [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md) `all`, `recommended`
-* [`@pandacss/no-debug`](docs/rules/no-debug.md) `all`, `recommended`
-* [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md) `all`, `recommended`
-* [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md) `all`
-* [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) `all`
-* [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md) `all`, `recommended`
-* [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md) `all`, `recommended`
-* [`@pandacss/no-shorthand-prop`](docs/rules/no-shorthand-prop.md) `all`
-* [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md) `all`
-* [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) `all`
-
-## Settings
-
-### `configPath`
-
-You can tell `eslint` to use a custom panda config file by setting the `configPath` option in your `.eslintrc.js` file.
-
-By default we find the nearest panda config to the linted file.
-
-```js filename=".eslintrc.(c)js"
-const path = require('path')
-
-module.exports = {
-  plugins: ['@pandacss'],
-  settings: {
-    '@pandacss/configPath': path.join('PATH-TO/panda.config.js'),
-  },
-}
-```
+<!-- This file is built by build-readme.js. Do not edit it directly; edit README.md.template instead. -->
+<br>
+<div align="center">
+
+<p align="center">
+    <a href="https://panda-css.com">
+        <picture>
+            <img alt="Panda CSS" src="https://github.com/chakra-ui/eslint-plugin-panda/raw/main/.github/banner.png" width="100%">
+        </picture>
+    </a>
+</p>
+<p align="center">ESLint plugin for Panda CSS</p>
+
+<p align="center">
+    <a aria-label="Github Actions" href="https://github.com/chakra-ui/eslint-plugin-panda/actions/workflows/quality.yml">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+            <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+        </picture>
+    </a>
+</p>
+
+</div>
+
+## Getting Started
+
+### Installation
+
+```bash
+pnpm add -D @pandacss/eslint-plugin
+```
+
+### Usage
+
+Add `@pandacss/eslint-plugin` to the plugins section of your `.eslintrc` configuration file. You can omit the
+`/eslint-plugin` suffx:
+
+```json
+{
+  "plugins": ["@pandacss"]
+}
+```
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+  "rules": {
+    "@pandacss/no-debug": "error"
+  }
+}
+```
+
+You can also enable the `recommended` rules in extends:
+
+```diff
+{
+-   "plugins": ["@pandacss"]
++   "extends": ["plugin:@pandacss/recommended"]
+}
+```
+
+Or enable all rules in extends:
+
+```diff
+{
+-   "plugins": ["@pandacss"]
++   "extends": ["plugin:@pandacss/all"]
+}
+```
+
+> [!WARNING]  
+> This is not recommended. You should only enable the rules you need.
+
+## Rules
+
+Where rules are included in the configs `recommended`, or `all` it is indicated below.
+
+- [`@pandacss/file-not-included`](docs/rules/file-not-included.md) `all`, `recommended`
+- [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md) `all`, `recommended`
+- [`@pandacss/no-debug`](docs/rules/no-debug.md) `all`, `recommended`
+- [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md) `all`, `recommended`
+- [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md) `all`
+- [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) `all`
+- [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md) `all`, `recommended`
+- [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md) `all`, `recommended`
+- [`@pandacss/prefer-longhand-properties`](docs/rules/prefer-longhand-properties.md) `all`
+- [`@pandacss/prefer-shorthand-properties`](docs/rules/prefer-shorthand-properties.md) `all`
+- [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md) `all`
+- [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) `all`
+
+## Settings
+
+### `configPath`
+
+You can tell `eslint` to use a custom panda config file by setting the `configPath` option in your `.eslintrc.js` file.
+
+By default we find the nearest panda config to the linted file.
+
+```js filename=".eslintrc.(c)js"
+const path = require('path')
+
+module.exports = {
+  plugins: ['@pandacss'],
+  settings: {
+    '@pandacss/configPath': path.join('PATH-TO/panda.config.js'),
+  },
+}
+```
diff --git a/docs/rules/no-shorthand-prop.md → docs/rules/prefer-longhand-properties.md b/docs/rules/no-shorthand-prop.md → docs/rules/prefer-longhand-properties.md
@@ -1,8 +1,8 @@
 [//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
 
-# no-shorthand-prop
+# prefer-longhand-properties
 
-Discourage the use of shorthand properties and promote the preference for longhand CSS properties in the codebase.
+Discourage the use of shorthand properties and promote the preference for longhand properties in the codebase.
 
 📋 This rule is enabled in `plugin:@pandacss/all`.
 
@@ -56,5 +56,5 @@ function App(){
 
 ## Resources
 
-* [Rule source](/plugin/src/rules/no-shorthand-prop.ts)
-* [Test source](/tests/no-shorthand-prop.test.ts)
+* [Rule source](/plugin/src/rules/prefer-longhand-properties.ts)
+* [Test source](/tests/prefer-longhand-properties.test.ts)
diff --git a/docs/rules/prefer-shorthand-properties.md b/docs/rules/prefer-shorthand-properties.md
@@ -0,0 +1,60 @@
+[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
+
+# prefer-shorthand-properties
+
+Discourage the use of longhand properties and promote the preference for shorthand properties in the codebase.
+
+📋 This rule is enabled in `plugin:@pandacss/all`.
+
+## Rule details
+
+❌ Examples of **incorrect** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ marginLeft: '4' });
+```
+```js
+
+import { css } from './panda/css';
+
+function App(){
+  return  <div className={css({ background: 'red.100' })} />;
+};
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App(){
+  return  <Circle _hover={{  position: 'absolute' }} />;
+}
+```
+
+✔️ Examples of **correct** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ ml: '4' });
+```
+```js
+
+import { css } from './panda/css';
+
+function App(){
+  return  <div className={css({ bg: 'red.100' })} />;
+};
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App(){
+  return  <Circle _hover={{  pos: 'absolute' }} />;
+}
+```
+
+## Resources
+
+* [Rule source](/plugin/src/rules/prefer-shorthand-properties.ts)
+* [Test source](/tests/prefer-shorthand-properties.test.ts)
diff --git a/plugin/src/rules/index.ts b/plugin/src/rules/index.ts
@@ -7,6 +7,7 @@ import noHardCodedColor, { RULE_NAME as NoHardCodedColor } from './no-hardcoded-
 import noInvalidTokenPaths, { RULE_NAME as NoInvalidTokenPaths } from './no-invalid-token-paths'
 import noPropertyRenaming, { RULE_NAME as NoPropertyRenaming } from './no-property-renaming'
 import preferLonghandProperties, { RULE_NAME as PreferLonghandProperties } from './prefer-longhand-properties'
+import preferShorthandProperties, { RULE_NAME as PreferShorthandProperties } from './prefer-shorthand-properties'
 import noUnsafeTokenUsage, { RULE_NAME as NoUnsafeTokenUsage } from './no-unsafe-token-fn-usage'
 import preferAtomicProperties, { RULE_NAME as PreferAtomicProperties } from './prefer-atomic-properties'
 
@@ -20,6 +21,7 @@ export const rules = {
   [NoInvalidTokenPaths]: noInvalidTokenPaths,
   [NoPropertyRenaming]: noPropertyRenaming,
   [PreferLonghandProperties]: preferLonghandProperties,
+  [PreferShorthandProperties]: preferShorthandProperties,
   [NoUnsafeTokenUsage]: noUnsafeTokenUsage,
   [PreferAtomicProperties]: preferAtomicProperties,
 } as any
diff --git a/plugin/src/rules/prefer-atomic-properties.ts b/plugin/src/rules/prefer-atomic-properties.ts
@@ -1,4 +1,4 @@
-import { isPandaAttribute, isPandaProp, isValidProperty, resolveShorthand } from '../utils/helpers'
+import { isPandaAttribute, isPandaProp, isValidProperty, resolveLonghand } from '../utils/helpers'
 import { type Rule, createRule } from '../utils'
 import { compositeProperties } from '../utils/composite-properties'
 import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
@@ -22,7 +22,7 @@ const rule: Rule = createRule({
     const resolveCompositeProperty = (name: string) => {
       if (Object.hasOwn(compositeProperties, name)) return name
 
-      const longhand = resolveShorthand(name, context)
+      const longhand = resolveLonghand(name, context) ?? name
       if (isValidProperty(longhand, context) && Object.hasOwn(compositeProperties, longhand)) return longhand
     }
 

diff --git a/plugin/src/rules/prefer-longhand-properties.ts b/plugin/src/rules/prefer-longhand-properties.ts
@@ -2,14 +2,14 @@ import { isPandaAttribute, isPandaProp, resolveLonghand } from '../utils/helpers
 import { type Rule, createRule } from '../utils'
 import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
 
-export const RULE_NAME = 'no-shorthand-prop'
+export const RULE_NAME = 'prefer-longhand-properties'
 
 const rule: Rule = createRule({
   name: RULE_NAME,
   meta: {
     docs: {
       description:
-        'Discourage the use of shorthand properties and promote the preference for longhand CSS properties in the codebase.',
+        'Discourage the use of shorthand properties and promote the preference for longhand properties in the codebase.',
     },
     messages: {
       longhand: 'Use longhand property of `{{shorthand}}` instead. Prefer `{{longhand}}`',
@@ -31,7 +31,7 @@ const rule: Rule = createRule({
 
       return context.report({
         node,
-        messageId: 'longhand' as const,
+        messageId: 'longhand',
         data,
         suggest: [
           {