@color2k/parse-to-rgba - npm Package Compare versions

Comparing version 1.0.0-rc.2 to 1.0.0-rc.3

index.esm.js

@@ -9,15 +9,19 @@ class ColorError extends Error {
 const cache = {};
-let ctx = null;
+let div = null;
 
-function getContext() {
-  const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
-  return canvas.getContext('2d');
+function createDiv() {
+  const div = document.createElement('div');
+  div.classList.add('color2k-parser');
+  div.style.opacity = '0';
+  div.style.pointerEvents = 'none';
+  div.style.position = 'fixed'; // div must be mounted for `getComputedStyle` to work
+
+  document.body.appendChild(div);
+  return div;
 }
 /**
- * Parses a color using canvas
+ * Parses a color using `getComputedStyle`
  *
- * Idea from `@Alnitak` this stackoverflow answer:
- * https://stackoverflow.com/a/19366389/5776910
+ * Idea from `Niet the Dark Absol`'s stackoverflow answer:
+ * https://stackoverflow.com/a/11068286/5776910
  */
@@ -36,33 +40,19 @@
   const normalizedColor = color.toLowerCase().trim();
+  if (cache[normalizedColor]) return cache[normalizedColor];
+  div = div || createDiv();
+  div.style.color = '#000';
+  div.style.color = normalizedColor;
+  const control = getComputedStyle(div).color;
+  div.style.color = '#fff';
+  div.style.color = normalizedColor;
+  const computedColor = getComputedStyle(div).color;
+  if (computedColor !== control) throw new ColorError(color);
+  const result = computedColor.replace(/[^\d.,]/g, '').split(',').map(parseFloat);
 
-  if (cache[normalizedColor]) {
-    return cache[normalizedColor];
+  if (result.length < 4) {
+    result.push(1);
   }
 
-  ctx = ctx || getContext();
-
-  if (!ctx) {
-    throw new Error('Failed to get 2D context');
-  }
-
-  ctx.clearRect(0, 0, 1, 1); // In order to detect invalid values,
-  // we can't rely on col being in the same format as what fillStyle is computed as,
-  // but we can ask it to implicitly compute a normalized value twice and compare.
-  // https://stackoverflow.com/a/19366389/5776910
-
-  ctx.fillStyle = '#000';
-  ctx.fillStyle = normalizedColor;
-  const computed = ctx.fillStyle;
-  ctx.fillStyle = '#fff';
-  ctx.fillStyle = normalizedColor;
-
-  if (computed !== ctx.fillStyle) {
-    throw new ColorError(color);
-  }
-
-  ctx.fillRect(0, 0, 1, 1);
-  const result = Array.from(ctx.getImageData(0, 0, 1, 1).data);
-  const withNormalizedAlpha = [...result.slice(0, 3), result[3] / 255];
-  cache[normalizedColor] = withNormalizedAlpha;
-  return withNormalizedAlpha;
+  cache[normalizedColor] = result;
+  return result;
 }
@@ -69,0 +59,0 @@

index.js

@@ -147,35 +147,2 @@ (function (global, factory) {
 
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
-
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
   var ColorError = /*#__PURE__*/function (_Error) {
@@ -196,15 +163,19 @@ _inherits(ColorError, _Error);
   var cache = {};
-  var ctx = null;
+  var div = null;
 
-  function getContext() {
-    var canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
-    return canvas.getContext('2d');
+  function createDiv() {
+    var div = document.createElement('div');
+    div.classList.add('color2k-parser');
+    div.style.opacity = '0';
+    div.style.pointerEvents = 'none';
+    div.style.position = 'fixed'; // div must be mounted for `getComputedStyle` to work
+
+    document.body.appendChild(div);
+    return div;
   }
   /**
-   * Parses a color using canvas
+   * Parses a color using `getComputedStyle`
    *
-   * Idea from `@Alnitak` this stackoverflow answer:
-   * https://stackoverflow.com/a/19366389/5776910
+   * Idea from `Niet the Dark Absol`'s stackoverflow answer:
+   * https://stackoverflow.com/a/11068286/5776910
    */
@@ -223,33 +194,19 @@
     var normalizedColor = color.toLowerCase().trim();
+    if (cache[normalizedColor]) return cache[normalizedColor];
+    div = div || createDiv();
+    div.style.color = '#000';
+    div.style.color = normalizedColor;
+    var control = getComputedStyle(div).color;
+    div.style.color = '#fff';
+    div.style.color = normalizedColor;
+    var computedColor = getComputedStyle(div).color;
+    if (computedColor !== control) throw new ColorError(color);
+    var result = computedColor.replace(/[^\d.,]/g, '').split(',').map(parseFloat);
 
-    if (cache[normalizedColor]) {
-      return cache[normalizedColor];
+    if (result.length < 4) {
+      result.push(1);
     }
 
-    ctx = ctx || getContext();
-
-    if (!ctx) {
-      throw new Error('Failed to get 2D context');
-    }
-
-    ctx.clearRect(0, 0, 1, 1); // In order to detect invalid values,
-    // we can't rely on col being in the same format as what fillStyle is computed as,
-    // but we can ask it to implicitly compute a normalized value twice and compare.
-    // https://stackoverflow.com/a/19366389/5776910
-
-    ctx.fillStyle = '#000';
-    ctx.fillStyle = normalizedColor;
-    var computed = ctx.fillStyle;
-    ctx.fillStyle = '#fff';
-    ctx.fillStyle = normalizedColor;
-
-    if (computed !== ctx.fillStyle) {
-      throw new ColorError(color);
-    }
-
-    ctx.fillRect(0, 0, 1, 1);
-    var result = Array.from(ctx.getImageData(0, 0, 1, 1).data);
-    var withNormalizedAlpha = [].concat(_toConsumableArray(result.slice(0, 3)), [result[3] / 255]);
-    cache[normalizedColor] = withNormalizedAlpha;
-    return withNormalizedAlpha;
+    cache[normalizedColor] = result;
+    return result;
   }
@@ -256,0 +213,0 @@

package.json

 {
   "name": "@color2k/parse-to-rgba",
-  "version": "1.0.0-rc.2",
-  "description": "a low-level color parser that uses canvas to parse a colors",
+  "version": "1.0.0-rc.3",
+  "description": "a low-level color parser that uses getComputedStyle to parse a colors",
   "main": "./index.js",
@@ -19,5 +19,5 @@ "author": {
   "peerDependencies": {
-    "@color2k/node": "1.0.0-rc.2"
+    "@color2k/node": "1.0.0-rc.3"
   },
   "sideEffects": false
 }

src/index.d.ts

 /**
- * Parses a color using canvas
+ * Parses a color using `getComputedStyle`
  *
- * Idea from `@Alnitak` this stackoverflow answer:
- * https://stackoverflow.com/a/19366389/5776910
+ * Idea from `Niet the Dark Absol`'s stackoverflow answer:
+ * https://stackoverflow.com/a/11068286/5776910
  */
@@ -7,0 +7,0 @@ declare function parseToRgba(color: string): [number, number, number, number];

No alert changes

Worsened metrics

Total package byte prevSize

15199

decreased by-11.45%

Lines of code

231

decreased by-13.81%

No dependency changes