@salesforce-ux/eslint-plugin-slds 0.5.3 → 1.0.0-alpha.0

package/build/src/utils/property-matcher.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Check if any of the hook properties match the provided cssProperty using wildcard matching.
+ * @param hookProperties - Array of property patterns (can contain wildcards like `*`)
+ * @param cssProperty - The CSS property to be checked
+ * @returns true if a match is found, otherwise false
+ */
+export declare function matchesCssProperty(hookProperties: string[], cssProperty: string): boolean;
+export declare function isBorderColorProperty(cssProperty: string): boolean;
+export declare function isBorderWidthProperty(cssProperty: string): boolean;
+export declare function isMarginProperty(cssProperty: string): boolean;
+export declare function isPaddingProperty(cssProperty: string): boolean;
+export declare function isBorderRadius(cssProperty: string): boolean;
+export declare function isDimensionProperty(cssProperty: string): boolean;
+export declare function isInsetProperty(cssProperty: string): boolean;
+export declare const fontProperties: string[];
+export declare const colorProperties: string[];
+export declare const densificationProperties: string[];
+/**
+ * Convert property patterns to CSS AST selector patterns
+ * Handles wildcards (*) and creates proper ESLint CSS selector syntax
+ */
+export declare function toSelector(properties: string[]): string;
+export declare function resolvePropertyToMatch(cssProperty: string): string;

package/build/src/utils/rule-utils.d.ts

@@ -0,0 +1,8 @@
+import { Rule } from 'eslint';
+/**
+ * Check if a specific ESLint rule is enabled in the current configuration
+ * @param context - ESLint rule context
+ * @param ruleName - rule name
+ * @returns true if the rule is enabled, false otherwise
+ */
+export declare function isRuleEnabled(context: Rule.RuleContext, ruleName: string): boolean;

package/build/src/utils/styling-hook-utils.d.ts

@@ -0,0 +1,7 @@
+import type { ValueToStylingHooksMapping } from '@salesforce-ux/sds-metadata';
+import { ParsedUnitValue } from './value-utils';
+/**
+ * Get styling hooks for a density value using structured data from CSS AST
+ * Eliminates regex parsing by accepting pre-parsed dimension data
+ */
+export declare function getStylingHooksForDensityValue(parsedValue: ParsedUnitValue, supportedStylinghooks: ValueToStylingHooksMapping, cssProperty: string): string[];

package/build/src/utils/value-utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Checks if a value is a CSS global value.
+ *
+ * CSS global values are special keywords that can be used for any CSS property and have a universal meaning:
+ * - initial: Resets the property to its initial value as defined by the CSS specification.
+ * - inherit: Inherits the value from the parent element.
+ * - unset: Acts as inherit if the property is inheritable, otherwise acts as initial.
+ * - revert: Rolls back the property to the value established by the user-agent or user styles.
+ * - revert-layer: Rolls back the property to the value established by the previous cascade layer.
+ *
+ * All CSS properties accept these global values, including but not limited to:
+ *   - color
+ *   - background
+ *   - font-size
+ *   - margin
+ *   - padding
+ *   - border
+ *   - display
+ *   - position
+ *   - z-index
+ *   - and many more
+ *
+ * These values are part of the CSS standard and are not considered violations, even if a rule would otherwise flag a value as invalid or non-design-token. They are always allowed for any property.
+ *
+ * @param value The CSS value to check.
+ * @returns True if the value is a CSS global value, false otherwise.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/unset
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer
+ */
+export declare function isGlobalValue(value: string): boolean;
+export declare const ALLOWED_UNITS: string[];
+export type ParsedUnitValue = {
+    unit: 'px' | 'rem' | '%' | 'em' | 'ch' | null;
+    number: number;
+} | null;
+export declare function parseUnitValue(value: string): ParsedUnitValue;
+export declare function toAlternateUnitValue(numberVal: number, unitType: 'px' | 'rem' | '%' | 'em' | 'ch' | null): ParsedUnitValue;

package/build/types/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types/index.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=index.js.map

