From 6ccb546a496856f9935ea43c1cafcab2bf39df84 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 14 Feb 2024 23:30:56 +0900 Subject: [PATCH] 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 67671070aa2a7..a9727666af26f 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.', + }, ], }, },