[stylelint] Run test on Presubmit

We missed running this test and thus didn't catch some changes.

Bug: none
Change-Id: I4781780c6df539671bf3191b888fb8ca8ae436b2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6401394
Reviewed-by: Benedikt Meurer <[email protected]>
Reviewed-by: Liviu Rau <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

PRESUBMIT.py

@@ -173,9 +173,15 @@ def _CheckDevToolsRunESLintTests(input_api, output_api):
         sys.path = original_sys_path
     eslint_rules_dir_path = input_api.os_path.join(
         input_api.PresubmitLocalPath(), 'scripts', 'eslint_rules')
-    eslint_rules_affected_files = _getAffectedFiles(input_api,
-                                                    [eslint_rules_dir_path],
-                                                    [], [])
+    eslint_rules_checked_paths = [
+        # Check if EsLint is updated
+        input_api.os_path.join(input_api.PresubmitLocalPath(), 'node_modules',
+                               'eslint'),
+        # Check for rules changes
+        eslint_rules_dir_path,
+    ]
+    eslint_rules_affected_files = _getAffectedFiles(
+        input_api, eslint_rules_checked_paths, [], [])
 
     if (len(eslint_rules_affected_files) == 0):
         return []
@@ -193,6 +199,54 @@ def _CheckDevToolsRunESLintTests(input_api, output_api):
     return results
 
 
+def _CheckDevToolsRunStylelintTests(input_api, output_api):
+    # Check for changes in the stylelint_rules directory, and run the stylelint rules
+    # tests if so.
+    # We don't do this on every CL as most do not touch the rules, but if we do
+    # change them we need to make sure all the tests are passing.
+    original_sys_path = sys.path
+    try:
+        sys.path = sys.path + [
+            input_api.os_path.join(input_api.PresubmitLocalPath(), 'scripts')
+        ]
+        import devtools_paths
+    finally:
+        sys.path = original_sys_path
+
+    stylelint_tests_path = input_api.os_path.join(
+        input_api.PresubmitLocalPath(), 'scripts', 'stylelint_rules')
+    stylelint_rules_check_paths = [
+        input_api.os_path.join(input_api.PresubmitLocalPath(), 'node_modules',
+                               'stylelint'),
+        # Rule is added/updated
+        stylelint_tests_path,
+        # Variable declaration used in test are changed
+        input_api.os_path.join(input_api.PresubmitLocalPath(), 'front_end',
+                               'application_tokens.css'),
+        input_api.os_path.join(input_api.PresubmitLocalPath(), 'front_end',
+                               'design_system_tokens.css'),
+        input_api.os_path.join(input_api.PresubmitLocalPath(), 'front_end',
+                               'inspectorCommon.css'),
+    ]
+    stylelint_rules_affected_files = _getAffectedFiles(
+        input_api, stylelint_rules_check_paths, [], [])
+
+    if (len(stylelint_rules_affected_files) == 0):
+        return []
+
+    mocha_path = devtools_paths.mocha_path()
+    stylelint_tests_path = input_api.os_path.join(stylelint_tests_path,
+                                                  'tests', '*.test.js')
+
+    results = [output_api.PresubmitNotifyResult('Stylelint rules unit tests')]
+    results.extend(
+        # The dot reporter is more concise which is useful to not get LOADS of
+        # output when just one test fails.
+        _checkWithNodeScript(input_api, output_api, mocha_path,
+                             ['--reporter', 'dot', stylelint_tests_path]))
+    return results
+
+
 def _CheckDevToolsRunBuildTests(input_api, output_api):
     # Check for changes in the build/tests directory, and run the tests if so.
     # We don't do this on every CL as most do not touch the rules, but if we do
@@ -234,9 +288,7 @@ def _CheckDevToolsLint(input_api, output_api):
 
     front_end_directory = input_api.os_path.join(
         input_api.PresubmitLocalPath(), 'front_end')