package/build/types/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/types/index.ts"],
+  "sourcesContent": ["import { Rule } from 'eslint';\nimport type { ValueToStylingHooksMapping } from '@salesforce-ux/sds-metadata';\n\n/**\n * Context interface for handlers to access necessary dependencies\n */\nexport interface HandlerContext {\n  valueToStylinghook: ValueToStylingHooksMapping;\n  context: Rule.RuleContext;\n  sourceCode: any;\n}\n\n\n\n/**\n * Configuration for creating the rule\n */\nexport interface RuleConfig {\n  ruleConfig: {\n    type: 'problem' | 'suggestion' | 'layout';\n    description: string;\n    url?: string;\n    messages: Record<string, string>;\n  };\n  valueToStylinghook: ValueToStylingHooksMapping;\n}\n\n/**\n * Handler function signature for CSS declarations\n */\nexport type DeclarationHandler = (node: any, context: HandlerContext) => void;"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/types/yaml.d.js

@@ -0,0 +1 @@
+//# sourceMappingURL=yaml.d.js.map

package/build/types/yaml.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build/utils/boxShadowValueParser.js

@@ -0,0 +1,200 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/boxShadowValueParser.ts
+var boxShadowValueParser_exports = {};
+__export(boxShadowValueParser_exports, {
+  isBoxShadowMatch: () => isBoxShadowMatch,
+  parseBoxShadowValue: () => parseBoxShadowValue
+});
+module.exports = __toCommonJS(boxShadowValueParser_exports);
+var import_css_tree2 = require("@eslint/css-tree");
+
+// src/utils/color-lib-utils.ts
+var import_chroma_js = __toESM(require("chroma-js"));
+var import_css_tree = require("@eslint/css-tree");
+
+// src/utils/css-functions.ts
+var CSS_FUNCTIONS = [
+  "attr",
+  "calc",
+  "color-mix",
+  "conic-gradient",
+  "counter",
+  "cubic-bezier",
+  "linear-gradient",
+  "max",
+  "min",
+  "radial-gradient",
+  "repeating-conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient",
+  "var"
+];
+var CSS_MATH_FUNCTIONS = ["calc", "min", "max"];
+var RGB_COLOR_FUNCTIONS = ["rgb", "rgba", "hsl", "hsla"];
+var cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join("|")})`);
+var cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join("|")})$`);
+var cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join("|")})$`);
+function isCssColorFunction(value) {
+  return RGB_COLOR_FUNCTIONS.includes(value);
+}
+
+// src/utils/color-lib-utils.ts
+var isValidColor = (val) => import_chroma_js.default.valid(val);
+
+// src/utils/value-utils.ts
+var ALLOWED_UNITS = ["px", "em", "rem", "%", "ch"];
+function parseUnitValue(value) {
+  if (!value) return null;
+  const unitsPattern = ALLOWED_UNITS.join("|");
+  const regex = new RegExp(`^(-?\\d*\\.?\\d+)(${unitsPattern})?$`);
+  const match = value.match(regex);
+  if (!match) return null;
+  const number = parseFloat(match[1]);
+  const unit = match[2] ? match[2] : null;
+  if (isNaN(number)) return null;
+  return { number, unit };
+}
+
+// src/utils/boxShadowValueParser.ts
+function isColorValue(node) {
+  if (!node) return false;
+  switch (node.type) {
+    case "Hash":
+      return true;
+    // #hex colors
+    case "Identifier":
+      return isValidColor(node.name);
+    case "Function":
+      return isCssColorFunction(node.name.toLowerCase());
+    default:
+      return false;
+  }
+}
+function isLengthValue(node) {
+  if (!node) return false;
+  switch (node.type) {
+    case "Dimension":
+      const dimensionStr = `${node.value}${node.unit}`;
+      return parseUnitValue(dimensionStr) !== null;
+    case "Number":
+      return Number(node.value) === 0;
+    default:
+      return false;
+  }
+}
+function isInsetKeyword(node) {
+  return node?.type === "Identifier" && node.name.toLowerCase() === "inset";
+}
+function extractShadowParts(valueText) {
+  const shadows = [];
+  let currentShadow = {
+    lengthParts: [],
+    colorParts: [],
+    inset: false
+  };
+  try {
+    const ast = (0, import_css_tree2.parse)(valueText, { context: "value" });
+    (0, import_css_tree2.walk)(ast, {
+      enter(node) {
+        if (node.type === "Function") {
+          return this.skip;
+        }
+        if (isInsetKeyword(node)) {
+          currentShadow.inset = true;
+        } else if (isLengthValue(node)) {
+          currentShadow.lengthParts.push((0, import_css_tree2.generate)(node));
+        } else if (isColorValue(node)) {
+          currentShadow.colorParts.push((0, import_css_tree2.generate)(node));
+        }
+      }
+    });
+    if (currentShadow.lengthParts.length > 0 || currentShadow.colorParts.length > 0 || currentShadow.inset) {
+      shadows.push(currentShadow);
+    }
+  } catch (error) {
+    return [];
+  }
+  return shadows;
+}
+function parseBoxShadowValue(value) {
+  const shadowStrings = value.split(",").map((s) => s.trim());
+  const allShadows = [];
+  for (const shadowString of shadowStrings) {
+    const shadows = extractShadowParts(shadowString);
+    const parsedShadows = shadows.map((shadow) => {
+      const shadowValue = {};
+      const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
+      lengthProps.forEach((prop, index) => {
+        if (shadow.lengthParts.length > index) {
+          shadowValue[prop] = shadow.lengthParts[index];
+        }
+      });
+      if (shadow.colorParts.length > 0) {
+        shadowValue.color = shadow.colorParts[0];
+      }
+      if (shadow.inset) {
+        shadowValue.inset = true;
+      }
+      return shadowValue;
+    });
+    allShadows.push(...parsedShadows);
+  }
+  return allShadows;
+}
+function normalizeLengthValue(value) {
+  if (!value) return "0px";
+  if (value === "0") return "0px";
+  return value;
+}
+function isBoxShadowMatch(parsedCssValue, parsedValueHook) {
+  if (parsedCssValue.length !== parsedValueHook.length) {
+    return false;
+  }
+  for (let i = 0; i < parsedCssValue.length; i++) {
+    const cssShadow = parsedCssValue[i];
+    const hookShadow = parsedValueHook[i];
+    if (cssShadow.color !== hookShadow.color || cssShadow.inset !== hookShadow.inset) {
+      return false;
+    }
+    const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
+    for (const prop of lengthProps) {
+      if (normalizeLengthValue(cssShadow[prop]) !== normalizeLengthValue(hookShadow[prop])) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isBoxShadowMatch,
+  parseBoxShadowValue
+});
+//# sourceMappingURL=boxShadowValueParser.js.map

package/build/utils/boxShadowValueParser.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/boxShadowValueParser.ts", "../../src/utils/color-lib-utils.ts", "../../src/utils/css-functions.ts", "../../src/utils/value-utils.ts"],
+  "sourcesContent": ["import { parse, walk, generate } from '@eslint/css-tree';\nimport { isValidColor } from './color-lib-utils';\nimport { parseUnitValue, type ParsedUnitValue } from './value-utils';\nimport { isCssColorFunction } from './css-functions';\n\nexport interface BoxShadowValue {\n  offsetX?: string;\n  offsetY?: string;\n  blurRadius?: string;\n  spreadRadius?: string;\n  color?: string;\n  inset?: boolean;\n}\n\ninterface ShadowParts {\n  lengthParts: string[];\n  colorParts: string[];\n  inset: boolean;\n}\n\n/**\n * Check if a CSS tree node represents a color value\n */\nfunction isColorValue(node: any): boolean {\n  if (!node) return false;\n  \n  switch (node.type) {\n    case 'Hash':\n      return true; // #hex colors\n    case 'Identifier':\n      return isValidColor(node.name);\n    case 'Function':\n      return isCssColorFunction(node.name.toLowerCase());\n    default:\n      return false;\n  }\n}\n\n/**\n * Check if a CSS tree node represents a length value\n */\nfunction isLengthValue(node: any): boolean {\n  if (!node) return false;\n  \n  switch (node.type) {\n    case 'Dimension':\n      // Use existing unit parsing to validate the unit\n      const dimensionStr = `${node.value}${node.unit}`;\n      return parseUnitValue(dimensionStr) !== null;\n    case 'Number':\n      // Zero values without units are valid lengths\n      return Number(node.value) === 0;\n    default:\n      return false;\n  }\n}\n\n/**\n * Check if a CSS tree node represents the 'inset' keyword\n */\nfunction isInsetKeyword(node: any): boolean {\n  return node?.type === 'Identifier' && node.name.toLowerCase() === 'inset';\n}\n\n/**\n * Extract shadow parts from CSS tree nodes\n */\nfunction extractShadowParts(valueText: string): ShadowParts[] {\n  const shadows: ShadowParts[] = [];\n  let currentShadow: ShadowParts = {\n    lengthParts: [],\n    colorParts: [],\n    inset: false\n  };\n\n  try {\n    const ast = parse(valueText, { context: 'value' as const });\n    \n    walk(ast, {\n      enter(node: any) {\n        // Skip nested function content for now\n        if (node.type === 'Function') {\n          return this.skip;\n        }\n        \n        if (isInsetKeyword(node)) {\n          currentShadow.inset = true;\n        } else if (isLengthValue(node)) {\n          currentShadow.lengthParts.push(generate(node));\n        } else if (isColorValue(node)) {\n          currentShadow.colorParts.push(generate(node));\n        }\n      }\n    });\n    \n    // Add the current shadow if it has any content\n    if (currentShadow.lengthParts.length > 0 || currentShadow.colorParts.length > 0 || currentShadow.inset) {\n      shadows.push(currentShadow);\n    }\n    \n  } catch (error) {\n    return [];\n  }\n\n  return shadows;\n}\n\n/**\n * Parse box-shadow value into structured format\n * Simplified version for ESLint v9 compatibility\n */\nexport function parseBoxShadowValue(value: string): BoxShadowValue[] {\n  // Handle multiple shadows separated by commas\n  const shadowStrings = value.split(',').map(s => s.trim());\n  const allShadows: BoxShadowValue[] = [];\n  \n  for (const shadowString of shadowStrings) {\n    const shadows = extractShadowParts(shadowString);\n    \n    const parsedShadows = shadows.map((shadow) => {\n      /**\n       * Box-shadow syntax:\n       * Two, three, or four <length> values:\n       * - offset-x offset-y [blur-radius] [spread-radius]\n       * Optionally: inset keyword and color value\n       */\n      const shadowValue: BoxShadowValue = {};\n      \n      // Map length parts to shadow properties\n      const lengthProps = ['offsetX', 'offsetY', 'blurRadius', 'spreadRadius'] as const;\n      lengthProps.forEach((prop, index) => {\n        if (shadow.lengthParts.length > index) {\n          shadowValue[prop] = shadow.lengthParts[index];\n        }\n      });\n      \n      // Add color if present\n      if (shadow.colorParts.length > 0) {\n        shadowValue.color = shadow.colorParts[0];\n      }\n      \n      // Add inset flag if present\n      if (shadow.inset) {\n        shadowValue.inset = true;\n      }\n      \n      return shadowValue;\n    });\n    \n    allShadows.push(...parsedShadows);\n  }\n  \n  return allShadows;\n}\n\n/**\n * Normalize length value for comparison\n */\nfunction normalizeLengthValue(value: string | undefined): string {\n  if (!value) return '0px';\n  if (value === '0') return '0px';\n  return value;\n}\n\n/**\n * Check if two parsed box-shadow values match\n */\nexport function isBoxShadowMatch(parsedCssValue: BoxShadowValue[], parsedValueHook: BoxShadowValue[]): boolean {\n  // If the number of shadows doesn't match, they're not equal\n  if (parsedCssValue.length !== parsedValueHook.length) {\n    return false;\n  }\n\n  // Compare each shadow in the array\n  for (let i = 0; i < parsedCssValue.length; i++) {\n    const cssShadow = parsedCssValue[i];\n    const hookShadow = parsedValueHook[i];\n\n    // Compare color and inset properties\n    if (cssShadow.color !== hookShadow.color || cssShadow.inset !== hookShadow.inset) {\n      return false;\n    }\n\n    // Compare length properties\n    const lengthProps = ['offsetX', 'offsetY', 'blurRadius', 'spreadRadius'] as const;\n    for (const prop of lengthProps) {\n      if (normalizeLengthValue(cssShadow[prop]) !== normalizeLengthValue(hookShadow[prop])) {\n        return false;\n      }\n    }\n  }\n\n  return true;\n}\n", "//stylelint-sds/packages/stylelint-plugin-slds/src/utils/color-lib-utils.ts\nimport { ValueToStylingHooksMapping, ValueToStylingHookEntry } from '@salesforce-ux/sds-metadata';\nimport chroma from 'chroma-js';\nimport { generate } from '@eslint/css-tree';\nimport { isCssColorFunction } from './css-functions';\n\nconst LAB_THRESHOLD = 25; // Adjust this to set how strict the matching should be\n\nconst isHardCodedColor = (color: string): boolean => {\n  const colorRegex =\n    /\\b(rgb|rgba)\\((\\s*\\d{1,3}\\s*,\\s*){2,3}\\s*(0|1|0?\\.\\d+)\\s*\\)|#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\\b|[a-zA-Z]+/g;\n  return colorRegex.test(color);\n};\n\nconst isHexCode = (color: string): boolean => {\n  const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/; // Pattern for #RGB or #RRGGBB\n  return hexPattern.test(color);\n};\n\n// Convert a named color or hex code into a hex format using chroma-js\nconst convertToHex = (color: string): string | null => {\n  try {\n    // Try converting the color using chroma-js, which handles both named and hex colors\n    return chroma(color).hex();\n  } catch (e) {\n    // If chroma can't process the color, it's likely invalid\n    return null;\n  }\n};\n\n// Find the closest color hook using LAB distance\nconst findClosestColorHook = (\n  color: string,\n  supportedColors:ValueToStylingHooksMapping,\n  cssProperty: string\n): string[] => {\n  const returnStylingHooks: string[] = [];\n  const closestHooksWithSameProperty: { name: string; distance: number }[] = [];\n  const closestHooksWithoutSameProperty: { name: string; distance: number }[] =\n    [];\n  const closestHooksWithAllProperty: { name: string; distance: number }[] =\n    [];\n  const labColor = chroma(color).lab();\n\n  Object.entries(supportedColors).forEach(([sldsValue, data]) => {\n    if (sldsValue && isHexCode(sldsValue)) {\n      const hooks = data as ValueToStylingHookEntry[]; // Get the hooks for the sldsValue\n\n      hooks.forEach((hook) => {\n        const labSupportedColor = chroma(sldsValue).lab();\n        const distance = (JSON.stringify(labColor) === JSON.stringify(labSupportedColor)) ? 0\n            : chroma.distance(chroma.lab(...labColor), chroma.lab(...labSupportedColor), \"lab\");\n        // Check if the hook has the same property\n        if (hook.properties.includes(cssProperty)) {\n          // Add to same property hooks if within threshold\n          if (distance <= LAB_THRESHOLD) {\n            closestHooksWithSameProperty.push({ name: hook.name, distance });\n          }\n        } \n        // Check for the universal selector\n        else if ( hook.properties.includes(\"*\") ){\n          // Add to same property hooks if within threshold\n          if (distance <= LAB_THRESHOLD) {\n            closestHooksWithAllProperty.push({ name: hook.name, distance });\n          }\n        }\n        else {\n          // Add to different property hooks if within threshold\n          if (distance <= LAB_THRESHOLD) {\n            closestHooksWithoutSameProperty.push({ name: hook.name, distance });\n          }\n        }\n      });\n    }\n  });\n\n// Group hooks by their priority\nconst closesthookGroups = [\n  { hooks: closestHooksWithSameProperty, distance: 0 },\n  { hooks: closestHooksWithAllProperty, distance: 0 },\n  { hooks: closestHooksWithSameProperty, distance: Infinity },  // For hooks with distance > 0\n  { hooks: closestHooksWithAllProperty, distance: Infinity },\n  { hooks: closestHooksWithoutSameProperty, distance: Infinity },\n];\n\nfor (const group of closesthookGroups) {\n  // Filter hooks based on the distance condition\n  const filteredHooks = group.hooks.filter(h => \n    group.distance === 0 ? h.distance === 0 : h.distance > 0\n  );\n\n  if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {\n    filteredHooks.sort((a, b) => a.distance - b.distance);\n    returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));\n  }\n}\n\n\n  return Array.from(new Set(returnStylingHooks));\n};\n\n/**\n * This method is usefull to identify all possible css color values.\n *  - names colors\n *  - 6,8 digit hex\n *  - rgb and rgba\n *  - hsl and hsla\n */\nconst isValidColor = (val:string):boolean => chroma.valid(val);\n\n/**\n * Extract color value from CSS AST node\n */\nconst extractColorValue = (node: any): string | null => {\n  let colorValue: string | null = null;\n  \n  switch (node.type) {\n    case 'Hash':\n      colorValue = `#${node.value}`;\n      break;\n    case 'Identifier':\n      colorValue = node.name;\n      break;\n    case 'Function':\n      // Only extract color functions\n      if (isCssColorFunction(node.name)) {\n        colorValue = generate(node);\n      }\n      break;\n  }\n  \n  return colorValue && isValidColor(colorValue) ? colorValue : null;\n};\n\nexport { findClosestColorHook, convertToHex, isHexCode, isHardCodedColor, isValidColor, extractColorValue };\n", "//stylelint-sds/packages/stylelint-plugin-slds/src/utils/css-functions.ts\n/**\n * Complete list of CSS functions that should be preserved/recognized\n */\nconst CSS_FUNCTIONS = [\n    'attr',\n    'calc',\n    'color-mix',\n    'conic-gradient',\n    'counter',\n    'cubic-bezier',\n    'linear-gradient',\n    'max',\n    'min',\n    'radial-gradient',\n    'repeating-conic-gradient',\n    'repeating-linear-gradient',\n    'repeating-radial-gradient',\n    'var'\n  ];\n  \n  \n  const CSS_MATH_FUNCTIONS = ['calc', 'min', 'max'];\n  \n  \n  const RGB_COLOR_FUNCTIONS = ['rgb', 'rgba', 'hsl', 'hsla'];\n  \n  /**\n   * Regex for matching any CSS function (for general detection)\n   * Matches function names within other text\n   */\n  const cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join('|')})`);\n  \n  \n  const cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join('|')})$`);\n  \n  \n  const cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join('|')})$`);\n  \n  export function containsCssFunction(value: string): boolean {\n    return cssFunctionsRegex.test(value);\n  }\n  \n  /**\n   * Check if a value is exactly a CSS function name\n   */\n  export function isCssFunction(value: string): boolean {\n    return cssFunctionsExactRegex.test(value);\n  }\n  \n  export function isCssMathFunction(value: string): boolean {\n    return cssMathFunctionsRegex.test(value);\n  }\n  \n  export function isCssColorFunction(value: string): boolean {\n    return RGB_COLOR_FUNCTIONS.includes(value);\n  }", "// Simplified value parsing\n\n/**\n * Checks if a value is a CSS global value.\n *\n * CSS global values are special keywords that can be used for any CSS property and have a universal meaning:\n * - initial: Resets the property to its initial value as defined by the CSS specification.\n * - inherit: Inherits the value from the parent element.\n * - unset: Acts as inherit if the property is inheritable, otherwise acts as initial.\n * - revert: Rolls back the property to the value established by the user-agent or user styles.\n * - revert-layer: Rolls back the property to the value established by the previous cascade layer.\n *\n * All CSS properties accept these global values, including but not limited to:\n *   - color\n *   - background\n *   - font-size\n *   - margin\n *   - padding\n *   - border\n *   - display\n *   - position\n *   - z-index\n *   - and many more\n *\n * These values are part of the CSS standard and are not considered violations, even if a rule would otherwise flag a value as invalid or non-design-token. They are always allowed for any property.\n *\n * @param value The CSS value to check.\n * @returns True if the value is a CSS global value, false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inherit\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/unset\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer\n */\nexport function isGlobalValue(value: string): boolean {\n    return value === 'initial' || value === 'inherit' || value === 'unset' || value === 'revert' || value === 'revert-layer';\n  }\n\n// Configurable list of allowed CSS units\nexport const ALLOWED_UNITS = ['px', 'em', 'rem', '%', 'ch'];\n\nexport type ParsedUnitValue = {\n  unit: 'px' | 'rem' | '%' | 'em' | 'ch' | null;\n  number: number;\n} | null;\n\nexport function parseUnitValue(value: string): ParsedUnitValue {\n  if (!value) return null;\n  \n  // Create regex pattern from allowed units\n  const unitsPattern = ALLOWED_UNITS.join('|');\n  const regex = new RegExp(`^(-?\\\\d*\\\\.?\\\\d+)(${unitsPattern})?$`);\n  const match = value.match(regex);\n  if (!match) return null;\n  \n  const number = parseFloat(match[1]);\n  const unit = match[2] ? (match[2] as 'px' | 'rem' | '%' | 'em' | 'ch') : null; // Keep unitless values as null\n  \n  if (isNaN(number)) return null;\n  \n  return { number, unit };\n}\n\nexport function toAlternateUnitValue(numberVal: number, unitType: 'px' | 'rem' | '%' | 'em' | 'ch' | null): ParsedUnitValue {\n    if (unitType === 'px') {\n      let floatValue = parseFloat(`${numberVal / 16}`);\n      if (!isNaN(floatValue)) {\n        return {\n          unit: 'rem',\n          number: parseFloat(floatValue.toFixed(4))\n        }\n      }\n    } else if (unitType === 'rem') {\n      const intValue = parseInt(`${numberVal * 16}`);\n      if (!isNaN(intValue)) {\n        return {\n          unit: 'px',\n          number: intValue\n        }\n      }\n    }\n    // For other units (%, em, ch) and unitless values, no alternate unit conversion available\n    // These units are context-dependent and don't have standard conversion ratios\n    return null;\n}"],
+  "mappings": "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",
+  "names": ["import_css_tree", "chroma"]
+}

