chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/scripts/stylelint_rules/lib/{use_theme_colors.js → use_theme_colors.mjs}

@@ -2,10 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const stylelint = require('stylelint');
-const postcss = require('postcss');
-const path = require('path');
-const fs = require('fs');
+import stylelint from 'stylelint';
+import { parse, comment } from 'postcss';
+import { join } from 'path';
+import { readFileSync } from 'fs';
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages },
+} = stylelint;
 
 const RULE_NAME = 'plugin/use_theme_colors';
 
@@ -30,33 +35,74 @@ const CSS_PROPS_TO_CHECK_FOR_COLOR_USAGE = new Set([
   'background',
   'border',
   'border-color',
-  'outline'
+  'outline',
 ]);
 
-const borderCombinedDeclarations = new Set(['border', 'border-top', 'border-bottom', 'border-left', 'border-right']);
+const borderCombinedDeclarations = new Set([
+  'border',
+  'border-top',
+  'border-bottom',
+  'border-left',
+  'border-right',
+]);
 
 const COLOR_INDICATOR_REGEXES = new Set([
   // We don't have to check for named colors ("blue") as we lint to ban those separately.
   /#[a-zA-Z0-9]{3,6}/,
-  /hsla?/,
-  /rgba?/,
+  /hsla?\(/,
+  /rgba?\(/,
 ]);
 
 const CUSTOM_VARIABLE_OVERRIDE_PREFIX = '--override-';
 
-const applicationColorsPath =
-    path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'applicationColorTokens.css');
-const themeColorsPath = path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'themeColors.css');
-const tokensPath = path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'tokens.css');
-const inspectorCommonPath = path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'inspectorCommon.css');
+const applicationColorsPath = join(
+  import.meta.dirname,
+  '..',
+  '..',
+  '..',
+  'front_end',
+  'ui',
+  'legacy',
+  'applicationColorTokens.css',
+);
+const themeColorsPath = join(
+  import.meta.dirname,
+  '..',
+  '..',
+  '..',
+  'front_end',
+  'ui',
+  'legacy',
+  'themeColors.css',
+);
+const tokensPath = join(
+  import.meta.dirname,
+  '..',
+  '..',
+  '..',
+  'front_end',
+  'ui',
+  'legacy',
+  'tokens.css',
+);
+const inspectorCommonPath = join(
+  import.meta.dirname,
+  '..',
+  '..',
+  '..',
+  'front_end',
+  'ui',
+  'legacy',
+  'inspectorCommon.css',
+);
 
 function getRootVariableDeclarationsFromCSSFile(filePath) {
-  const fileContents = fs.readFileSync(filePath, {encoding: 'utf-8'});
+  const fileContents = readFileSync(filePath, { encoding: 'utf-8' });
   const definedVariableNames = new Set();
-  const parsed = postcss.parse(fileContents);
+  const parsed = parse(fileContents);
   // Only parse the colors in the :root declaration.
-  parsed.walkRules(':root', rule => {
-    for (const node of (rule.nodes || [])) {
+  parsed.walkRules(':root', (rule) => {
+    for (const node of rule.nodes || []) {
       if (node.prop && node.prop.startsWith('--')) {
         definedVariableNames.add(node.prop);
       }
@@ -65,19 +111,27 @@ function getRootVariableDeclarationsFromCSSFile(filePath) {
   return definedVariableNames;
 }
 
-const DEFINED_APPLICATION_COLOR_VARIABLES = getRootVariableDeclarationsFromCSSFile(applicationColorsPath);
-const DEFINED_THEME_COLOR_VARIABLES = getRootVariableDeclarationsFromCSSFile(themeColorsPath);
-const DEFINED_COLOR_TOKEN_VARIABLES = getRootVariableDeclarationsFromCSSFile(tokensPath);
-const DEFINED_INSPECTOR_STYLE_VARIABLES = getRootVariableDeclarationsFromCSSFile(inspectorCommonPath);
+const DEFINED_APPLICATION_COLOR_VARIABLES =
+  getRootVariableDeclarationsFromCSSFile(applicationColorsPath);
+const DEFINED_THEME_COLOR_VARIABLES =
+  getRootVariableDeclarationsFromCSSFile(themeColorsPath);
+const DEFINED_COLOR_TOKEN_VARIABLES =
+  getRootVariableDeclarationsFromCSSFile(tokensPath);
+const DEFINED_INSPECTOR_STYLE_VARIABLES =
+  getRootVariableDeclarationsFromCSSFile(inspectorCommonPath);
 const ALL_DEFINED_VARIABLES = new Set([
-  ...DEFINED_APPLICATION_COLOR_VARIABLES, ...DEFINED_THEME_COLOR_VARIABLES, ...DEFINED_COLOR_TOKEN_VARIABLES,
-  ...DEFINED_INSPECTOR_STYLE_VARIABLES
+  ...DEFINED_APPLICATION_COLOR_VARIABLES,
+  ...DEFINED_THEME_COLOR_VARIABLES,
+  ...DEFINED_COLOR_TOKEN_VARIABLES,
+  ...DEFINED_INSPECTOR_STYLE_VARIABLES,
 ]);
 
-const BOX_SHADOW_VARIABLES = new Set([1, 2, 3, 4, 5].map(x => `var(--sys-elevation-level${x})`));
+const BOX_SHADOW_VARIABLES = new Set(
+  [1, 2, 3, 4, 5].map((x) => `var(--sys-elevation-level${x})`),
+);
 
-module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary, context) {
-  return function(postcssRoot, postcssResult) {
+const ruleFunction = (primary, secondary, context) => {
+  return function (postcssRoot, postcssResult) {
     function reportError(declaration, shouldFix) {
       /**
        * Unfortunately for this rule there seems to be an issue with stylelint's
@@ -98,11 +152,18 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
         // Unfortunately if you add crbug.com/X to the same comment as the
         // stylelint-disable-line, it doesn't work, hence why we add two
         // comments, one to disable and one with the tracking bug.
-        declaration.after(postcss.comment({text: 'See: crbug.com/1152736 for color variable migration.'}));
-        declaration.after(' /* stylelint-disable-line plugin/use_theme_colors */');
+        declaration.after(
+          comment({
+            text: 'See: crbug.com/1152736 for color variable migration.',
+          }),
+        );
+        declaration.after(
+          ' /* stylelint-disable-line plugin/use_theme_colors */',
+        );
       } else {
-        stylelint.utils.report({
-          message: 'All CSS color declarations should use a variable defined in ui/legacy/themeColors.css',
+        report({
+          message:
+            'All CSS color declarations should use a variable defined in ui/legacy/themeColors.css',
           ruleName: RULE_NAME,
           node: declaration,
           result: postcssResult,
@@ -110,14 +171,21 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
       }
     }
 
-    function checkColorValueIsValidOrError({declarationToErrorOn, cssValueToCheck, alreadyFixed}) {
+    function checkColorValueIsValidOrError({
+      declarationToErrorOn,
+      cssValueToCheck,
+      alreadyFixed,
+    }) {
       for (const indicator of COLOR_INDICATOR_REGEXES) {
         /**
          * In rare situations in the codebase we allow
          * rgb(var(--some-base-color) / 20%) so we don't want to error if we
          * match that.
          */
-        if (indicator.test(cssValueToCheck) && !cssValueToCheck.startsWith('rgb(var')) {
+        if (
+          indicator.test(cssValueToCheck) &&
+          !cssValueToCheck.startsWith('rgb(var')
+        ) {
           reportError(declarationToErrorOn, !alreadyFixed);
         }
       }
@@ -130,7 +198,8 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
        * are used.
        */
       const shouldAllowAnyVars =
-          declarationToErrorOn.prop === 'background-image' || cssValueToCheck.startsWith('var(--image-file');
+        declarationToErrorOn.prop === 'background-image' ||
+        cssValueToCheck.startsWith('var(--image-file');
       if (shouldAllowAnyVars) {
         return;
       }
@@ -149,13 +218,13 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
         const execArray = /var\(\s*(--[\w-]+)\s*/.exec(cssValueToCheck);
         if (!execArray) {
           throw new Error(
-              `Could not parse CSS variable usage: ${cssValueToCheck}`,
+            `Could not parse CSS variable usage: ${cssValueToCheck}`,
           );
         }
         const [match, variableName] = execArray;
         if (!match) {
           throw new Error(
-              `Could not parse CSS variable usage: ${cssValueToCheck}`,
+            `Could not parse CSS variable usage: ${cssValueToCheck}`,
           );
         }
 
@@ -176,22 +245,30 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
       }
     }
     const sourceFile = postcssResult.opts.from;
-    if (sourceFile && !sourceFile.includes('front_end') && sourceFile.includes('inspector_overlay')) {
+    if (
+      sourceFile &&
+      !sourceFile.includes('front_end') &&
+      sourceFile.includes('inspector_overlay')
+    ) {
       // The inspector overlay sits outside of front_end and does not get loaded
       // with the same CSS variables. So we don't want to apply this rule to it.
       return;
     }
 
-    postcssRoot.walkRules(rule => {
+    postcssRoot.walkRules((rule) => {
       // If you are providing a selector specifically for dark mode, you can use
       // any colors you want, as it means you are purposefully deviating. This
       // is not encouraged but we do need to allow it.
-      if (rule.selector.startsWith(':host-context(.theme-with-dark-background)') ||
-          rule.selector.startsWith('.theme-with-dark-background')) {
+      if (
+        rule.selector.startsWith(
+          ':host-context(.theme-with-dark-background)',
+        ) ||
+        rule.selector.startsWith('.theme-with-dark-background')
+      ) {
         return;
       }
 
-      rule.walkDecls(declaration => {
+      rule.walkDecls((declaration) => {
         if (!CSS_PROPS_TO_CHECK_FOR_COLOR_USAGE.has(declaration.prop)) {
           return;
         }
@@ -212,18 +289,30 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
         const declIndex = declaration.parent.nodes.indexOf(declaration);
         const nextNode = declaration.parent.nodes[declIndex + 1];
         const previousNode = declaration.parent.nodes[declIndex - 1];
-        const nextNodeIsDisableComment = nextNode && nextNode.type === 'comment' &&
-            nextNode.text.startsWith('stylelint-disable-line plugin/use_theme_colors');
-        const previousNodeIsDisableComment = previousNode && previousNode.type === 'comment' &&
-            previousNode.text.startsWith('stylelint-disable-next-line plugin/use_theme_colors');
-        const alreadyFixed = nextNodeIsDisableComment || previousNodeIsDisableComment;
+        const nextNodeIsDisableComment =
+          nextNode &&
+          nextNode.type === 'comment' &&
+          nextNode.text.startsWith(
+            'stylelint-disable-line plugin/use_theme_colors',
+          );
+        const previousNodeIsDisableComment =
+          previousNode &&
+          previousNode.type === 'comment' &&
+          previousNode.text.startsWith(
+            'stylelint-disable-next-line plugin/use_theme_colors',
+          );
+        const alreadyFixed =
+          nextNodeIsDisableComment || previousNodeIsDisableComment;
 
         /**
          * If we're checking a border-{top/bottom/left/right}, we need to regex
          * out just the color part of the declaration to check.
          * We also apply the same check for outline.
          */
-        if (borderCombinedDeclarations.has(declaration.prop) || declaration.prop === 'outline') {
+        if (
+          borderCombinedDeclarations.has(declaration.prop) ||
+          declaration.prop === 'outline'
+        ) {
           // This is a pretty basic regex but it should split border-bottom:
           // var(--foo) solid var(--bar) into the three parts we need.
           // If this rule picks up false positives, we can improve this regex.
@@ -234,8 +323,11 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
             const [, lineSize, lineStyle, lineColor] = partsOfValue;
             // Line color is the only part we want to check as it's the only bit
             // that could contain color.
-            checkColorValueIsValidOrError(
-                {declarationToErrorOn: declaration, cssValueToCheck: lineColor, alreadyFixed});
+            checkColorValueIsValidOrError({
+              declarationToErrorOn: declaration,
+              cssValueToCheck: lineColor,
+              alreadyFixed,
+            });
             return;
           }
         }
@@ -243,11 +335,17 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
         /**
          * If we're not doing a border-X check, we check the entire value of the declaration.
          */
-        checkColorValueIsValidOrError(
-            {declarationToErrorOn: declaration, cssValueToCheck: declaration.value, alreadyFixed});
+        checkColorValueIsValidOrError({
+          declarationToErrorOn: declaration,
+          cssValueToCheck: declaration.value,
+          alreadyFixed,
+        });
       });
     });
   };
-});
+};
+
+ruleFunction.ruleName = RULE_NAME;
+ruleFunction.messages = ruleMessages(RULE_NAME, {});
 
-module.exports.ruleName = RULE_NAME;
+export default createPlugin(RULE_NAME, ruleFunction);