From 3005534fcdb5ee4ca736510f851a0ec20e1d625a Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 13 May 2024 11:52:13 -0700 Subject: [PATCH 1/4] cleanup --- .../rules/new-color-css-vars-have-fallback.md | 25 -- docs/rules/new-css-color-vars.md | 4 +- src/configs/recommended.js | 1 - src/index.js | 1 - src/rules/new-color-css-vars-have-fallback.js | 87 ----- src/rules/new-color-css-vars.js | 4 +- src/utils/new-color-css-vars-map.json | 326 ------------------ 7 files changed, 4 insertions(+), 444 deletions(-) delete mode 100644 docs/rules/new-color-css-vars-have-fallback.md delete mode 100644 src/rules/new-color-css-vars-have-fallback.js delete mode 100644 src/utils/new-color-css-vars-map.json diff --git a/docs/rules/new-color-css-vars-have-fallback.md b/docs/rules/new-color-css-vars-have-fallback.md deleted file mode 100644 index ad976430..00000000 --- a/docs/rules/new-color-css-vars-have-fallback.md +++ /dev/null @@ -1,25 +0,0 @@ -## Ensure new Primitive v8 color CSS vars have a fallback - -This rule is temporary as we begin testing v8 color tokens behind a feature flag. If a color token is used without a fallback, the color will only render if the feature flag is enabled. This rule is an extra safety net to ensure we don't accidentally ship code that relies on the feature flag. - -## Rule Details - -This rule refers to a JSON file that lists all the new color tokens - -```json -["--fgColor-default", "--fgColor-muted", "--fgColor-onEmphasis"] -``` - -If it finds that one of these tokens is used without a fallback, it will throw an error. - -👎 Examples of **incorrect** code for this rule - -```jsx - -``` - -👍 Examples of **correct** code for this rule: - -```jsx - -``` diff --git a/docs/rules/new-css-color-vars.md b/docs/rules/new-css-color-vars.md index 41766442..e877e25b 100644 --- a/docs/rules/new-css-color-vars.md +++ b/docs/rules/new-css-color-vars.md @@ -2,7 +2,7 @@ CSS variables are allowed within the `sx` prop in Primer React components. However, the legacy color CSS variables are deprecated in favor of the new CSS variables introduced in Primitives v8. This rule will warn you if you are using the -deprecated color CSS variables in the `sx` prop, and autofix it including a fallback to the old value. +deprecated color CSS variables in the `sx` prop, and autofix it. ## Rule Details @@ -36,5 +36,5 @@ one based on the property. We only check `sx` because `stylelint` is used to lin 👍 Examples of **correct** code for this rule: ```jsx - + ``` diff --git a/src/configs/recommended.js b/src/configs/recommended.js index 887941fc..7e4676fc 100644 --- a/src/configs/recommended.js +++ b/src/configs/recommended.js @@ -15,7 +15,6 @@ module.exports = { 'primer-react/a11y-tooltip-interactive-trigger': 'error', 'primer-react/new-color-css-vars': 'error', 'primer-react/a11y-explicit-heading': 'error', - 'primer-react/new-color-css-vars-have-fallback': 'error', 'primer-react/no-deprecated-props': 'warn', }, settings: { diff --git a/src/index.js b/src/index.js index f82e6749..2b070e60 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,6 @@ module.exports = { 'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'), 'new-color-css-vars': require('./rules/new-color-css-vars'), 'a11y-explicit-heading': require('./rules/a11y-explicit-heading'), - 'new-color-css-vars-have-fallback': require('./rules/new-color-css-vars-have-fallback'), 'no-deprecated-props': require('./rules/no-deprecated-props'), }, configs: { diff --git a/src/rules/new-color-css-vars-have-fallback.js b/src/rules/new-color-css-vars-have-fallback.js deleted file mode 100644 index 7c71eecb..00000000 --- a/src/rules/new-color-css-vars-have-fallback.js +++ /dev/null @@ -1,87 +0,0 @@ -const cssVars = require('../utils/new-color-css-vars-map') - -const reportError = (propertyName, valueNode, context) => { - // performance optimisation: exit early - if (valueNode.type !== 'Literal' && valueNode.type !== 'TemplateElement') return - // get property value - const value = valueNode.type === 'Literal' ? valueNode.value : valueNode.value.cooked - // return if value is not a string - if (typeof value !== 'string') return - // return if value does not include variable - if (!value.includes('var(')) return - - const varRegex = /var\([^(),)]+\)/g - - const match = value.match(varRegex) - // return if no matches - if (!match) return - const vars = match.flatMap(match => - match - .slice(4, -1) - .trim() - .split(/\s*,\s*/g), - ) - for (const cssVar of vars) { - // return if no repalcement exists - if (!cssVars?.includes(cssVar)) return - // report the error - context.report({ - node: valueNode, - message: `Expected a fallback value for CSS variable ${cssVar}. New color variables fallbacks, check primer.style/primitives to find the correct value.`, - }) - } -} - -const reportOnObject = (node, context) => { - const propertyName = node.key.name - if (node.value?.type === 'Literal') { - reportError(propertyName, node.value, context) - } else if (node.value?.type === 'ConditionalExpression') { - reportError(propertyName, node.value.consequent, context) - reportError(propertyName, node.value.alternate, context) - } -} - -const reportOnProperty = (node, context) => { - const propertyName = node.name.name - if (node.value?.type === 'Literal') { - reportError(propertyName, node.value, context) - } else if (node.value?.type === 'JSXExpressionContainer' && node.value.expression?.type === 'ConditionalExpression') { - reportError(propertyName, node.value.expression.consequent, context) - reportError(propertyName, node.value.expression.alternate, context) - } -} - -const reportOnValue = (node, context) => { - if (node?.type === 'Literal') { - reportError(undefined, node, context) - } else if (node?.type === 'JSXExpressionContainer' && node.expression?.type === 'ConditionalExpression') { - reportError(undefined, node.value.expression.consequent, context) - reportError(undefined, node.value.expression.alternate, context) - } -} - -const reportOnTemplateElement = (node, context) => { - reportError(undefined, node, context) -} - -module.exports = { - meta: { - type: 'suggestion', - }, - /** @param {import('eslint').Rule.RuleContext} context */ - create(context) { - return { - // sx OR style property on elements - ['JSXAttribute:matches([name.name=sx], [name.name=style]) ObjectExpression Property']: node => - reportOnObject(node, context), - // property on element like stroke or fill - ['JSXAttribute[name.name!=sx][name.name!=style]']: node => reportOnProperty(node, context), - // variable that is a value - [':matches(VariableDeclarator, ReturnStatement) > Literal']: node => reportOnValue(node, context), - // variable that is a value - [':matches(VariableDeclarator, ReturnStatement) > TemplateElement']: node => - reportOnTemplateElement(node, context), - } - }, -} diff --git a/src/rules/new-color-css-vars.js b/src/rules/new-color-css-vars.js index 9efcd429..2332a187 100644 --- a/src/rules/new-color-css-vars.js +++ b/src/rules/new-color-css-vars.js @@ -33,10 +33,10 @@ const reportError = (propertyName, valueNode, context, suggestFix = true) => { // report the error context.report({ node: valueNode, - message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement}, var(${cssVar}))`, + message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement})`, fix: suggestFix ? fixer => { - const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}, var(${cssVar})`) + const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}`) return fixer.replaceText(valueNode, valueNode.type === 'Literal' ? `'${fixedString}'` : fixedString) } : undefined, diff --git a/src/utils/new-color-css-vars-map.json b/src/utils/new-color-css-vars-map.json deleted file mode 100644 index 32ab93a9..00000000 --- a/src/utils/new-color-css-vars-map.json +++ /dev/null @@ -1,326 +0,0 @@ -[ - "--topicTag-borderColor", - "--highlight-neutral-bgColor", - "--page-header-bgColor", - "--diffBlob-addition-fgColor-text", - "--diffBlob-addition-fgColor-num", - "--diffBlob-addition-bgColor-num", - "--diffBlob-addition-bgColor-line", - "--diffBlob-addition-bgColor-word", - "--diffBlob-deletion-fgColor-text", - "--diffBlob-deletion-fgColor-num", - "--diffBlob-deletion-bgColor-num", - "--diffBlob-deletion-bgColor-line", - "--diffBlob-deletion-bgColor-word", - "--diffBlob-hunk-bgColor-num", - "--diffBlob-expander-iconColor", - "--codeMirror-fgColor", - "--codeMirror-bgColor", - "--codeMirror-gutters-bgColor", - "--codeMirror-gutterMarker-fgColor-default", - "--codeMirror-gutterMarker-fgColor-muted", - "--codeMirror-lineNumber-fgColor", - "--codeMirror-cursor-fgColor", - "--codeMirror-selection-bgColor", - "--codeMirror-activeline-bgColor", - "--codeMirror-matchingBracket-fgColor", - "--codeMirror-lines-bgColor", - "--codeMirror-syntax-fgColor-comment", - "--codeMirror-syntax-fgColor-constant", - "--codeMirror-syntax-fgColor-entity", - "--codeMirror-syntax-fgColor-keyword", - "--codeMirror-syntax-fgColor-storage", - "--codeMirror-syntax-fgColor-string", - "--codeMirror-syntax-fgColor-support", - "--codeMirror-syntax-fgColor-variable", - "--header-fgColor-default", - "--header-fgColor-logo", - "--header-bgColor", - "--header-borderColor-divider", - "--headerSearch-bgColor", - "--headerSearch-borderColor", - "--avatar-bgColor", - "--avatar-borderColor", - "--avatar-shadow", - "--avatarStack-fade-bgColor-default", - "--avatarStack-fade-bgColor-muted", - "--control-bgColor-rest", - "--control-bgColor-hover", - "--control-bgColor-active", - "--control-bgColor-disabled", - "--control-bgColor-selected", - "--control-fgColor-rest", - "--control-fgColor-placeholder", - "--control-fgColor-disabled", - "--control-borderColor-rest", - "--control-borderColor-emphasis", - "--control-borderColor-disabled", - "--control-borderColor-selected", - "--control-borderColor-success", - "--control-borderColor-danger", - "--control-borderColor-warning", - "--control-iconColor-rest", - "--control-transparent-bgColor-rest", - "--control-transparent-bgColor-hover", - "--control-transparent-bgColor-active", - "--control-transparent-bgColor-disabled", - "--control-transparent-bgColor-selected", - "--control-transparent-borderColor-rest", - "--control-transparent-borderColor-hover", - "--control-transparent-borderColor-active", - "--control-danger-fgColor-rest", - "--control-danger-fgColor-hover", - "--control-danger-bgColor-hover", - "--control-danger-bgColor-active", - "--control-checked-bgColor-rest", - "--control-checked-bgColor-hover", - "--control-checked-bgColor-active", - "--control-checked-bgColor-disabled", - "--control-checked-fgColor-rest", - "--control-checked-fgColor-disabled", - "--control-checked-borderColor-rest", - "--control-checked-borderColor-hover", - "--control-checked-borderColor-active", - "--control-checked-borderColor-disabled", - "--controlTrack-bgColor-rest", - "--controlTrack-bgColor-hover", - "--controlTrack-bgColor-active", - "--controlTrack-bgColor-disabled", - "--controlTrack-fgColor-rest", - "--controlTrack-fgColor-disabled", - "--controlTrack-borderColor-rest", - "--controlTrack-borderColor-disabled", - "--controlKnob-bgColor-rest", - "--controlKnob-bgColor-disabled", - "--controlKnob-bgColor-checked", - "--controlKnob-borderColor-rest", - "--controlKnob-borderColor-disabled", - "--controlKnob-borderColor-checked", - "--counter-borderColor", - "--button-default-fgColor-rest", - "--button-default-bgColor-rest", - "--button-default-bgColor-hover", - "--button-default-bgColor-active", - "--button-default-bgColor-selected", - "--button-default-bgColor-disabled", - "--button-default-borderColor-rest", - "--button-default-borderColor-hover", - "--button-default-borderColor-active", - "--button-default-borderColor-disabled", - "--button-default-shadow-resting", - "--button-primary-fgColor-rest", - "--button-primary-fgColor-disabled", - "--button-primary-iconColor-rest", - "--button-primary-bgColor-rest", - "--button-primary-bgColor-hover", - "--button-primary-bgColor-active", - "--button-primary-bgColor-disabled", - "--button-primary-borderColor-rest", - "--button-primary-borderColor-hover", - "--button-primary-borderColor-active", - "--button-primary-borderColor-disabled", - "--button-primary-shadow-selected", - "--button-invisible-fgColor-rest", - "--button-invisible-fgColor-hover", - "--button-invisible-fgColor-disabled", - "--button-invisible-iconColor-rest", - "--button-invisible-iconColor-hover", - "--button-invisible-iconColor-disabled", - "--button-invisible-bgColor-rest", - "--button-invisible-bgColor-hover", - "--button-invisible-bgColor-active", - "--button-invisible-bgColor-disabled", - "--button-invisible-borderColor-rest", - "--button-invisible-borderColor-hover", - "--button-invisible-borderColor-disabled", - "--button-outline-fgColor-rest", - "--button-outline-fgColor-hover", - "--button-outline-fgColor-active", - "--button-outline-fgColor-disabled", - "--button-outline-bgColor-rest", - "--button-outline-bgColor-hover", - "--button-outline-bgColor-active", - "--button-outline-bgColor-disabled", - "--button-outline-borderColor-hover", - "--button-outline-borderColor-selected", - "--button-outline-shadow-selected", - "--button-danger-fgColor-rest", - "--button-danger-fgColor-hover", - "--button-danger-fgColor-active", - "--button-danger-fgColor-disabled", - "--button-danger-iconColor-rest", - "--button-danger-iconColor-hover", - "--button-danger-bgColor-rest", - "--button-danger-bgColor-hover", - "--button-danger-bgColor-active", - "--button-danger-bgColor-disabled", - "--button-danger-borderColor-rest", - "--button-danger-borderColor-hover", - "--button-danger-borderColor-active", - "--button-danger-shadow-selected", - "--button-inactive-fgColor-rest", - "--button-inactive-bgColor-rest", - "--buttonCounter-default-bgColor-rest", - "--buttonCounter-invisible-bgColor-rest", - "--buttonCounter-primary-bgColor-rest", - "--buttonCounter-outline-bgColor-rest", - "--buttonCounter-outline-bgColor-hover", - "--buttonCounter-outline-bgColor-disabled", - "--buttonCounter-outline-fgColor-rest", - "--buttonCounter-outline-fgColor-hover", - "--buttonCounter-outline-fgColor-disabled", - "--buttonCounter-danger-bgColor-hover", - "--buttonCounter-danger-bgColor-disabled", - "--buttonCounter-danger-bgColor-rest", - "--buttonCounter-danger-fgColor-rest", - "--buttonCounter-danger-fgColor-hover", - "--buttonCounter-danger-fgColor-disabled", - "--focus-outlineColor", - "--menu-bgColor-active", - "--overlay-bgColor", - "--overlay-backdrop-bgColor", - "--selectMenu-borderColor", - "--selectMenu-bgColor-active", - "--sideNav-bgColor-selected", - "--skeletonLoader-bgColor", - "--timelineBadge-bgColor", - "--treeViewItem-leadingVisual-iconColor-rest", - "--underlineNav-borderColor-active", - "--underlineNav-borderColor-hover", - "--underlineNav-iconColor-rest", - "--fgColor-default", - "--fgColor-muted", - "--fgColor-onEmphasis", - "--fgColor-onInverse", - "--fgColor-disabled", - "--fgColor-link", - "--fgColor-link-onInverse", - "--fgColor-neutral", - "--fgColor-neutral-onInverse", - "--fgColor-accent", - "--fgColor-accent-onInverse", - "--fgColor-success", - "--fgColor-success-onInverse", - "--fgColor-attention", - "--fgColor-attention-onInverse", - "--fgColor-severe", - "--fgColor-severe-onInverse", - "--fgColor-danger", - "--fgColor-danger-onInverse", - "--fgColor-open", - "--fgColor-open-onInverse", - "--fgColor-closed", - "--fgColor-closed-onInverse", - "--fgColor-done", - "--fgColor-done-onInverse", - "--fgColor-sponsors", - "--fgColor-sponsors-onInverse", - "--bgColor-default", - "--bgColor-muted", - "--bgColor-inset", - "--bgColor-emphasis", - "--bgColor-inverse", - "--bgColor-disabled", - "--bgColor-transparent", - "--bgColor-neutral-muted", - "--bgColor-neutral-emphasis", - "--bgColor-accent-muted", - "--bgColor-accent-emphasis", - "--bgColor-success-muted", - "--bgColor-success-emphasis", - "--bgColor-attention-muted", - "--bgColor-attention-emphasis", - "--bgColor-severe-muted", - "--bgColor-severe-emphasis", - "--bgColor-danger-muted", - "--bgColor-danger-emphasis", - "--bgColor-open-muted", - "--bgColor-open-emphasis", - "--bgColor-closed-muted", - "--bgColor-closed-emphasis", - "--bgColor-done-muted", - "--bgColor-done-emphasis", - "--bgColor-sponsors-muted", - "--bgColor-sponsors-emphasis", - "--borderColor-default", - "--borderColor-muted", - "--borderColor-emphasis", - "--borderColor-disabled", - "--borderColor-transparent", - "--borderColor-neutral-muted", - "--borderColor-neutral-emphasis", - "--borderColor-accent-muted", - "--borderColor-accent-emphasis", - "--borderColor-success-muted", - "--borderColor-success-emphasis", - "--borderColor-attention-muted", - "--borderColor-attention-emphasis", - "--borderColor-severe-muted", - "--borderColor-severe-emphasis", - "--borderColor-danger-muted", - "--borderColor-danger-emphasis", - "--borderColor-open-muted", - "--borderColor-open-emphasis", - "--borderColor-closed-muted", - "--borderColor-closed-emphasis", - "--borderColor-done-muted", - "--borderColor-done-emphasis", - "--borderColor-sponsors-muted", - "--borderColor-sponsors-emphasis", - "--color-ansi-black", - "--color-ansi-black-bright", - "--color-ansi-white", - "--color-ansi-white-bright", - "--color-ansi-gray", - "--color-ansi-red", - "--color-ansi-red-bright", - "--color-ansi-green", - "--color-ansi-green-bright", - "--color-ansi-yellow", - "--color-ansi-yellow-bright", - "--color-ansi-blue", - "--color-ansi-blue-bright", - "--color-ansi-magenta", - "--color-ansi-magenta-bright", - "--color-ansi-cyan", - "--color-ansi-cyan-bright", - "--color-prettylights-syntax-comment", - "--color-prettylights-syntax-constant", - "--color-prettylights-syntax-constant-other-reference-link", - "--color-prettylights-syntax-entity", - "--color-prettylights-syntax-storage-modifier-import", - "--color-prettylights-syntax-entity-tag", - "--color-prettylights-syntax-keyword", - "--color-prettylights-syntax-string", - "--color-prettylights-syntax-variable", - "--color-prettylights-syntax-brackethighlighter-unmatched", - "--color-prettylights-syntax-brackethighlighter-angle", - "--color-prettylights-syntax-invalid-illegal-text", - "--color-prettylights-syntax-invalid-illegal-bg", - "--color-prettylights-syntax-carriage-return-text", - "--color-prettylights-syntax-carriage-return-bg", - "--color-prettylights-syntax-string-regexp", - "--color-prettylights-syntax-markup-list", - "--color-prettylights-syntax-markup-heading", - "--color-prettylights-syntax-markup-italic", - "--color-prettylights-syntax-markup-bold", - "--color-prettylights-syntax-markup-deleted-text", - "--color-prettylights-syntax-markup-deleted-bg", - "--color-prettylights-syntax-markup-inserted-text", - "--color-prettylights-syntax-markup-inserted-bg", - "--color-prettylights-syntax-markup-changed-text", - "--color-prettylights-syntax-markup-changed-bg", - "--color-prettylights-syntax-markup-ignored-text", - "--color-prettylights-syntax-markup-ignored-bg", - "--color-prettylights-syntax-meta-diff-range", - "--color-prettylights-syntax-sublimelinter-gutter-mark", - "--shadow-inset", - "--shadow-resting-xsmall", - "--shadow-resting-small", - "--shadow-resting-medium", - "--shadow-floating-small", - "--shadow-floating-medium", - "--shadow-floating-large", - "--shadow-floating-xlarge", - "--outline-focus" -] From 540327494a5f055155e47b313f1d0d326c6b0aba Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 13 May 2024 11:53:23 -0700 Subject: [PATCH 2/4] Create smooth-penguins-exercise.md --- .changeset/smooth-penguins-exercise.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/smooth-penguins-exercise.md diff --git a/.changeset/smooth-penguins-exercise.md b/.changeset/smooth-penguins-exercise.md new file mode 100644 index 00000000..a7e303fb --- /dev/null +++ b/.changeset/smooth-penguins-exercise.md @@ -0,0 +1,5 @@ +--- +"eslint-plugin-primer-react": major +--- + +[Breaking] Remove `new-color-css-vars-have-fallback` From a973c693cf97488080b107679fe16138b12520b5 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 13 May 2024 12:25:47 -0700 Subject: [PATCH 3/4] cleanup --- .../__tests__/new-color-css-vars.test.js | 188 +++++++++--------- .../new-css-vars-have-fallback.test.js | 31 --- 2 files changed, 90 insertions(+), 129 deletions(-) delete mode 100644 src/rules/__tests__/new-css-vars-have-fallback.test.js diff --git a/src/rules/__tests__/new-color-css-vars.test.js b/src/rules/__tests__/new-color-css-vars.test.js index 8afece87..5e46c887 100644 --- a/src/rules/__tests__/new-color-css-vars.test.js +++ b/src/rules/__tests__/new-color-css-vars.test.js @@ -43,46 +43,46 @@ ruleTester.run('no-color-css-vars', rule, { { name: 'attribute: simple variable', code: ``, - output: ``, + output: ``, errors: [ { - message: 'Replace var(--color-done-fg) with var(--fgColor-done, var(--color-done-fg))', + message: 'Replace var(--color-done-fg) with var(--fgColor-done)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, { name: 'attribute: conditional variable', code: ``, - output: ``, + output: ``, errors: [ { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, { name: 'sx: simple variable', code: ``, - output: ``, + output: ``, errors: [ { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, { name: 'style: simple variable', code: `
`, - output: `
`, + output: `
`, errors: [ { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, @@ -98,13 +98,13 @@ ruleTester.run('no-color-css-vars', rule, { output: ` `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, ], }, @@ -120,13 +120,13 @@ ruleTester.run('no-color-css-vars', rule, { output: ` `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, ], }, @@ -150,23 +150,22 @@ ruleTester.run('no-color-css-vars', rule, { boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`, } : {} - const bg = 'var(--bgColor-muted, var(--color-canvas-subtle))' - const sx = disabled ? {color: 'var(--fgColor-disabled, var(--color-primer-fg-disabled))'} : undefined + const bg = 'var(--bgColor-muted)' + const sx = disabled ? {color: 'var(--fgColor-disabled)'} : undefined export const Fixture = `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, { - message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted, var(--color-accent-subtle))', + message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted)', }, { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)', }, { - message: - 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled, var(--color-primer-fg-disabled))', + message: 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled)', }, ], }, @@ -176,11 +175,11 @@ ruleTester.run('no-color-css-vars', rule, { const extraSx = focused ? {backgroundColor: 'var(--color-canvas-subtle) !important'} : {} `, output: ` - const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted, var(--color-canvas-subtle)) !important'} : {} + const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted) !important'} : {} `, errors: [ { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted))', }, ], }, @@ -191,12 +190,12 @@ ruleTester.run('no-color-css-vars', rule, { export const Fixture = `, output: ` - const baseStyles = { color: 'var(--fgColor-muted, var(--color-fg-muted))' } + const baseStyles = { color: 'var(--fgColor-muted)' } export const Fixture = `, errors: [ { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, @@ -208,14 +207,14 @@ ruleTester.run('no-color-css-vars', rule, { `, output: ` import {merge} from '@primer/react' - export const Fixture = props => + export const Fixture = props => `, errors: [ { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, @@ -234,11 +233,10 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: - 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))', + message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)', }, { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, ], }, @@ -256,12 +254,10 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: - 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis, var(--color-danger-emphasis))', + message: 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis)', }, { - message: - 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))', + message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)', }, ], }, @@ -296,14 +292,14 @@ ruleTester.run('no-color-css-vars', rule, { ) @@ -311,26 +307,25 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))', + message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)', }, { - message: - 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))', + message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)', }, { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, @@ -361,10 +356,10 @@ ruleTester.run('no-color-css-vars', rule, { ) @@ -372,14 +367,13 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))', + message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)', }, { - message: - 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))', + message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)', }, { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, ], }, @@ -405,28 +399,28 @@ ruleTester.run('no-color-css-vars', rule, { lineHeight: '100%', }, thead: { - background: 'var(--bgColor-muted, var(--color-canvas-subtle))', + background: 'var(--bgColor-muted)', borderBottom: '1px solid', - borderColor: 'var(--borderColor-default, var(--color-border-default))', + borderColor: 'var(--borderColor-default)', }, } `, errors: [ { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, { name: 'inline sx', code: `Test`, - output: `Test`, + output: `Test`, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor)', }, ], }, @@ -442,18 +436,18 @@ ruleTester.run('no-color-css-vars', rule, { `, output: ` Test `, errors: [ { - message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted, var(--color-fg-subtle))', + message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted)', }, { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, ], }, @@ -493,7 +487,7 @@ ruleTester.run('no-color-css-vars', rule, { border: 0, padding: 0, background: 'transparent', - color: isSelected ? 'var(--fgColor-default, var(--color-fg-default))' : 'var(--fgColor-muted, var(--color-fg-muted))', + color: isSelected ? 'var(--fgColor-default)' : 'var(--fgColor-muted)', fontSize: '12px', fontWeight: '600', display: 'flex', @@ -507,10 +501,10 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-fg-default) with var(--fgColor-default, var(--color-fg-default))', + message: 'Replace var(--color-fg-default) with var(--fgColor-default)', }, { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, @@ -545,29 +539,28 @@ ruleTester.run('no-color-css-vars', rule, { ...(fullyRounded ? { borderRadius: '5px', - color: 'var(--fgColor-accent, var(--color-accent-fg))', + color: 'var(--fgColor-accent)', } : { borderTopRightRadius: '5px', borderBottomRightRadius: '5px', - color: 'var(--fgColor-accent, var(--color-accent-fg))', + color: 'var(--fgColor-accent)', }), overflow: 'hidden', ':has(input:focus-visible)': { - boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis, var(--color-accent-emphasis))', + boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis)', }, }) `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, { - message: - 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis, var(--color-accent-emphasis))', + message: 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis)', }, ], }, @@ -601,23 +594,23 @@ ruleTester.run('no-color-css-vars', rule, { '.cm-tooltip.cm-tooltip-autocomplete > ul': { fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace", fontSize: '12px', - backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))', - border: '1px solid var(--borderColor-default, var(--color-border-default))', + backgroundColor: 'var(--bgColor-default)', + border: '1px solid var(--borderColor-default)', borderRadius: 'var(--borderRadius-medium)', - boxShadow: 'var(--shadow-resting-medium, var(--color-shadow-medium))', + boxShadow: 'var(--shadow-resting-medium)', minWidth: 'auto', } }) `, errors: [ { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium, var(--color-shadow-medium))', + message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium)', }, ], }, @@ -653,19 +646,19 @@ ruleTester.run('no-color-css-vars', rule, { switch (modification) { case 'ADDED': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis, var(--color-success-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis)'} case 'REMOVED': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis, var(--color-danger-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis)'} case 'EDITED': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis, var(--color-severe-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis)'} case 'accent': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis, var(--color-accent-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis)'} case 'done': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis, var(--color-done-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis)'} case 'closed': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis, var(--color-closed-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis)'} case 'sponsors': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis)'} case 'UNCHANGED': return {} } @@ -673,26 +666,25 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis, var(--color-success-fg))', + message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis)', }, { - message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis, var(--color-danger-fg))', + message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis)', }, { - message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis, var(--color-severe-fg))', + message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis)', }, { - message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis)', }, { - message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis, var(--color-done-fg))', + message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis)', }, { - message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis, var(--color-closed-fg))', + message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis)', }, { - message: - 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))', + message: 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis)', }, ], }, diff --git a/src/rules/__tests__/new-css-vars-have-fallback.test.js b/src/rules/__tests__/new-css-vars-have-fallback.test.js deleted file mode 100644 index 5b4ab9ae..00000000 --- a/src/rules/__tests__/new-css-vars-have-fallback.test.js +++ /dev/null @@ -1,31 +0,0 @@ -const rule = require('../new-color-css-vars-have-fallback') -const {RuleTester} = require('eslint') - -const ruleTester = new RuleTester({ - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - ecmaFeatures: { - jsx: true, - }, - }, -}) - -ruleTester.run('new-color-css-vars-have-fallback', rule, { - valid: [ - { - code: ``, - }, - ], - invalid: [ - { - code: ``, - errors: [ - { - message: - 'Expected a fallback value for CSS variable --fgColor-muted. New color variables fallbacks, check primer.style/primitives to find the correct value.', - }, - ], - }, - ], -}) From cfb0dd3a59bef742d74a1961f28ee0e3e29bf123 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 13 May 2024 12:34:05 -0700 Subject: [PATCH 4/4] fix test --- src/rules/__tests__/new-color-css-vars.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/rules/__tests__/new-color-css-vars.test.js b/src/rules/__tests__/new-color-css-vars.test.js index 5e46c887..51e0cb63 100644 --- a/src/rules/__tests__/new-color-css-vars.test.js +++ b/src/rules/__tests__/new-color-css-vars.test.js @@ -179,7 +179,7 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)', }, ], },