hsl fixes

.vscodeignore

@@ -5,3 +5,24 @@ test/**
 jsconfig.json
 vsc-extension-quickstart.md
 .eslintrc
+
+# Ignore the source code
+src
+*.ts
+*.map
+*.js
+*.js.map
+
+# Ignore node_modules
+node_modules
+
+# Ignore test and other files
+test
+tests
+.vscode
+.npmignore
+*.log
+*.zip
+.DS_Store
+.gitignore
+.vscodeignore

CHANGELOG.md

@@ -3,6 +3,24 @@
 
 ## [Unreleased]
 
+## [2.10.0]
+
+- Add support for hsl without function
+
+## [2.9.3]
+
+- Bugfix
+
+## [2.9.0]
+
+- Do dynamic contrast for hsl as well
+
+## [2.8.0]
+
+### Added
+
+- Support for hsl colors with decimal percentages
+
 ## [2.6.0]
 
 ### Added

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "color-highlight",
-  "displayName": "Color Highlight",
+  "name": "color-highlight-decimals",
+  "displayName": "Color Highlight with decimals",
   "description": "Highlight web colors in your editor",
-  "version": "2.6.0",
-  "publisher": "naumovs",
+  "version": "2.10.0",
+  "publisher": "ps-george",
   "license": "GPL-3.0",
   "engines": {
     "vscode": "^1.57.0"
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "build": "webpack --mode development",
+    "package": "vsce package",
     "vscode:prepublish": "webpack --mode production",
     "dev": "webpack --mode development -w",
     "postinstall": "node ./node_modules/vscode/bin/install",

src/lib/dynamic-contrast.js

@@ -11,12 +11,32 @@
 // @return      string of the form #RRGGBB
 import webColors from 'color-name';
 
+/**
+ * s and l are percentages, h is an angle in degrees out of 360.
+ * @param {int} h 
+ * @param {float} s 
+ * @param {float} l 
+ * @returns {Array}
+ */
+function hsl2rgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const k = n => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = n =>
+    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+};
+
 export function getColorContrast(color) {
   const rgbExp = /^rgba?[\s+]?\(\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*(?:,\s*([\d.]+)\s*)?\)/im,
-    hexExp = /^(?:#)|([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/igm;
+    hexExp = /^(?:#)|([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/igm,
+    hslExp = /^(?:hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)|([\d.]+)\s+([\d.]+)%\s+([\d.]+)%)/im;
   let rgb = color.match(rgbExp),
     hex = color.match(hexExp),
+    hsl = color.match(hslExp),
     r, g, b;
+
   if (rgb) {
     r = parseInt(rgb[1], 10);
     g = parseInt(rgb[2], 10);
@@ -33,6 +53,20 @@ export function getColorContrast(color) {
     r = parseInt(hex.substr(0, 2), 16);
     g = parseInt(hex.substr(2, 2), 16);
     b = parseInt(hex.substr(4, 2), 16);
+  } else if (hsl) {
+    let h, s, l;
+    if (hsl[1]) {
+      // HSL(A) function notation
+      h = parseFloat(hsl[1]);
+      s = parseFloat(hsl[2]);
+      l = parseFloat(hsl[3]);
+    } else {
+      // Space-separated HSL values
+      h = parseFloat(hsl[5]);
+      s = parseFloat(hsl[6]);
+      l = parseFloat(hsl[7]);
+    }
+    [r, g, b] = hsl2rgb(h, s, l);
   } else {
     rgb = webColors[color.toLowerCase()];
     if (rgb) {

src/strategies/functions.js

@@ -1,4 +1,5 @@
-const colorFunctions = /((rgb|hsl)a?\(\s*[\d]{1,3}%?\s*(?<commaOrSpace>\s|,)\s*[\d]{1,3}%?\s*\k<commaOrSpace>\s*[\d]{1,3}%?(\s*(\k<commaOrSpace>|\/)\s*\d?\.?\d+%?)?\s*\))/gi;
+const colorFunctions = /((rgb|hsl)a?\(\s*[\d.]+%?\s*(?<commaOrSpace>\s|,)\s*[\d.]+%?\s*\k<commaOrSpace>\s*[\d.]+%?(\s*(\k<commaOrSpace>|\/)\s*\d?\.?\d+%?)?\s*\))/gi;
+const colorWithoutFunctions = /([\d.]+\s+[\d.]+%\s+[\d.]+%\s*)/gi;
 
 /**
  * @export
@@ -11,20 +12,36 @@ const colorFunctions = /((rgb|hsl)a?\(\s*[\d]{1,3}%?\s*(?<commaOrSpace>\s|,)\s*[
  */
 export async function findFn(text) {
   let match = colorFunctions.exec(text);
+  let match2 = colorWithoutFunctions.exec(text);
   let result = [];
 
-  while (match !== null) {
-    const start = match.index;
-    const end = colorFunctions.lastIndex;
-    const color = match[0];
+  while (match !== null || match2 !== null) {
+    if (match !== null) {
+      const start = match.index;
+      const end = colorFunctions.lastIndex;
+      const color = match[0];
 
-    result.push({
-      start,
-      end,
-      color
-    });
+      result.push({
+        start,
+        end,
+        color
+      });
+    }
+
+    if (match2 !== null) {
+      const start = match2.index;
+      const end = colorWithoutFunctions.lastIndex;
+      const color = `hsl(${match2[0]})`;
+
+      result.push({
+        start,
+        end,
+        color
+      });
+    }
 
     match = colorFunctions.exec(text);
+    match2 = colorWithoutFunctions.exec(text);
   }
 
   return result;