diff --git a/__tests__/no-deprecated-colors.js b/__tests__/no-deprecated-colors.js index ecccaf19..1ed6efdf 100644 --- a/__tests__/no-deprecated-colors.js +++ b/__tests__/no-deprecated-colors.js @@ -8,15 +8,15 @@ testRule({ config: [ true, { - deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'), - }, + deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json') + } ], fix: true, accept: [ {code: '.x { color: var(--fgColor-default); }'}, { - code: '@include focusOutline(2px, var(--focus-outlineColor));', - }, + code: '@include focusOutline(2px, var(--focus-outlineColor));' + } ], reject: [ { @@ -24,49 +24,49 @@ testRule({ fixed: '.x { color: var(--fgColor-default); }', message: `Variable --color-fg-default is deprecated for property color. Please use the replacement --fgColor-default. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border-right: $border-width $border-style var(--color-border-muted); }', fixed: '.x { border-right: $border-width $border-style var(--borderColor-muted); }', message: `Variable --color-border-muted is deprecated for property border-right. Please use the replacement --borderColor-muted. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border-color: var(--color-primer-border-contrast); }', fixed: '.x { border-color: var(--borderColor-muted); }', message: `Variable --color-primer-border-contrast is deprecated for property border-color. Please use the replacement --borderColor-muted. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { box-shadow: var(--color-fg-default); }', unfixable: true, message: `Variable --color-fg-default is deprecated for property box-shadow. Please consult the primer color docs for a replacement. https://primer.style/primitives/storybook/?path=/story/migration-tables (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { background-color: var(--color-canvas-default-transparent); }', fixed: '.x { background-color: var(--bgColor-transparent); }', message: `Variable --color-canvas-default-transparent is deprecated for property background-color. Please use the replacement --bgColor-transparent. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border: var(--borderWidth-thin) solid var(--color-border-default); }', fixed: '.x { border: var(--borderWidth-thin) solid var(--borderColor-default); }', message: `Variable --color-border-default is deprecated for property border. Please use the replacement --borderColor-default. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border-color: var(--color-canvas-default-transparent); }', fixed: '.x { border-color: var(--borderColor-transparent); }', message: `Variable --color-canvas-default-transparent is deprecated for property border-color. Please use the replacement --borderColor-transparent. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border: 1px solid var(--color-neutral-emphasis); .foo { background-color: var(--color-neutral-emphasis); } }', @@ -76,25 +76,25 @@ testRule({ true, { deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'), - inlineFallback: false, - }, + inlineFallback: false + } ], warnings: [ { message: 'Variable --color-neutral-emphasis is deprecated for property border. Please use the replacement --borderColor-neutral-emphasis. (primer/no-deprecated-colors)', line: 1, - column: 6, + column: 6 }, { message: 'Variable --color-neutral-emphasis is deprecated for property background-color. Please use the replacement --bgColor-neutral-emphasis. (primer/no-deprecated-colors)', line: 1, - column: 62, - }, - ], - }, - ], + column: 62 + } + ] + } + ] }) // eslint-disable-next-line no-undef testRule({ @@ -104,15 +104,15 @@ testRule({ true, { deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'), - inlineFallback: true, - }, + inlineFallback: true + } ], fix: true, accept: [ {code: '.x { color: var(--fgColor-default, var(--color-fg-default)); }'}, { - code: '@include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));', - }, + code: '@include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));' + } ], reject: [ { @@ -120,42 +120,42 @@ testRule({ fixed: '.x { color: var(--fgColor-default, var(--color-fg-default)); }', message: `Variable --color-fg-default is deprecated for property color. Please use the replacement --fgColor-default. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border-right: $border-width $border-style var(--color-border-muted); }', fixed: '.x { border-right: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); }', message: `Variable --color-border-muted is deprecated for property border-right. Please use the replacement --borderColor-muted. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border-color: var(--color-primer-border-contrast); }', fixed: '.x { border-color: var(--borderColor-muted, var(--color-primer-border-contrast)); }', message: `Variable --color-primer-border-contrast is deprecated for property border-color. Please use the replacement --borderColor-muted. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { background-color: var(--color-canvas-default-transparent); }', fixed: '.x { background-color: var(--bgColor-transparent, var(--color-canvas-default-transparent)); }', message: `Variable --color-canvas-default-transparent is deprecated for property background-color. Please use the replacement --bgColor-transparent. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border: var(--borderWidth-thin) solid var(--color-border-default); }', fixed: '.x { border: var(--borderWidth-thin) solid var(--borderColor-default, var(--color-border-default)); }', message: `Variable --color-border-default is deprecated for property border. Please use the replacement --borderColor-default. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border-color: var(--color-canvas-default-transparent); }', fixed: '.x { border-color: var(--borderColor-transparent, var(--color-canvas-default-transparent)); }', message: `Variable --color-canvas-default-transparent is deprecated for property border-color. Please use the replacement --borderColor-transparent. (primer/no-deprecated-colors)`, line: 1, - column: 6, + column: 6 }, { code: '.x { border: 1px solid var(--color-neutral-emphasis); .foo { background-color: var(--color-neutral-emphasis); } }', @@ -165,23 +165,45 @@ testRule({ true, { deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'), - inlineFallback: false, - }, + inlineFallback: false + } ], warnings: [ { message: 'Variable --color-neutral-emphasis is deprecated for property border. Please use the replacement --borderColor-neutral-emphasis. (primer/no-deprecated-colors)', line: 1, - column: 6, + column: 6 }, { message: 'Variable --color-neutral-emphasis is deprecated for property background-color. Please use the replacement --bgColor-neutral-emphasis. (primer/no-deprecated-colors)', line: 1, - column: 62, - }, - ], - }, + column: 62 + } + ] + } + ] +}) +// eslint-disable-next-line no-undef +testRule({ + plugins: ['./plugins/no-deprecated-colors.js'], + ruleName, + config: [ + true, + { + deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'), + inlineFallback: true + } ], + fix: false, + accept: [{code: '.x { color: var(--fgColor-default, var(--color-fg-default)); }'}], + reject: [ + { + code: '.x { color: var(--fgColor-default); }', + message: `Variable --fgColor-default is new color token and must have a fallback value`, + line: 1, + column: 6 + } + ] }) diff --git a/plugins/no-deprecated-colors.js b/plugins/no-deprecated-colors.js index 6808392f..5ef15af6 100644 --- a/plugins/no-deprecated-colors.js +++ b/plugins/no-deprecated-colors.js @@ -9,7 +9,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, { } return `Variable ${varName} is deprecated for property ${property}. Please use the replacement ${replacement}.` - }, + } }) // Match CSS variable references (e.g var(--color-text-primary)) @@ -63,6 +63,16 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex } } } + if (inlineFallback && !replacement.includes(',')) { + // report error if inlineFallback is true and replacement does not have a fallback + stylelint.utils.report({ + message: messages.rejected(variableName, replacement, node.prop), + node, + ruleName, + result + }) + continue + } if (typeof replacement === 'object') { replacement = null } @@ -84,7 +94,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex message: messages.rejected(variableName, replacement, node.prop), node, ruleName, - result, + result }) } } @@ -92,7 +102,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex } log( - `${Object.keys(replacedVars).length} deprecated variables replaced with ${Object.keys(newVars).length} variables.`, + `${Object.keys(replacedVars).length} deprecated variables replaced with ${Object.keys(newVars).length} variables.` ) return lintResult })