package/build/utils/color-lib-utils.js

@@ -0,0 +1,160 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/color-lib-utils.ts
+var color_lib_utils_exports = {};
+__export(color_lib_utils_exports, {
+  convertToHex: () => convertToHex,
+  extractColorValue: () => extractColorValue,
+  findClosestColorHook: () => findClosestColorHook,
+  isHardCodedColor: () => isHardCodedColor,
+  isHexCode: () => isHexCode,
+  isValidColor: () => isValidColor
+});
+module.exports = __toCommonJS(color_lib_utils_exports);
+var import_chroma_js = __toESM(require("chroma-js"));
+var import_css_tree = require("@eslint/css-tree");
+
+// src/utils/css-functions.ts
+var CSS_FUNCTIONS = [
+  "attr",
+  "calc",
+  "color-mix",
+  "conic-gradient",
+  "counter",
+  "cubic-bezier",
+  "linear-gradient",
+  "max",
+  "min",
+  "radial-gradient",
+  "repeating-conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient",
+  "var"
+];
+var CSS_MATH_FUNCTIONS = ["calc", "min", "max"];
+var RGB_COLOR_FUNCTIONS = ["rgb", "rgba", "hsl", "hsla"];
+var cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join("|")})`);
+var cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join("|")})$`);
+var cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join("|")})$`);
+function isCssColorFunction(value) {
+  return RGB_COLOR_FUNCTIONS.includes(value);
+}
+
+// src/utils/color-lib-utils.ts
+var LAB_THRESHOLD = 25;
+var isHardCodedColor = (color) => {
+  const colorRegex = /\b(rgb|rgba)\((\s*\d{1,3}\s*,\s*){2,3}\s*(0|1|0?\.\d+)\s*\)|#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\b|[a-zA-Z]+/g;
+  return colorRegex.test(color);
+};
+var isHexCode = (color) => {
+  const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
+  return hexPattern.test(color);
+};
+var convertToHex = (color) => {
+  try {
+    return (0, import_chroma_js.default)(color).hex();
+  } catch (e) {
+    return null;
+  }
+};
+var findClosestColorHook = (color, supportedColors, cssProperty) => {
+  const returnStylingHooks = [];
+  const closestHooksWithSameProperty = [];
+  const closestHooksWithoutSameProperty = [];
+  const closestHooksWithAllProperty = [];
+  const labColor = (0, import_chroma_js.default)(color).lab();
+  Object.entries(supportedColors).forEach(([sldsValue, data]) => {
+    if (sldsValue && isHexCode(sldsValue)) {
+      const hooks = data;
+      hooks.forEach((hook) => {
+        const labSupportedColor = (0, import_chroma_js.default)(sldsValue).lab();
+        const distance = JSON.stringify(labColor) === JSON.stringify(labSupportedColor) ? 0 : import_chroma_js.default.distance(import_chroma_js.default.lab(...labColor), import_chroma_js.default.lab(...labSupportedColor), "lab");
+        if (hook.properties.includes(cssProperty)) {
+          if (distance <= LAB_THRESHOLD) {
+            closestHooksWithSameProperty.push({ name: hook.name, distance });
+          }
+        } else if (hook.properties.includes("*")) {
+          if (distance <= LAB_THRESHOLD) {
+            closestHooksWithAllProperty.push({ name: hook.name, distance });
+          }
+        } else {
+          if (distance <= LAB_THRESHOLD) {
+            closestHooksWithoutSameProperty.push({ name: hook.name, distance });
+          }
+        }
+      });
+    }
+  });
+  const closesthookGroups = [
+    { hooks: closestHooksWithSameProperty, distance: 0 },
+    { hooks: closestHooksWithAllProperty, distance: 0 },
+    { hooks: closestHooksWithSameProperty, distance: Infinity },
+    // For hooks with distance > 0
+    { hooks: closestHooksWithAllProperty, distance: Infinity },
+    { hooks: closestHooksWithoutSameProperty, distance: Infinity }
+  ];
+  for (const group of closesthookGroups) {
+    const filteredHooks = group.hooks.filter(
+      (h) => group.distance === 0 ? h.distance === 0 : h.distance > 0
+    );
+    if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {
+      filteredHooks.sort((a, b) => a.distance - b.distance);
+      returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));
+    }
+  }
+  return Array.from(new Set(returnStylingHooks));
+};
+var isValidColor = (val) => import_chroma_js.default.valid(val);
+var extractColorValue = (node) => {
+  let colorValue = null;
+  switch (node.type) {
+    case "Hash":
+      colorValue = `#${node.value}`;
+      break;
+    case "Identifier":
+      colorValue = node.name;
+      break;
+    case "Function":
+      if (isCssColorFunction(node.name)) {
+        colorValue = (0, import_css_tree.generate)(node);
+      }
+      break;
+  }
+  return colorValue && isValidColor(colorValue) ? colorValue : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  convertToHex,
+  extractColorValue,
+  findClosestColorHook,
+  isHardCodedColor,
+  isHexCode,
+  isValidColor
+});
+//# sourceMappingURL=color-lib-utils.js.map

