From 6ccb546a496856f9935ea43c1cafcab2bf39df84 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 14 Feb 2024 23:30:56 +0900 Subject: [PATCH 1/6] Components: Add eslint rule for theme CSS var usage --- .eslintrc.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 67671070aa2a71..a9727666af26f5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -354,7 +354,10 @@ module.exports = { }, { files: [ 'packages/components/src/**' ], - excludedFiles: [ 'packages/components/src/utils/colors-values.js' ], + excludedFiles: [ + 'packages/components/src/utils/colors-values.js', + 'packages/components/src/theme/**', + ], rules: { 'no-restricted-syntax': [ 'error', @@ -369,6 +372,18 @@ module.exports = { message: '--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', }, + { + selector: + 'Literal[value=/var.+--wp-components-color-/]', // allow overriding definitions, but not access with var() + message: + 'To ensure proper fallbacks, --wp-components-color-* variables should not be used directly. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', + }, + { + selector: + 'TemplateElement[value.cooked=/var.+--wp-components-color-/]', // allow overriding definitions, but not access with var() + message: + 'To ensure proper fallbacks, --wp-components-color-* variables should not be used directly. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', + }, ], }, }, From 94f6be31a3319ef489c8c87af2aa91d296319242 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 14 Feb 2024 23:34:23 +0900 Subject: [PATCH 2/6] Fix violations --- packages/components/src/progress-bar/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts index 041b2402f0324e..d33b0966d023bf 100644 --- a/packages/components/src/progress-bar/styles.ts +++ b/packages/components/src/progress-bar/styles.ts @@ -30,7 +30,7 @@ export const Track = styled.div` /* Text color at 10% opacity */ background-color: color-mix( in srgb, - var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ), + ${ COLORS.theme.foreground }, transparent 90% ); border-radius: ${ CONFIG.radiusBlockUi }; @@ -52,7 +52,7 @@ export const Indicator = styled.div< { /* Text color at 90% opacity */ background-color: color-mix( in srgb, - var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ), + ${ COLORS.theme.foreground }, transparent 10% ); From 1a0dc3b0993a0bb12c4631bd27a3f7ec88739f6b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 14 Feb 2024 23:52:25 +0900 Subject: [PATCH 3/6] Add stylelint rule --- packages/components/.stylelintrc.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/.stylelintrc.js b/packages/components/.stylelintrc.js index be2035d903731e..2a583a09c16059 100644 --- a/packages/components/.stylelintrc.js +++ b/packages/components/.stylelintrc.js @@ -4,11 +4,11 @@ module.exports = { rules: { 'declaration-property-value-disallowed-list': [ { - '/.*/': '/--wp-admin-theme-/', + '/.*/': [ '/--wp-admin-theme-/', '/--wp-components-color-/' ], }, { message: - '--wp-admin-theme-* variables do not support component theming. Use Sass variables from packages/components/src/utils/theme-variables.scss instead.', + 'To support component theming and ensure proper fallbacks, use Sass variables from packages/components/src/utils/theme-variables.scss instead.', }, ], }, From 3ff2d699499a2f234e8cd66a97b56a3131571759 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 16 Feb 2024 00:23:59 +0900 Subject: [PATCH 4/6] Add changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 85be50e8f7642c..ebce7cbd6fdad4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,7 @@ ### Internal - `ColorPicker`: Style without accessing internal `InputControl` classes ([#59069](https://github.com/WordPress/gutenberg/pull/59069)). +- Add lint rules for theme color CSS var usage ([#59022](https://github.com/WordPress/gutenberg/pull/59022)). ## 26.0.1 (2024-02-13) From b767fe31b7b5f3cd21a0c9ea0761793cf6d59c56 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 16 Feb 2024 00:34:07 +0900 Subject: [PATCH 5/6] Simplify with `:matches` --- .eslintrc.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index a9727666af26f5..e07485155913bc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -361,26 +361,16 @@ module.exports = { rules: { 'no-restricted-syntax': [ 'error', - { - selector: 'Literal[value=/--wp-admin-theme-/]', - message: - '--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', - }, { selector: - 'TemplateElement[value.cooked=/--wp-admin-theme-/]', + ':matches(Literal[value=/--wp-admin-theme-/],TemplateElement[value.cooked=/--wp-admin-theme-/])', message: '--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', }, { selector: - 'Literal[value=/var.+--wp-components-color-/]', // allow overriding definitions, but not access with var() - message: - 'To ensure proper fallbacks, --wp-components-color-* variables should not be used directly. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', - }, - { - selector: - 'TemplateElement[value.cooked=/var.+--wp-components-color-/]', // allow overriding definitions, but not access with var() + // Allow overriding definitions, but not access with var() + ':matches(Literal[value=/var.+--wp-components-color-/],TemplateElement[value.cooked=/var.+--wp-components-color-/])', message: 'To ensure proper fallbacks, --wp-components-color-* variables should not be used directly. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', }, From 221fcaac05a64a1f2ad775435a6c6f4434830452 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 16 Feb 2024 00:48:43 +0900 Subject: [PATCH 6/6] Improve regex --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index e07485155913bc..dbaa69f5bf07a0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -370,7 +370,7 @@ module.exports = { { selector: // Allow overriding definitions, but not access with var() - ':matches(Literal[value=/var.+--wp-components-color-/],TemplateElement[value.cooked=/var.+--wp-components-color-/])', + ':matches(Literal[value=/var\\(\\s*--wp-components-color-/],TemplateElement[value.cooked=/var\\(\\s*--wp-components-color-/])', message: 'To ensure proper fallbacks, --wp-components-color-* variables should not be used directly. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.', },