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

Comparing version 0.0.0-17a9eb32d to 0.0.0-22e4ec6bb

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
  */
@@ -27,7 +31,10 @@
 function parseToRgba(color) {
-  // for node-environments, we'll use @color2k/node
-  if (typeof document === 'undefined') {
+  // for non-browser-environments, we'll use @color2k/compat
+  if (typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom') || typeof document === 'undefined' && typeof global !== 'undefined' && typeof require !== 'undefined') {
+    // @ts-ignore
+    if (typeof color2kCompat !== 'undefined') return color2kCompat(color); // Need to trick bundlers into _not_ bundling @color2k/compat
+    // @ts-ignore
+    // eslint-disable-next-line no-useless-concat
 
-
-    return require('@color2k/node')(color);
+    global['req' + 'uire']('@color2k/compat')(color);
   } // normalize the color
@@ -37,33 +44,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;
 }
@@ -70,0 +63,0 @@

index.js

@@ -131,3 +131,3 @@ (function (global, factory) {
 
-    return function () {
+    return function _createSuperInternal() {
       var Super = _getPrototypeOf(Derived),
@@ -148,35 +148,2 @@ result;
 
-  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) {
@@ -197,15 +164,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
    */
@@ -215,7 +186,10 @@
   function parseToRgba(color) {
-    // for node-environments, we'll use @color2k/node
-    if (typeof document === 'undefined') {
+    // for non-browser-environments, we'll use @color2k/compat
+    if (typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom') || typeof document === 'undefined' && typeof global !== 'undefined' && typeof require !== 'undefined') {
+      // @ts-ignore
+      if (typeof color2kCompat !== 'undefined') return color2kCompat(color); // Need to trick bundlers into _not_ bundling @color2k/compat
+      // @ts-ignore
+      // eslint-disable-next-line no-useless-concat
 
-
-      return require('@color2k/node')(color);
+      global['req' + 'uire']('@color2k/compat')(color);
     } // normalize the color
@@ -225,33 +199,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;
   }
@@ -258,0 +218,0 @@

package.json

 {
   "name": "@color2k/parse-to-rgba",
-  "version": "0.0.0-17a9eb32d",
-  "description": "a low-level color parser that uses canvas to parse a colors",
-  "main": "./index.js",
-  "author": {
-    "email": "[e-mail]",
-    "name": "Rico Kahler"
-  },
+  "version": "0.0.0-22e4ec6bb",
+  "description": "a low-level color parser that uses getComputedStyle to parse a colors",
   "repository": {
@@ -15,2 +10,7 @@ "type": "git",
   "license": "MIT",
+  "author": {
+    "name": "Rico Kahler",
+    "email": "[e-mail]"
+  },
+  "main": "./index.js",
   "types": "./src",
@@ -20,5 +20,5 @@ "module": "./index.esm.js",
   "peerDependencies": {
-    "@color2k/node": "0.0.0-17a9eb32d"
+    "@color2k/compat": "0.0.0-22e4ec6bb"
   },
   "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

Improved metrics

Total package byte prevSize

18820

increased by9.58%

Worsened metrics

Lines of code

239

decreased by-10.82%

No dependency changes