package/build/utils/color-lib-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/color-lib-utils.ts", "../../src/utils/css-functions.ts"],
+  "sourcesContent": ["//stylelint-sds/packages/stylelint-plugin-slds/src/utils/color-lib-utils.ts\nimport { ValueToStylingHooksMapping, ValueToStylingHookEntry } from '@salesforce-ux/sds-metadata';\nimport chroma from 'chroma-js';\nimport { generate } from '@eslint/css-tree';\nimport { isCssColorFunction } from './css-functions';\n\nconst LAB_THRESHOLD = 25; // Adjust this to set how strict the matching should be\n\nconst isHardCodedColor = (color: string): boolean => {\n  const colorRegex =\n    /\\b(rgb|rgba)\\((\\s*\\d{1,3}\\s*,\\s*){2,3}\\s*(0|1|0?\\.\\d+)\\s*\\)|#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\\b|[a-zA-Z]+/g;\n  return colorRegex.test(color);\n};\n\nconst isHexCode = (color: string): boolean => {\n  const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/; // Pattern for #RGB or #RRGGBB\n  return hexPattern.test(color);\n};\n\n// Convert a named color or hex code into a hex format using chroma-js\nconst convertToHex = (color: string): string | null => {\n  try {\n    // Try converting the color using chroma-js, which handles both named and hex colors\n    return chroma(color).hex();\n  } catch (e) {\n    // If chroma can't process the color, it's likely invalid\n    return null;\n  }\n};\n\n// Find the closest color hook using LAB distance\nconst findClosestColorHook = (\n  color: string,\n  supportedColors:ValueToStylingHooksMapping,\n  cssProperty: string\n): string[] => {\n  const returnStylingHooks: string[] = [];\n  const closestHooksWithSameProperty: { name: string; distance: number }[] = [];\n  const closestHooksWithoutSameProperty: { name: string; distance: number }[] =\n    [];\n  const closestHooksWithAllProperty: { name: string; distance: number }[] =\n    [];\n  const labColor = chroma(color).lab();\n\n  Object.entries(supportedColors).forEach(([sldsValue, data]) => {\n    if (sldsValue && isHexCode(sldsValue)) {\n      const hooks = data as ValueToStylingHookEntry[]; // Get the hooks for the sldsValue\n\n      hooks.forEach((hook) => {\n        const labSupportedColor = chroma(sldsValue).lab();\n        const distance = (JSON.stringify(labColor) === JSON.stringify(labSupportedColor)) ? 0\n            : chroma.distance(chroma.lab(...labColor), chroma.lab(...labSupportedColor), \"lab\");\n        // Check if the hook has the same property\n        if (hook.properties.includes(cssProperty)) {\n          // Add to same property hooks if within threshold\n          if (distance <= LAB_THRESHOLD) {\n            closestHooksWithSameProperty.push({ name: hook.name, distance });\n          }\n        } \n        // Check for the universal selector\n        else if ( hook.properties.includes(\"*\") ){\n          // Add to same property hooks if within threshold\n          if (distance <= LAB_THRESHOLD) {\n            closestHooksWithAllProperty.push({ name: hook.name, distance });\n          }\n        }\n        else {\n          // Add to different property hooks if within threshold\n          if (distance <= LAB_THRESHOLD) {\n            closestHooksWithoutSameProperty.push({ name: hook.name, distance });\n          }\n        }\n      });\n    }\n  });\n\n// Group hooks by their priority\nconst closesthookGroups = [\n  { hooks: closestHooksWithSameProperty, distance: 0 },\n  { hooks: closestHooksWithAllProperty, distance: 0 },\n  { hooks: closestHooksWithSameProperty, distance: Infinity },  // For hooks with distance > 0\n  { hooks: closestHooksWithAllProperty, distance: Infinity },\n  { hooks: closestHooksWithoutSameProperty, distance: Infinity },\n];\n\nfor (const group of closesthookGroups) {\n  // Filter hooks based on the distance condition\n  const filteredHooks = group.hooks.filter(h => \n    group.distance === 0 ? h.distance === 0 : h.distance > 0\n  );\n\n  if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {\n    filteredHooks.sort((a, b) => a.distance - b.distance);\n    returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));\n  }\n}\n\n\n  return Array.from(new Set(returnStylingHooks));\n};\n\n/**\n * This method is usefull to identify all possible css color values.\n *  - names colors\n *  - 6,8 digit hex\n *  - rgb and rgba\n *  - hsl and hsla\n */\nconst isValidColor = (val:string):boolean => chroma.valid(val);\n\n/**\n * Extract color value from CSS AST node\n */\nconst extractColorValue = (node: any): string | null => {\n  let colorValue: string | null = null;\n  \n  switch (node.type) {\n    case 'Hash':\n      colorValue = `#${node.value}`;\n      break;\n    case 'Identifier':\n      colorValue = node.name;\n      break;\n    case 'Function':\n      // Only extract color functions\n      if (isCssColorFunction(node.name)) {\n        colorValue = generate(node);\n      }\n      break;\n  }\n  \n  return colorValue && isValidColor(colorValue) ? colorValue : null;\n};\n\nexport { findClosestColorHook, convertToHex, isHexCode, isHardCodedColor, isValidColor, extractColorValue };\n", "//stylelint-sds/packages/stylelint-plugin-slds/src/utils/css-functions.ts\n/**\n * Complete list of CSS functions that should be preserved/recognized\n */\nconst CSS_FUNCTIONS = [\n    'attr',\n    'calc',\n    'color-mix',\n    'conic-gradient',\n    'counter',\n    'cubic-bezier',\n    'linear-gradient',\n    'max',\n    'min',\n    'radial-gradient',\n    'repeating-conic-gradient',\n    'repeating-linear-gradient',\n    'repeating-radial-gradient',\n    'var'\n  ];\n  \n  \n  const CSS_MATH_FUNCTIONS = ['calc', 'min', 'max'];\n  \n  \n  const RGB_COLOR_FUNCTIONS = ['rgb', 'rgba', 'hsl', 'hsla'];\n  \n  /**\n   * Regex for matching any CSS function (for general detection)\n   * Matches function names within other text\n   */\n  const cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join('|')})`);\n  \n  \n  const cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join('|')})$`);\n  \n  \n  const cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join('|')})$`);\n  \n  export function containsCssFunction(value: string): boolean {\n    return cssFunctionsRegex.test(value);\n  }\n  \n  /**\n   * Check if a value is exactly a CSS function name\n   */\n  export function isCssFunction(value: string): boolean {\n    return cssFunctionsExactRegex.test(value);\n  }\n  \n  export function isCssMathFunction(value: string): boolean {\n    return cssMathFunctionsRegex.test(value);\n  }\n  \n  export function isCssColorFunction(value: string): boolean {\n    return RGB_COLOR_FUNCTIONS.includes(value);\n  }"],
+  "mappings": "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",
+  "names": ["chroma"]
+}

