diff --git a/.changeset/pink-beds-mix.md b/.changeset/pink-beds-mix.md new file mode 100644 index 00000000..f32720a7 --- /dev/null +++ b/.changeset/pink-beds-mix.md @@ -0,0 +1,5 @@ +--- +'@primer/stylelint-config': minor +--- + +Allowing to test background and border without color, failing on scale colors diff --git a/__tests__/colors.js b/__tests__/colors.js index 820740c7..3a43b9e1 100644 --- a/__tests__/colors.js +++ b/__tests__/colors.js @@ -198,6 +198,52 @@ testRule({ endColumn: 44, description: 'CSS > Errors when using a variable not in primitives', }, + { + code: '.x { background: var(--display-blue-scale-1); }', + unfixable: true, + message: messages.rejected('var(--display-blue-scale-1)', 'bg'), + line: 1, + column: 22, + endColumn: 44, + description: 'CSS > Errors when using a display scale variable', + }, + { + code: '.x { background-color: var(--display-blue-scale-1); }', + unfixable: true, + message: messages.rejected('var(--display-blue-scale-1)', 'bg'), + line: 1, + column: 28, + endColumn: 50, + description: 'CSS > Errors when using a dispaly scale variable', + }, + { + code: '.x { background-image: linear-gradient(var(--display-blue-scale-1), var(--bgColor-default)); }', + unfixable: true, + message: messages.rejected('var(--display-blue-scale-1)', 'bg'), + line: 1, + column: 44, + endColumn: 66, + description: 'CSS > Errors when using a dispaly scale variable', + }, + { + code: '.x { color: var(--display-blue-scale-1); }', + unfixable: true, + message: messages.rejected('var(--display-blue-scale-1)', 'fg'), + line: 1, + column: 17, + endColumn: 39, + description: 'CSS > Errors when using a dispaly scale variable', + }, + + { + code: '.x { border-color: var(--display-blue-scale-9); }', + unfixable: true, + message: messages.rejected('var(--display-blue-scale-9)', 'border'), + line: 1, + column: 24, + endColumn: 46, + description: 'CSS > Errors when using a dispaly scale variable', + }, ], }) diff --git a/plugins/colors.js b/plugins/colors.js index a63200ff..0690cc3f 100644 --- a/plugins/colors.js +++ b/plugins/colors.js @@ -25,8 +25,8 @@ export const messages = ruleMessages(ruleName, { let variables = primitivesVariables('colors') const validProps = { '^color$': ['fgColor', 'iconColor'], - '^background(-color)?$': ['bgColor'], - '^border(-top|-right|-bottom|-left|-inline|-block)*(-color)?$': ['borderColor'], + '^background(-color|-image)?$': ['bgColor'], + '^border(?:-top|-right|-bottom|-left|-inline|-block)?(?:-color)?$': ['borderColor'], '^fill$': ['fgColor', 'iconColor', 'bgColor'], '^stroke$': ['fgColor', 'iconColor', 'bgColor', 'borderColor'], } @@ -46,9 +46,9 @@ const validValues = [ const propType = prop => { if (/^color/.test(prop)) { return 'fg' - } else if (/^background(-color)?$/.test(prop)) { + } else if (/^background(-color|-image)?$/.test(prop)) { return 'bg' - } else if (/^border(-top|-right|-bottom|-left|-inline|-block)*(-color)?$/.test(prop)) { + } else if (/^border(?:-top|-right|-bottom|-left|-inline|-block)?(?:-color)?$/.test(prop)) { return 'border' } else if (/^fill$/.test(prop)) { return 'fg' @@ -137,15 +137,13 @@ const ruleFunction = primary => { ) { return } - // Property is shortand and value doesn't include color if ( - (/^border(-top|-right|-bottom|-left|-inline|-block)*$/.test(prop) || /^background$/.test(prop)) && - !valueNode.value.toLowerCase().includes('color') + (/^border(?:-top|-right|-bottom|-left|-inline|-block)?$/.test(prop) || /^background$/.test(prop)) && + ['color', 'scale'].every(word => !valueNode.value.toLowerCase().includes(word)) ) { return } - report({ index: declarationValueIndex(declNode) + valueNode.sourceIndex, endIndex: declarationValueIndex(declNode) + valueNode.sourceEndIndex,