From 899d971a47b002abe60a9d97279a5a13e5020647 Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Fri, 17 Nov 2023 11:13:54 +0100 Subject: [PATCH 1/4] fix(source-list): added workaround for create-sort --- .../SpeedkitPicture/classes/SourceList.mjs | 3 +- src/runtime/externals/create-sort.js | 272 ++++++++++++++++++ 2 files changed, 273 insertions(+), 2 deletions(-) create mode 100644 src/runtime/externals/create-sort.js diff --git a/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs b/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs index a1ff586568..da88593280 100644 --- a/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs +++ b/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs @@ -1,5 +1,4 @@ -import createSort from 'sort-css-media-queries/lib/create-sort.js'; - +import createSort from '../../../externals/create-sort.js'; import Source from '../../SpeedkitImage/classes/Source'; import { toHashHex } from '#speedkit/utils/string'; diff --git a/src/runtime/externals/create-sort.js b/src/runtime/externals/create-sort.js new file mode 100644 index 0000000000..796bb6f635 --- /dev/null +++ b/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; +} From 780caeb4a33e6eac16e4caa61e7705e1f5215e4e Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 17 Nov 2023 10:18:24 +0000 Subject: [PATCH 2/4] chore(release): 3.0.0-next.37 [skip ci] # [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)) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 23eefaa71a..37f6f11ce1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Project Changelog +# [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) diff --git a/package-lock.json b/package-lock.json index 560f26a8e7..210d0364a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "nuxt-speedkit", - "version": "3.0.0-next.36", + "version": "3.0.0-next.37", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "nuxt-speedkit", - "version": "3.0.0-next.36", + "version": "3.0.0-next.37", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 887a4c03c4..f8ebe57288 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt-speedkit", - "version": "3.0.0-next.36", + "version": "3.0.0-next.37", "description": "Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website.", "license": "MIT", "contributors": [ From 7ab32cf5c91cbd676e1c50cc230253c90d993595 Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Fri, 17 Nov 2023 11:30:30 +0100 Subject: [PATCH 3/4] fix(source-list): fix missing import --- src/runtime/components/SpeedkitPicture/classes/SourceList.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs b/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs index da88593280..33107ce575 100644 --- a/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs +++ b/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs @@ -1,5 +1,5 @@ -import createSort from '../../../externals/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(); From b14caab22cc2226e2382bad7c3852d9dad374282 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 17 Nov 2023 10:33:18 +0000 Subject: [PATCH 4/4] chore(release): 3.0.0-next.38 [skip ci] # [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)) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37f6f11ce1..ea05127f75 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # 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) diff --git a/package-lock.json b/package-lock.json index 210d0364a4..f8f34ca456 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "nuxt-speedkit", - "version": "3.0.0-next.37", + "version": "3.0.0-next.38", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "nuxt-speedkit", - "version": "3.0.0-next.37", + "version": "3.0.0-next.38", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index f8ebe57288..e785801361 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt-speedkit", - "version": "3.0.0-next.37", + "version": "3.0.0-next.38", "description": "Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website.", "license": "MIT", "contributors": [