package/build/utils/css-functions.js

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/css-functions.ts
+var css_functions_exports = {};
+__export(css_functions_exports, {
+  containsCssFunction: () => containsCssFunction,
+  isCssColorFunction: () => isCssColorFunction,
+  isCssFunction: () => isCssFunction,
+  isCssMathFunction: () => isCssMathFunction
+});
+module.exports = __toCommonJS(css_functions_exports);
+var CSS_FUNCTIONS = [
+  "attr",
+  "calc",
+  "color-mix",
+  "conic-gradient",
+  "counter",
+  "cubic-bezier",
+  "linear-gradient",
+  "max",
+  "min",
+  "radial-gradient",
+  "repeating-conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient",
+  "var"
+];
+var CSS_MATH_FUNCTIONS = ["calc", "min", "max"];
+var RGB_COLOR_FUNCTIONS = ["rgb", "rgba", "hsl", "hsla"];
+var cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join("|")})`);
+var cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join("|")})$`);
+var cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join("|")})$`);
+function containsCssFunction(value) {
+  return cssFunctionsRegex.test(value);
+}
+function isCssFunction(value) {
+  return cssFunctionsExactRegex.test(value);
+}
+function isCssMathFunction(value) {
+  return cssMathFunctionsRegex.test(value);
+}
+function isCssColorFunction(value) {
+  return RGB_COLOR_FUNCTIONS.includes(value);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  containsCssFunction,
+  isCssColorFunction,
+  isCssFunction,
+  isCssMathFunction
+});
+//# sourceMappingURL=css-functions.js.map

package/build/utils/css-functions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/css-functions.ts"],
+  "sourcesContent": ["//stylelint-sds/packages/stylelint-plugin-slds/src/utils/css-functions.ts\n/**\n * Complete list of CSS functions that should be preserved/recognized\n */\nconst CSS_FUNCTIONS = [\n    'attr',\n    'calc',\n    'color-mix',\n    'conic-gradient',\n    'counter',\n    'cubic-bezier',\n    'linear-gradient',\n    'max',\n    'min',\n    'radial-gradient',\n    'repeating-conic-gradient',\n    'repeating-linear-gradient',\n    'repeating-radial-gradient',\n    'var'\n  ];\n  \n  \n  const CSS_MATH_FUNCTIONS = ['calc', 'min', 'max'];\n  \n  \n  const RGB_COLOR_FUNCTIONS = ['rgb', 'rgba', 'hsl', 'hsla'];\n  \n  /**\n   * Regex for matching any CSS function (for general detection)\n   * Matches function names within other text\n   */\n  const cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join('|')})`);\n  \n  \n  const cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join('|')})$`);\n  \n  \n  const cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join('|')})$`);\n  \n  export function containsCssFunction(value: string): boolean {\n    return cssFunctionsRegex.test(value);\n  }\n  \n  /**\n   * Check if a value is exactly a CSS function name\n   */\n  export function isCssFunction(value: string): boolean {\n    return cssFunctionsExactRegex.test(value);\n  }\n  \n  export function isCssMathFunction(value: string): boolean {\n    return cssMathFunctionsRegex.test(value);\n  }\n  \n  export function isCssColorFunction(value: string): boolean {\n    return RGB_COLOR_FUNCTIONS.includes(value);\n  }"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,IAAM,gBAAgB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGA,IAAM,qBAAqB,CAAC,QAAQ,OAAO,KAAK;AAGhD,IAAM,sBAAsB,CAAC,OAAO,QAAQ,OAAO,MAAM;AAMzD,IAAM,oBAAoB,IAAI,OAAO,MAAM,cAAc,KAAK,GAAG,CAAC,GAAG;AAGrE,IAAM,yBAAyB,IAAI,OAAO,OAAO,cAAc,KAAK,GAAG,CAAC,IAAI;AAG5E,IAAM,wBAAwB,IAAI,OAAO,OAAO,mBAAmB,KAAK,GAAG,CAAC,IAAI;AAEzE,SAAS,oBAAoB,OAAwB;AAC1D,SAAO,kBAAkB,KAAK,KAAK;AACrC;AAKO,SAAS,cAAc,OAAwB;AACpD,SAAO,uBAAuB,KAAK,KAAK;AAC1C;AAEO,SAAS,kBAAkB,OAAwB;AACxD,SAAO,sBAAsB,KAAK,KAAK;AACzC;AAEO,SAAS,mBAAmB,OAAwB;AACzD,SAAO,oBAAoB,SAAS,KAAK;AAC3C;",
+  "names": []
+}