Skip to content

Commit 5c3577d

Browse files
anubra266anubra266
committed
Add prefer-shorthand-properties rule
1 parent e4e9b0f commit 5c3577d

File tree

11 files changed

+340
-129
lines changed

11 files changed

+340
-129
lines changed

‎.changeset/eight-crabs-sniff.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@pandacss/eslint-plugin": patch
3+
---
4+
5+
Add `prefer-shorthand-properties` rule

‎README.md‎

Lines changed: 110 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,110 @@
1-
<!-- This file is built by build-readme.js. Do not edit it directly; edit README.md.template instead. -->
2-
<br>
3-
<div align="center">
4-
5-
<p align="center">
6-
<a href="https://panda-css.com">
7-
<picture>
8-
<img alt="Panda CSS" src="https://github.com/chakra-ui/eslint-plugin-panda/raw/main/.github/banner.png" width="100%">
9-
</picture>
10-
</a>
11-
</p>
12-
<p align="center">ESLint plugin for Panda CSS</p>
13-
14-
<p align="center">
15-
<a aria-label="Github Actions" href="https://github.com/chakra-ui/eslint-plugin-panda/actions/workflows/quality.yml">
16-
<picture>
17-
<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">
18-
<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">
19-
<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">
20-
</picture>
21-
</a>
22-
</p>
23-
24-
</div>
25-
26-
## Getting Started
27-
28-
### Installation
29-
30-
```bash
31-
pnpm add -D @pandacss/eslint-plugin
32-
```
33-
34-
### Usage
35-
36-
Add `@pandacss/eslint-plugin` to the plugins section of your `.eslintrc` configuration file. You can omit the
37-
`/eslint-plugin` suffx:
38-
39-
```json
40-
{
41-
"plugins": ["@pandacss"]
42-
}
43-
```
44-
45-
Then configure the rules you want to use under the rules section.
46-
47-
```json
48-
{
49-
"rules": {
50-
"@pandacss/no-debug": "error"
51-
}
52-
}
53-
```
54-
55-
You can also enable the `recommended` rules in extends:
56-
57-
```diff
58-
{
59-
- "plugins": ["@pandacss"]
60-
+ "extends": ["plugin:@pandacss/recommended"]
61-
}
62-
```
63-
64-
Or enable all rules in extends:
65-
66-
```diff
67-
{
68-
- "plugins": ["@pandacss"]
69-
+ "extends": ["plugin:@pandacss/all"]
70-
}
71-
```
72-
73-
> [!WARNING]
74-
> This is not recommended. You should only enable the rules you need.
75-
76-
## Rules
77-
78-
Where rules are included in the configs `recommended`, or `all` it is indicated below.
79-
80-
* [`@pandacss/file-not-included`](docs/rules/file-not-included.md) `all`, `recommended`
81-
* [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md) `all`, `recommended`
82-
* [`@pandacss/no-debug`](docs/rules/no-debug.md) `all`, `recommended`
83-
* [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md) `all`, `recommended`
84-
* [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md) `all`
85-
* [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) `all`
86-
* [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md) `all`, `recommended`
87-
* [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md) `all`, `recommended`
88-
* [`@pandacss/no-shorthand-prop`](docs/rules/no-shorthand-prop.md) `all`
89-
* [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md) `all`
90-
* [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) `all`
91-
92-
## Settings
93-
94-
### `configPath`
95-
96-
You can tell `eslint` to use a custom panda config file by setting the `configPath` option in your `.eslintrc.js` file.
97-
98-
By default we find the nearest panda config to the linted file.
99-
100-
```js filename=".eslintrc.(c)js"
101-
const path = require('path')
102-
103-
module.exports = {
104-
plugins: ['@pandacss'],
105-
settings: {
106-
'@pandacss/configPath': path.join('PATH-TO/panda.config.js'),
107-
},
108-
}
109-
```
1+
<!-- This file is built by build-readme.js. Do not edit it directly; edit README.md.template instead. -->
2+
<br>
3+
<div align="center">
4+
5+
<p align="center">
6+
<a href="https://panda-css.com">
7+
<picture>
8+
<img alt="Panda CSS" src="https://github.com/chakra-ui/eslint-plugin-panda/raw/main/.github/banner.png" width="100%">
9+
</picture>
10+
</a>
11+
</p>
12+
<p align="center">ESLint plugin for Panda CSS</p>
13+
14+
<p align="center">
15+
<a aria-label="Github Actions" href="https://github.com/chakra-ui/eslint-plugin-panda/actions/workflows/quality.yml">
16+
<picture>
17+
<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">
18+
<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">
19+
<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">
20+
</picture>
21+
</a>
22+
</p>
23+
24+
</div>
25+
26+
## Getting Started
27+
28+
### Installation
29+
30+
```bash
31+
pnpm add -D @pandacss/eslint-plugin
32+
```
33+
34+
### Usage
35+
36+
Add `@pandacss/eslint-plugin` to the plugins section of your `.eslintrc` configuration file. You can omit the
37+
`/eslint-plugin` suffx:
38+
39+
```json
40+
{
41+
"plugins": ["@pandacss"]
42+
}
43+
```
44+
45+
Then configure the rules you want to use under the rules section.
46+
47+
```json
48+
{
49+
"rules": {
50+
"@pandacss/no-debug": "error"
51+
}
52+
}
53+
```
54+
55+
You can also enable the `recommended` rules in extends:
56+
57+
```diff
58+
{
59+
- "plugins": ["@pandacss"]
60+
+ "extends": ["plugin:@pandacss/recommended"]
61+
}
62+
```
63+
64+
Or enable all rules in extends:
65+
66+
```diff
67+
{
68+
- "plugins": ["@pandacss"]
69+
+ "extends": ["plugin:@pandacss/all"]
70+
}
71+
```
72+
73+
> [!WARNING]
74+
> This is not recommended. You should only enable the rules you need.
75+
76+
## Rules
77+
78+
Where rules are included in the configs `recommended`, or `all` it is indicated below.
79+
80+
- [`@pandacss/file-not-included`](docs/rules/file-not-included.md) `all`, `recommended`
81+
- [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md) `all`, `recommended`
82+
- [`@pandacss/no-debug`](docs/rules/no-debug.md) `all`, `recommended`
83+
- [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md) `all`, `recommended`
84+
- [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md) `all`
85+
- [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) `all`
86+
- [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md) `all`, `recommended`
87+
- [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md) `all`, `recommended`
88+
- [`@pandacss/prefer-longhand-properties`](docs/rules/prefer-longhand-properties.md) `all`
89+
- [`@pandacss/prefer-shorthand-properties`](docs/rules/prefer-shorthand-properties.md) `all`
90+
- [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md) `all`
91+
- [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) `all`
92+
93+
## Settings
94+
95+
### `configPath`
96+
97+
You can tell `eslint` to use a custom panda config file by setting the `configPath` option in your `.eslintrc.js` file.
98+
99+
By default we find the nearest panda config to the linted file.
100+
101+
```js filename=".eslintrc.(c)js"
102+
const path = require('path')
103+
104+
module.exports = {
105+
plugins: ['@pandacss'],
106+
settings: {
107+
'@pandacss/configPath': path.join('PATH-TO/panda.config.js'),
108+
},
109+
}
110+
```

