Merge branch 'next' into feature/entry-battery-level-check

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Project Changelog
 
+# [3.0.0-next.38](https://github.com/GrabarzUndPartner/nuxt-speedkit/compare/v3.0.0-next.37...v3.0.0-next.38) (2023-11-17)
+
+
+### Bug Fixes
+
+* **source-list:** fix missing import ([7ab32cf](https://github.com/GrabarzUndPartner/nuxt-speedkit/commit/7ab32cf5c91cbd676e1c50cc230253c90d993595))
+
+# [3.0.0-next.37](https://github.com/GrabarzUndPartner/nuxt-speedkit/compare/v3.0.0-next.36...v3.0.0-next.37) (2023-11-17)
+
+
+### Bug Fixes
+
+* **source-list:** added workaround for create-sort ([899d971](https://github.com/GrabarzUndPartner/nuxt-speedkit/commit/899d971a47b002abe60a9d97279a5a13e5020647))
+
 # [3.0.0-next.36](https://github.com/GrabarzUndPartner/nuxt-speedkit/compare/v3.0.0-next.35...v3.0.0-next.36) (2023-11-15)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-speedkit",
-  "version": "3.0.0-next.36",
+  "version": "3.0.0-next.38",
   "description": "Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "contributors": [

src/runtime/components/SpeedkitPicture/classes/SourceList.mjs

@@ -1,6 +1,5 @@
-import createSort from 'sort-css-media-queries/lib/create-sort.js';
-
 import Source from '../../SpeedkitImage/classes/Source';
+import createSort from '#speedkit/externals/create-sort';
 import { toHashHex } from '#speedkit/utils/string';
 
 const sortByMediaQueries = createSort();

src/runtime/externals/create-sort.js

@@ -0,0 +1,272 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+// Script is from “https://github.com/OlehDutchenko/sort-css-media-queries/blob/master/lib/create-sort.js”, workaround because ESM import causes problems in the client.
+
+// ----------------------------------------
+// Private
+// ----------------------------------------
+
+const minMaxWidth =
+  /(!?\(\s*min(-device)?-width)(.|\n)+\(\s*max(-device)?-width|\(\s*width\s*>(=)?(.|\n)+\(\s*width\s*<(=)?|(!?\(.*<(=)?\s*width\s*<(=)?)/i;
+const minWidth = /\(\s*min(-device)?-width|\(\s*width\s*>(=)?/i;
+const maxMinWidth =
+  /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width|\(\s*width\s*<(=)?(.|\n)+\(\s*width\s*>(=)?|(!?\(.*>(=)?\s*width\s*>(=)?)/i;
+const maxWidth = /\(\s*max(-device)?-width|\(\s*width\s*<(=)?/i;
+
+const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
+const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
+
+const minMaxHeight =
+  /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height|\(\s*height\s*>(=)?(.|\n)+\(\s*height\s*<(=)?|(!?\(.*<(=)?\s*height\s*<(=)?)/i;
+const minHeight = /\(\s*min(-device)?-height|\(\s*height\s*>(=)?/i;
+const maxMinHeight =
+  /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height|\(\s*height\s*<(=)?(.|\n)+\(\s*height\s*>(=)?|(!?\(.*>(=)?\s*height\s*>(=)?)/i;
+const maxHeight = /\(\s*max(-device)?-height|\(\s*height\s*<(=)?/i;
+
+const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
+const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
+
+const isPrint = /print/i;
+const isPrintOnly = /^print$/i;
+
+const maxValue = Number.MAX_VALUE;
+
+/**
+ * Obtain the length of the media request in pixels.
+ * Copy from original source `function inspectLength (length)`
+ * {@link https://github.com/hail2u/node-css-mqpacker/blob/master/index.js#L58}
+ * @private
+ * @param {string} length
+ * @return {number}
+ */
+function _getQueryLength(query) {
+  let length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(query);
+
+  if (length === null && (isMinWidth(query) || isMinHeight(query))) {
+    length = /(\d)/.exec(query);
+  }
+
+  if (length === '0') {
+    return 0;
+  }
+
+  if (length === null) {
+    return maxValue;
+  }
+
+  let number = length[1];
+  const unit = length[2];
+
+  switch (unit) {
+    case 'ch':
+      number = parseFloat(number) * 8.8984375;
+      break;
+
+    case 'em':
+    case 'rem':
+      number = parseFloat(number) * 16;
+      break;
+
+    case 'ex':
+      number = parseFloat(number) * 8.296875;
+      break;
+
+    case 'px':
+      number = parseFloat(number);
+      break;
+  }
+
+  return +number;
+}
+
+/**
+ * Wrapper for creating test functions
+ * @private
+ * @param {RegExp} doubleTestTrue
+ * @param {RegExp} doubleTestFalse
+ * @param {RegExp} singleTest
+ * @return {Function}
+ */
+function _testQuery(doubleTestTrue, doubleTestFalse, singleTest) {
+  /**
+   * @param {string} query
+   * @return {boolean}
+   */
+  return function (query) {
+    if (doubleTestTrue.test(query)) {
+      return true;
+    } else if (doubleTestFalse.test(query)) {
+      return false;
+    }
+    return singleTest.test(query);
+  };
+}
+
+/**
+ * @private
+ * @param {string} a
+ * @param {string} b
+ * @return {number|null}
+ */
+function _testIsPrint(a, b) {
+  const isPrintA = isPrint.test(a);
+  const isPrintOnlyA = isPrintOnly.test(a);
+
+  const isPrintB = isPrint.test(b);
+  const isPrintOnlyB = isPrintOnly.test(b);
+
+  if (isPrintA && isPrintB) {
+    if (!isPrintOnlyA && isPrintOnlyB) {
+      return 1;
+    }
+    if (isPrintOnlyA && !isPrintOnlyB) {
+      return -1;
+    }
+    return a.localeCompare(b);
+  }
+  if (isPrintA) {
+    return 1;
+  }
+  if (isPrintB) {
+    return -1;
+  }
+
+  return null;
+}
+
+// ----------------------------------------
+// Public
+// ----------------------------------------
+
+/**
+ * @param {Object} [configuration]
+ * @param {boolean} [configuration.unitlessMqAlwaysFirst]
+ * @returns {(function(string, string): number)|*}
+ */
+export default function createSort(configuration) {
+  const config = configuration || {};
+  const UNITLESS_MQ_ALWAYS_FIRST = config.unitlessMqAlwaysFirst;
+
+  /**
+   * Sorting an array with media queries
+   * according to the mobile-first methodology.
+   * @param {string} a
+   * @param {string} b
+   * @return {number} 1 / 0 / -1
+   */
+  function sortCSSmq(a, b) {
+    const testIsPrint = _testIsPrint(a, b);
+    if (testIsPrint !== null) {
+      return testIsPrint;
+    }
+
+    const minA = isMinWidth(a) || isMinHeight(a);
+    const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+    const minB = isMinWidth(b) || isMinHeight(b);
+    const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+    if (UNITLESS_MQ_ALWAYS_FIRST && ((!minA && !maxA) || (!minB && !maxB))) {
+      if (!minA && !maxA && !minB && !maxB) {
+        return a.localeCompare(b);
+      }
+      return !minB && !maxB ? 1 : -1;
+    } else {
+      if (minA && maxB) {
+        return -1;
+      }
+      if (maxA && minB) {
+        return 1;
+      }
+
+      const lengthA = _getQueryLength(a);
+      const lengthB = _getQueryLength(b);
+
+      if (lengthA === maxValue && lengthB === maxValue) {
+        return a.localeCompare(b);
+      } else if (lengthA === maxValue) {
+        return 1;
+      } else if (lengthB === maxValue) {
+        return -1;
+      }
+
+      if (lengthA > lengthB) {
+        if (maxA) {
+          return -1;
+        }
+        return 1;
+      }
+
+      if (lengthA < lengthB) {
+        if (maxA) {
+          return 1;
+        }
+        return -1;
+      }
+
+      return a.localeCompare(b);
+    }
+  }
+
+  /**
+   * Sorting an array with media queries
+   * according to the desktop-first methodology.
+   * @param {string} a
+   * @param {string} b
+   * @return {number} 1 / 0 / -1
+   */
+  sortCSSmq.desktopFirst = function (a, b) {
+    const testIsPrint = _testIsPrint(a, b);
+    if (testIsPrint !== null) {
+      return testIsPrint;
+    }
+
+    const minA = isMinWidth(a) || isMinHeight(a);
+    const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+    const minB = isMinWidth(b) || isMinHeight(b);
+    const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+    if (UNITLESS_MQ_ALWAYS_FIRST && ((!minA && !maxA) || (!minB && !maxB))) {
+      if (!minA && !maxA && !minB && !maxB) {
+        return a.localeCompare(b);
+      }
+      return !minB && !maxB ? 1 : -1;
+    } else {
+      if (minA && maxB) {
+        return 1;
+      }
+      if (maxA && minB) {
+        return -1;
+      }
+
+      const lengthA = _getQueryLength(a);
+      const lengthB = _getQueryLength(b);
+
+      if (lengthA === maxValue && lengthB === maxValue) {
+        return a.localeCompare(b);
+      } else if (lengthA === maxValue) {
+        return 1;
+      } else if (lengthB === maxValue) {
+        return -1;
+      }
+
+      if (lengthA > lengthB) {
+        if (maxA) {
+          return -1;
+        }
+        return 1;
+      }
+
+      if (lengthA < lengthB) {
+        if (maxA) {
+          return 1;
+        }
+        return -1;
+      }
+
+      return -a.localeCompare(b);
+    }
+  };
+
+  return sortCSSmq;
+}