-    component_docs_directory = input_api.os_path.join(front_end_directory,
-                                                      'ui', 'components',
-                                                      'docs')
+
     inspector_overlay_directory = input_api.os_path.join(
         input_api.PresubmitLocalPath(), 'inspector_overlay')
     test_directory = input_api.os_path.join(input_api.PresubmitLocalPath(),
@@ -530,6 +582,7 @@ def _CommonChecks(canned_checks):
         _CheckGeneratedFiles,
         _CheckDevToolsLint,
         _CheckDevToolsRunESLintTests,
+        _CheckDevToolsRunStylelintTests,
         _CheckDevToolsRunBuildTests,
         _CheckDevToolsNonJSFileLicenseHeaders,
         _CheckFormat,

eslint.config.mjs

@@ -577,6 +577,7 @@ export default [
     rules: {
       'no-console': 'off',
       'rulesdir/es-modules-import': 'off',
+      'import/no-default-export': 'off',
     },
   },
   {

scripts/stylelint_rules/lib/use_theme_colors.mjs

@@ -15,27 +15,27 @@ const {
 const RULE_NAME = 'plugin/use_theme_colors';
 
 const CSS_PROPS_TO_CHECK_FOR_COLOR_USAGE = new Set([
-  'color',
-  'box-shadow',
-  'text-shadow',
-  'outline-color',
-  'background-image',
+  '-webkit-border-image',
   'background-color',
-  'border-left-color',
-  'border-right-color',
-  'border-top-color',
+  'background-image',
+  'background',
   'border-bottom-color',
-  '-webkit-border-image',
-  'fill',
-  'stroke',
+  'border-bottom',
+  'border-color',
+  'border-left-color',
   'border-left',
+  'border-right-color',
   'border-right',
+  'border-top-color',
   'border-top',
-  'border-bottom',
-  'background',
   'border',
-  'border-color',
+  'box-shadow',
+  'color',
+  'fill',
+  'outline-color',
   'outline',
+  'stroke',
+  'text-shadow',
 ]);
 
 const borderCombinedDeclarations = new Set([
@@ -56,20 +56,20 @@ const COLOR_INDICATOR_REGEXES = new Set([
 const CUSTOM_VARIABLE_OVERRIDE_PREFIX = '--override-';
 
 const applicationTokensPath = join(
-    import.meta.dirname,
-    '..',
-    '..',
-    '..',
-    'front_end',
-    'application_tokens.css',
+  import.meta.dirname,
+  '..',
+  '..',
+  '..',
+  'front_end',
+  'application_tokens.css',
 );
 const designSystemTokensPath = join(
-    import.meta.dirname,
-    '..',
-    '..',
-    '..',
-    'front_end',
-    'design_system_tokens.css',
+  import.meta.dirname,
+  '..',
+  '..',
+  '..',
+  'front_end',
+  'design_system_tokens.css',
 );
 const inspectorCommonPath = join(
   import.meta.dirname,
@@ -99,14 +99,15 @@ function getRootVariableDeclarationsFromCSSFile(filePath) {
 
 const DEFINED_APPLICATION_COLOR_VARIABLES =
   getRootVariableDeclarationsFromCSSFile(applicationTokensPath);
-const DEFINED_THEME_COLOR_VARIABLES =
-  getRootVariableDeclarationsFromCSSFile(designSystemTokensPath);
+const DEFINED_THEME_COLOR_VARIABLES = getRootVariableDeclarationsFromCSSFile(
+  designSystemTokensPath,
+);
 const DEFINED_INSPECTOR_STYLE_VARIABLES =
   getRootVariableDeclarationsFromCSSFile(inspectorCommonPath);
 const ALL_DEFINED_VARIABLES = new Set([
   ...DEFINED_APPLICATION_COLOR_VARIABLES,
   ...DEFINED_THEME_COLOR_VARIABLES,
-    ...DEFINED_INSPECTOR_STYLE_VARIABLES,
+  ...DEFINED_INSPECTOR_STYLE_VARIABLES,
 ]);
 
 const BOX_SHADOW_VARIABLES = new Set(
@@ -302,8 +303,7 @@ const ruleFunction = (primary, secondary, context) => {
           const partsOfValue = /(.+)\s(\w+)\s(.+)/.exec(declaration.value);
 
           if (partsOfValue) {
-            // eslint-disable-next-line no-unused-vars
-            const [, lineSize, lineStyle, lineColor] = partsOfValue;
+            const [, , , lineColor] = partsOfValue;
             // Line color is the only part we want to check as it's the only bit
             // that could contain color.
             checkColorValueIsValidOrError({
@@ -331,5 +331,4 @@ const ruleFunction = (primary, secondary, context) => {
 ruleFunction.ruleName = RULE_NAME;
 ruleFunction.messages = ruleMessages(RULE_NAME, {});
 
-// eslint-disable-next-line import/no-default-export
 export default createPlugin(RULE_NAME, ruleFunction);