‎docs/rules/no-shorthand-prop.md‎ renamed to ‎docs/rules/prefer-longhand-properties.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
22

3-
# no-shorthand-prop
3+
# prefer-longhand-properties
44

5-
Discourage the use of shorthand properties and promote the preference for longhand CSS properties in the codebase.
5+
Discourage the use of shorthand properties and promote the preference for longhand properties in the codebase.
66

77
📋 This rule is enabled in `plugin:@pandacss/all`.
88

@@ -56,5 +56,5 @@ function App(){
5656

5757
## Resources
5858

59-
* [Rule source](/plugin/src/rules/no-shorthand-prop.ts)
60-
* [Test source](/tests/no-shorthand-prop.test.ts)
59+
* [Rule source](/plugin/src/rules/prefer-longhand-properties.ts)
60+
* [Test source](/tests/prefer-longhand-properties.test.ts)

‎docs/rules/prefer-shorthand-properties.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
2+
3+
# prefer-shorthand-properties
4+
5+
Discourage the use of longhand properties and promote the preference for shorthand properties in the codebase.
6+
7+
📋 This rule is enabled in `plugin:@pandacss/all`.
8+
9+
## Rule details
10+
11+
❌ Examples of **incorrect** code:
12+
```js
13+
import { css } from './panda/css';
14+
15+
const styles = css({ marginLeft: '4' });
16+
```
17+
```js
18+
19+
import { css } from './panda/css';
20+
21+
function App(){
22+
return <div className={css({ background: 'red.100' })} />;
23+
};
24+
```
25+
```js
26+
27+
import { Circle } from './panda/jsx';
28+
29+
function App(){
30+
return <Circle _hover={{ position: 'absolute' }} />;
31+
}
32+
```
33+
34+
✔️ Examples of **correct** code:
35+
```js
36+
import { css } from './panda/css';
37+
38+
const styles = css({ ml: '4' });
39+
```
40+
```js
41+
42+
import { css } from './panda/css';
43+
44+
function App(){
45+
return <div className={css({ bg: 'red.100' })} />;
46+
};
47+
```
48+
```js
49+
50+
import { Circle } from './panda/jsx';
51+
52+
function App(){
53+
return <Circle _hover={{ pos: 'absolute' }} />;
54+
}
55+
```
56+
57+
## Resources
58+
59+
* [Rule source](/plugin/src/rules/prefer-shorthand-properties.ts)
60+
* [Test source](/tests/prefer-shorthand-properties.test.ts)

‎plugin/src/rules/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import noHardCodedColor, { RULE_NAME as NoHardCodedColor } from './no-hardcoded-
77
import noInvalidTokenPaths, { RULE_NAME as NoInvalidTokenPaths } from './no-invalid-token-paths'
88
import noPropertyRenaming, { RULE_NAME as NoPropertyRenaming } from './no-property-renaming'
99
import preferLonghandProperties, { RULE_NAME as PreferLonghandProperties } from './prefer-longhand-properties'
10+
import preferShorthandProperties, { RULE_NAME as PreferShorthandProperties } from './prefer-shorthand-properties'
1011
import noUnsafeTokenUsage, { RULE_NAME as NoUnsafeTokenUsage } from './no-unsafe-token-fn-usage'
1112
import preferAtomicProperties, { RULE_NAME as PreferAtomicProperties } from './prefer-atomic-properties'
1213

@@ -20,6 +21,7 @@ export const rules = {
2021
[NoInvalidTokenPaths]: noInvalidTokenPaths,
2122
[NoPropertyRenaming]: noPropertyRenaming,
2223
[PreferLonghandProperties]: preferLonghandProperties,
24+
[PreferShorthandProperties]: preferShorthandProperties,
2325
[NoUnsafeTokenUsage]: noUnsafeTokenUsage,
2426
[PreferAtomicProperties]: preferAtomicProperties,
2527
} as any

‎plugin/src/rules/prefer-atomic-properties.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isPandaAttribute, isPandaProp, isValidProperty, resolveShorthand } from '../utils/helpers'
1+
import { isPandaAttribute, isPandaProp, isValidProperty, resolveLonghand } from '../utils/helpers'
22
import { type Rule, createRule } from '../utils'
33
import { compositeProperties } from '../utils/composite-properties'
44
import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
@@ -22,7 +22,7 @@ const rule: Rule = createRule({
2222
const resolveCompositeProperty = (name: string) => {
2323
if (Object.hasOwn(compositeProperties, name)) return name
2424

25-
const longhand = resolveShorthand(name, context)
25+
const longhand = resolveLonghand(name, context) ?? name
2626
if (isValidProperty(longhand, context) && Object.hasOwn(compositeProperties, longhand)) return longhand
2727
}
2828

‎plugin/src/rules/prefer-longhand-properties.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { isPandaAttribute, isPandaProp, resolveLonghand } from '../utils/helpers
22
import { type Rule, createRule } from '../utils'
33
import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
44

5-
export const RULE_NAME = 'no-shorthand-prop'
5+
export const RULE_NAME = 'prefer-longhand-properties'
66

77
const rule: Rule = createRule({
88
name: RULE_NAME,
99
meta: {
1010
docs: {
1111
description:
12-
'Discourage the use of shorthand properties and promote the preference for longhand CSS properties in the codebase.',
12+
'Discourage the use of shorthand properties and promote the preference for longhand properties in the codebase.',
1313
},
1414
messages: {
1515
longhand: 'Use longhand property of `{{shorthand}}` instead. Prefer `{{longhand}}`',
@@ -31,7 +31,7 @@ const rule: Rule = createRule({
3131

3232
return context.report({
3333
node,
34-
messageId: 'longhand' as const,
34+
messageId: 'longhand',
3535
data,
3636
suggest: [
3737
{

0 commit comments

Comments
 (0)