@alexlit/config-stylelint 60.13.1 → 60.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexlit/config-stylelint",
-  "version": "60.13.1",
+  "version": "60.13.3",
   "private": false,
   "description": "Stylelint config",
   "keywords": [
@@ -26,8 +26,7 @@
   "files": [
     "README.md",
     "index.js",
-    "plugins",
-    "vendor"
+    "plugins"
   ],
   "scripts": {
     "lint": "cd ../../ && ./scripts/lint.stylelint.sh",
@@ -43,7 +42,6 @@
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.3",
     "stylelint": "17.11.0",
-    "stylelint-color-format": "file:./vendor/stylelint-color-format",
     "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",

package/plugins/color-format.js

@@ -1,11 +1,189 @@
-/**
- * TODO: update plugin from ^1.1.0
- *
- * @type {import('stylelint').Config}
- *
- * @see [stylelint-color-format](https://github.com/filipekiss/stylelint-color-format)
- */
+import stylelint from 'stylelint';
+
+const { createPlugin } = stylelint;
+const { report, ruleMessages, validateOptions } = stylelint.utils;
+
+const ruleName = 'color-format/format';
+
+const hexToRgb = (hex) => {
+  const value = hex.replace('#', '');
+  const number = Number.parseInt(value, 16);
+  const r = (number >> 16) & 255;
+  const g = (number >> 8) & 255;
+  const b = number & 255;
+
+  if (value.length === 3 || value.length === 6) {
+    return { r, g, b, a: 1 };
+  }
+
+  const a = Number.parseFloat((((number >> 24) & 255) / 255).toFixed(2));
+
+  return { r, g, b, a };
+};
+
+const rgbToHsl = ({ r, g, b }) => {
+  const rN = r / 255;
+  const gN = g / 255;
+  const bN = b / 255;
+
+  const max = Math.max(rN, gN, bN);
+  const min = Math.min(rN, gN, bN);
+  const delta = max - min;
+
+  const lightness = (max + min) / 2;
+
+  if (delta === 0) {
+    return { h: 0, s: 0, l: Math.round(lightness * 100) };
+  }
+
+  const saturation = lightness > 0.5
+    ? delta / (2 - max - min)
+    : delta / (max + min);
+
+  let hue;
+
+  switch (max) {
+    case rN: {
+      hue = ((gN - bN) / delta + (gN < bN ? 6 : 0)) / 6;
+
+      break;
+    }
+
+    case gN: {
+      hue = ((bN - rN) / delta + 2) / 6;
+
+      break;
+    }
+
+    default: {
+      hue = ((rN - gN) / delta + 4) / 6;
+    }
+  }
+
+  return {
+    h: Math.round(hue * 360),
+    s: Math.round(saturation * 100),
+    l: Math.round(lightness * 100),
+  };
+};
+
+const formatColor = (hex, format) => {
+  const { r, g, b, a } = hexToRgb(hex);
+
+  if (format === 'rgb' || format === 'rgba') {
+    if (a < 1) {
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  const { h, s, l } = rgbToHsl({ r, g, b });
+
+  if (a < 1) {
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+
+  return `hsl(${h}, ${s}%, ${l}%)`;
+};
+
+const styleSearch = (source, target, callback) => {
+  let startIndex = 0;
+
+  while (startIndex < source.length) {
+    const index = source.indexOf(target, startIndex);
+
+    if (index === -1) {
+      break;
+    }
+
+    callback({ startIndex: index, endIndex: index + target.length });
+
+    startIndex = index + 1;
+  }
+};
+
+const messages = ruleMessages(ruleName, {
+  custom: (message) => message,
+  rejected: (hex) => `Unexpected hex color "${hex}"`,
+});
+
+const rule = function (actual, options, context) {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual,
+      possible: {
+        format: ['rgb', 'rgba', 'hsl', 'hsla'],
+      },
+    });
+
+    if (!validOptions) {
+      return;
+    }
+
+    root.walkDecls((decl) => {
+      const declString = decl.toString();
+      const fixPositions = [];
+
+      styleSearch(declString, '#', (match) => {
+        if (!/[:,\s]/.test(declString[match.startIndex - 1])) {
+          return;
+        }
+
+        const hexMatch = /^#[0-9A-Z]+/i.exec(
+          declString.slice(match.startIndex),
+        );
+
+        if (!hexMatch) {
+          return;
+        }
+
+        const hexValue = hexMatch[0];
+
+        if (context && context.fix) {
+          fixPositions.unshift({
+            fixTo: actual.format,
+            hexValue,
+            startIndex: match.startIndex,
+          });
+
+          return;
+        }
+
+        const message = actual && actual.message
+          ? messages.custom(actual.message)
+          : messages.rejected(hexValue);
+
+        report({
+          endIndex: match.endIndex,
+          index: match.startIndex,
+          message,
+          node: decl,
+          result,
+          ruleName,
+        });
+      });
+
+      if (fixPositions.length > 0) {
+        for (const fixPosition of fixPositions) {
+          const hexes = [...decl.value.matchAll(/#[0-9A-Z]+/gi)];
+
+          for (const hexMatch of hexes) {
+            decl.value = decl.value.replace(
+              hexMatch[0],
+              formatColor(hexMatch[0], fixPosition.fixTo),
+            );
+          }
+        }
+      }
+    });
+  };
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+
 export default {
-  plugins: ['stylelint-color-format'],
+  plugins: [createPlugin(ruleName, rule)],
   rules: { 'color-format/format': { format: 'rgb' } },
 };

package/vendor/stylelint-color-format/index.js

@@ -1,5 +0,0 @@
-const {createPlugin} = require('stylelint');
-
-const rules = require('./rules');
-
-module.exports = [createPlugin('color-format/format', rules['format'])];

package/vendor/stylelint-color-format/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "stylelint-color-format",
-  "version": "1.1.0",
-  "description": "Convert Hex colors to either RGBA or HSLA",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/filipekiss/stylelint-color-format.git"
-  },
-  "dependencies": {
-    "color": "^3.0.0",
-    "style-search": "^0.1.0"
-  },
-  "peerDependencies": {
-    "stylelint": ">=8.0.0"
-  },
-  "keywords": [
-    "stylelint",
-    "stylelint-plugin",
-    "css",
-    "sass",
-    "scss"
-  ],
-  "author": "Filipe Kiss <eu@filipekiss.com.br>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/filipekiss/stylelint-color-format/issues"
-  },
-  "homepage": "https://github.com/filipekiss/stylelint-color-format#readme",
-  "engines": {
-    "node": ">=7"
-  }
-}

package/vendor/stylelint-color-format/rules/color-format/format.js

@@ -1,119 +0,0 @@
-/* eslint-disable unicorn/no-abusive-eslint-disable */
-/* eslint-disable */
-const colorConverter = require('color');
-const styleSearch = require('style-search');
-const stylelint = require('stylelint');
-
-const {report, ruleMessages, validateOptions} = stylelint.utils;
-
-const ruleName = 'color-format/format';
-
-const fixColorFormat = (value, fixer) => {
-  if (!value) {
-    return value;
-  }
-
-  // Extract the color from value
-  const hexMatch = value.match(/#[0-9A-Z]+/gi);
-
-  if (!hexMatch) {
-    return value;
-  }
-
-  const colorTranslation = hexMatch.reduce((table, hexColor) => {
-    const color = colorConverter(hexColor);
-
-    table[hexColor] = fixer.fixTo.includes('hsl')
-      ? color.hsl().round().string()
-      : color.rgb().string();
-
-    return table;
-  }, {});
-
-  Object.entries(colorTranslation).forEach(colorTuple => {
-    const hexColor = colorTuple[0];
-    const fixedColor = colorTuple[1];
-
-    value = value.replace(hexColor, fixedColor);
-  });
-
-  return value;
-};
-
-const messages = ruleMessages(ruleName, {
-  custom: message => message,
-  rejected: hex => `Unexpected hex color "${hex}"`,
-});
-
-const rule = function (actual, options, context) {
-  return (root, result) => {
-    const validOptions = validateOptions(result, ruleName, {
-      actual,
-      possible: {
-        format: ['rgb', 'rgba', 'hsl', 'hsla'],
-      },
-    });
-
-    if (!validOptions) {
-      return;
-    }
-
-    root.walkDecls(decl => {
-      const declString = decl.toString();
-      const fixPositions = [];
-
-      styleSearch({source: declString, target: '#'}, match => {
-        // If there's not a colon, comma, or whitespace character before, we'll assume this is
-        // not intended to be a hex color, but is instead something like the
-        // hash in a url() argument
-        if (!/[:,\s]/.test(declString[match.startIndex - 1])) {
-          return;
-        }
-
-        const hexMatch = /^#[0-9A-Z]+/i.exec(
-          declString.slice(match.startIndex)
-        );
-
-        if (!hexMatch) {
-          return;
-        }
-
-        const hexValue = hexMatch[0];
-
-        if (context && context.fix) {
-          fixPositions.unshift({
-            fixTo: actual.format,
-            hexValue,
-            startIndex: match.startIndex,
-          });
-
-          return;
-        }
-
-        const message =
-          actual && actual.message
-            ? messages.custom(actual.message)
-            : messages.rejected(hexValue);
-
-        report({
-          endIndex: match.endIndex,
-          index: match.startIndex,
-          message: message,
-          node: decl,
-          result,
-          ruleName,
-        });
-      });
-
-      if (fixPositions.length > 0) {
-        fixPositions.forEach(fixPosition => {
-          decl.value = fixColorFormat(decl.value, fixPosition);
-        });
-      }
-    });
-  };
-};
-
-rule.ruleName = ruleName;
-rule.messages = messages;
-module.exports = rule;

package/vendor/stylelint-color-format/rules/index.js

@@ -1,3 +0,0 @@
-module.exports = {
-  format: require('./color-format/format'),
-};