From f3c858d47b1560dfa1e233fda596d2c1085a1b67 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 20 May 2025 13:17:22 +0200 Subject: [PATCH 1/4] make sure it checks for display-scale --- __tests__/colors.js | 54 +++++++++++++++++++++++++++++++++++++++++++++ plugins/colors.js | 14 +++++------- 2 files changed, 60 insertions(+), 8 deletions(-) diff --git a/__tests__/colors.js b/__tests__/colors.js index 820740c7..2078069a 100644 --- a/__tests__/colors.js +++ b/__tests__/colors.js @@ -198,6 +198,60 @@ 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 dispaly scale variable outside of charts & other specific use cases', + }, + { + 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 outside of charts & other specific use cases', + }, + { + 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 outside of charts & other specific use cases', + }, + { + 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 outside of charts & other specific use cases', + }, + { + 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: 'CWHATTTTT?', + }, + { + 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 outside of charts & other specific use cases', + }, ], }) 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, From 55adaf573339f0ce41a0bea6c2d5dd8cd1d075c2 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 20 May 2025 13:23:25 +0200 Subject: [PATCH 2/4] add changeset --- .changeset/pink-beds-mix.md | 5 +++++ __tests__/colors.js | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/pink-beds-mix.md 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 2078069a..34ca5972 100644 --- a/__tests__/colors.js +++ b/__tests__/colors.js @@ -205,7 +205,7 @@ testRule({ line: 1, column: 22, endColumn: 44, - description: 'CSS > Errors when using a dispaly scale variable outside of charts & other specific use cases', + description: 'CSS > Errors when using a dispaly scale variable', }, { code: '.x { background-color: var(--display-blue-scale-1); }', @@ -214,7 +214,7 @@ testRule({ line: 1, column: 28, endColumn: 50, - description: 'CSS > Errors when using a dispaly scale variable outside of charts & other specific use cases', + description: 'CSS > Errors when using a dispaly scale variable', }, { code: '.x { background-image: linear-gradient(var(--display-blue-scale-1), var(--bgColor-default)); }', @@ -223,7 +223,7 @@ testRule({ line: 1, column: 44, endColumn: 66, - description: 'CSS > Errors when using a dispaly scale variable outside of charts & other specific use cases', + description: 'CSS > Errors when using a dispaly scale variable', }, { code: '.x { color: var(--display-blue-scale-1); }', @@ -232,7 +232,7 @@ testRule({ line: 1, column: 17, endColumn: 39, - description: 'CSS > Errors when using a dispaly scale variable outside of charts & other specific use cases', + description: 'CSS > Errors when using a dispaly scale variable', }, { code: '.x { color: var(--display-blue-scale-1); }', @@ -241,7 +241,7 @@ testRule({ line: 1, column: 17, endColumn: 39, - description: 'CWHATTTTT?', + description: 'CSS > Errors when using a dispaly scale variable', }, { code: '.x { border-color: var(--display-blue-scale-9); }', @@ -250,7 +250,7 @@ testRule({ line: 1, column: 24, endColumn: 46, - description: 'CSS > Errors when using a dispaly scale variable outside of charts & other specific use cases', + description: 'CSS > Errors when using a dispaly scale variable', }, ], }) From e2ab653859dce5031bd8bb65a865a7d277882b05 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 22 May 2025 12:47:09 +0200 Subject: [PATCH 3/4] Update __tests__/colors.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- __tests__/colors.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/__tests__/colors.js b/__tests__/colors.js index 34ca5972..c103cf7f 100644 --- a/__tests__/colors.js +++ b/__tests__/colors.js @@ -234,15 +234,7 @@ testRule({ endColumn: 39, 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, From 1e3429d261d280d48e8c129816ed7c98d2a32b50 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 22 May 2025 12:47:22 +0200 Subject: [PATCH 4/4] Update __tests__/colors.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- __tests__/colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/colors.js b/__tests__/colors.js index c103cf7f..3a43b9e1 100644 --- a/__tests__/colors.js +++ b/__tests__/colors.js @@ -205,7 +205,7 @@ testRule({ line: 1, column: 22, endColumn: 44, - description: 'CSS > Errors when using a dispaly scale variable', + description: 'CSS > Errors when using a display scale variable', }, { code: '.x { background-color: var(--display-blue-scale-1); }',