From 22cc4ac2b45a974334cd085ed7d5eb6d35fd7f5b Mon Sep 17 00:00:00 2001 From: anubra266 Date: Tue, 20 Feb 2024 17:14:02 -0600 Subject: [PATCH] Add `noOpacity` option to `no-hardcoded-color` rule --- .changeset/quiet-pumas-tap.md | 5 +++++ README.md | 5 +++-- README.md.template | 1 + docs/rules/no-hardcoded-color.md | 7 +++++++ docs/templates/optionsAndSettings.ejs | 2 ++ plugin/src/rules/no-hardcoded-color.ts | 23 ++++++++++++++++++++--- plugin/tests/no-hardcoded-color.test.ts | 22 ++++++++++++++++++---- sandbox/.eslintrc.cjs | 2 +- 8 files changed, 57 insertions(+), 10 deletions(-) create mode 100644 .changeset/quiet-pumas-tap.md diff --git a/.changeset/quiet-pumas-tap.md b/.changeset/quiet-pumas-tap.md new file mode 100644 index 0000000..31666eb --- /dev/null +++ b/.changeset/quiet-pumas-tap.md @@ -0,0 +1,5 @@ +--- +"@pandacss/eslint-plugin": patch +--- + +Add `noOpacity` option to `no-hardcoded-color` rule diff --git a/README.md b/README.md index b66b7ca..cb75bf8 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,8 @@ Or enable all rules in extends: ## Rules -Where rules are included in the configs `recommended`, or `all` it is indicated below. +Rules with ⚙️ have options. Click on the rule to see the options. Where rules are included in the configs `recommended`, +or `all` it is indicated below. | Rule | `recommended` | | ---------------------------------------------------------------------------------------- | ------------- | @@ -84,7 +85,7 @@ Where rules are included in the configs `recommended`, or `all` it is indicated | [`@pandacss/no-debug`](docs/rules/no-debug.md) | ✔️ | | [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md) | ✔️ | | [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md) | | -| [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) | | +| [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) ⚙️ | | | [`@pandacss/no-important`](docs/rules/no-important.md) | | | [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md) | ✔️ | | [`@pandacss/no-invalid-nesting`](docs/rules/no-invalid-nesting.md) | ✔️ | diff --git a/README.md.template b/README.md.template index 838ab1e..a391f76 100644 --- a/README.md.template +++ b/README.md.template @@ -74,6 +74,7 @@ Or enable all rules in extends: ## Rules +Rules with ⚙️ have options. Click on the rule to see the options. Where rules are included in the configs `recommended`, or `all` it is indicated below. diff --git a/docs/rules/no-hardcoded-color.md b/docs/rules/no-hardcoded-color.md index 16ff948..e7450db 100644 --- a/docs/rules/no-hardcoded-color.md +++ b/docs/rules/no-hardcoded-color.md @@ -60,6 +60,13 @@ function App(){ } ``` +❌ Examples of **incorrect** code with `[{"noOpacity":true}]` options: +```js +import { css } from './panda/css'; + +const styles = css({ color: 'red.100/30' }); +``` + ## Resources * [Rule source](/plugin/src/rules/no-hardcoded-color.ts) diff --git a/docs/templates/optionsAndSettings.ejs b/docs/templates/optionsAndSettings.ejs index 467f6e0..485319a 100644 --- a/docs/templates/optionsAndSettings.ejs +++ b/docs/templates/optionsAndSettings.ejs @@ -1,4 +1,6 @@ <% if ( data.options || data.settings ) { _%> + with<% if ( data.options ) { %> `<%- data.options %>` options<% } _%> +<% if ( data.settings ) { %><% if ( data.options ) { %> and<% } %> `<%- data.settings %>` settings<% } _%> <% } _%> <% if ( data.filename ) { _%> for a file named `<%- data.filename %>`<% } %> \ No newline at end of file diff --git a/plugin/src/rules/no-hardcoded-color.ts b/plugin/src/rules/no-hardcoded-color.ts index 001a68a..8ec0411 100644 --- a/plugin/src/rules/no-hardcoded-color.ts +++ b/plugin/src/rules/no-hardcoded-color.ts @@ -14,10 +14,25 @@ const rule: Rule = createRule({ invalidColor: '`{{color}}` is not a valid color token.', }, type: 'suggestion', - schema: [], + schema: [ + { + type: 'object', + properties: { + noOpacity: { + type: 'boolean', + }, + }, + }, + ], }, - defaultOptions: [], + defaultOptions: [ + { + noOpacity: false, + }, + ], create(context) { + const noOpacity = context.options[0]?.noOpacity + const isTokenFn = (value?: string) => { if (!value) return false const tokens = extractTokens(value) @@ -27,7 +42,9 @@ const rule: Rule = createRule({ const testColorToken = (value?: string) => { if (!value) return false const color = value?.split('/') - return isColorToken(color[0], context) + const isOpacityToken = !!color[1]?.length + const isValidToken = isColorToken(color[0], context) + return noOpacity ? isValidToken && !isOpacityToken : isValidToken } return { diff --git a/plugin/tests/no-hardcoded-color.test.ts b/plugin/tests/no-hardcoded-color.test.ts index dbc8b2b..9842097 100644 --- a/plugin/tests/no-hardcoded-color.test.ts +++ b/plugin/tests/no-hardcoded-color.test.ts @@ -10,6 +10,7 @@ import { css } from './panda/css'; const styles = css({ color: 'red.100' })`, }, + { code: javascript` import { css } from './panda/css'; @@ -44,6 +45,14 @@ import { css } from './panda/css'; const styles = css({ color: '#FEE2E2' })`, }, + { + options: [{ noOpacity: true }], + code: javascript` +import { css } from './panda/css'; + +const styles = css({ color: 'red.100/30' })`, + }, + { code: javascript` import { css } from './panda/css'; @@ -67,8 +76,13 @@ tester.run(RULE_NAME, rule, { valid: valids.map(({ code }) => ({ code, })), - invalid: invalids.map(({ code }) => ({ - code, - errors: 1, - })), + invalid: invalids.map(({ code, options }) => + options + ? { + code, + options, + errors: 1, + } + : { code, errors: 1 }, + ), }) diff --git a/sandbox/.eslintrc.cjs b/sandbox/.eslintrc.cjs index 6db808c..eacc954 100644 --- a/sandbox/.eslintrc.cjs +++ b/sandbox/.eslintrc.cjs @@ -17,6 +17,6 @@ module.exports = { //* Panda rules overrides '@pandacss/no-debug': 'off', '@pandacss/no-margin-properties': 'warn', - '@pandacss/no-hardcoded-color': 'error', + '@pandacss/no-hardcoded-color': ['error', { noOpacity: true }], }, }