diff --git a/CHANGELOG.md b/CHANGELOG.md index c1658fc53b..dc4aedd522 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Project Changelog +# [3.0.0-next.23](https://github.com/GrabarzUndPartner/nuxt-speedkit/compare/v3.0.0-next.22...v3.0.0-next.23) (2023-09-13) + + +### Bug Fixes + +* **module:** improve critters handling ([315e2fe](https://github.com/GrabarzUndPartner/nuxt-speedkit/commit/315e2fe5aa764ba9da424e26d14eb5bb088ddb70)) + # [3.0.0-next.22](https://github.com/GrabarzUndPartner/nuxt-speedkit/compare/v3.0.0-next.21...v3.0.0-next.22) (2023-09-13) diff --git a/package-lock.json b/package-lock.json index 52f993e93f..60a93548d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "nuxt-speedkit", - "version": "3.0.0-next.22", + "version": "3.0.0-next.23", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "nuxt-speedkit", - "version": "3.0.0-next.22", + "version": "3.0.0-next.23", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -31,7 +31,7 @@ "@commitlint/config-conventional": "17.7.0", "@fullhuman/postcss-purgecss": "5.0.0", "@nuxt/module-builder": "0.5.1", - "@nuxt/webpack-builder": "3.7.1", + "@nuxt/webpack-builder": "3.7.2", "@nuxtjs/eslint-config": "12.0.0", "@nuxtjs/eslint-module": "4.1.0", "@nuxtjs/stylelint-module": "5.1.0", @@ -52,7 +52,7 @@ "husky": "8.0.3", "jsdom": "22.1.0", "lint-staged": "14.0.1", - "nuxt": "^3.7.2", + "nuxt": "3.7.2", "pinst": "3.0.0", "playwright": "1.37.1", "postcss-functions": "4.0.2", @@ -2747,18 +2747,18 @@ } }, "node_modules/@nuxt/kit": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.7.1.tgz", - "integrity": "sha512-8k4q+92qLz5z7RdSOKrEJIjM63xXBg0z/WhTtZgXv1R5ULZ77usdTMjQYhQ+Kgd1NMkpIXeKaAO6903xrSt53Q==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.7.2.tgz", + "integrity": "sha512-z3oW52Ar/nQvyUR2/s5AemcQJDv/EeRto6OUYa7/J9oMOmSpXJ39eldiggn4GV+2jSFCPAYozS/yIKtXYiPo/A==", "dependencies": { - "@nuxt/schema": "3.7.1", + "@nuxt/schema": "3.7.2", "c12": "^1.4.2", "consola": "^3.2.3", "defu": "^6.1.2", "globby": "^13.2.2", "hash-sum": "^2.0.0", "ignore": "^5.2.4", - "jiti": "^1.19.3", + "jiti": "^1.20.0", "knitwork": "^1.0.0", "mlly": "^1.4.2", "pathe": "^1.1.1", @@ -2826,9 +2826,9 @@ } }, "node_modules/@nuxt/schema": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.7.1.tgz", - "integrity": "sha512-+0W/oos7Ktm3eTwQ/78PrcAObR0+yQzHIUzbQ7HgUnEEntRGVxp4hnfng5dmhvVjJqQvpuGZHa3yIS/g41vE6A==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.7.2.tgz", + "integrity": "sha512-hajUPjpXD3TYfv1PL1UO2wCp8YOasMAnQI9keAYbO3gvMdvyf1SyIUWr2nQOmJDIC0bW4+mLNHFGhGf1dgUVoQ==", "dependencies": { "@nuxt/ui-templates": "^1.3.1", "defu": "^6.1.2", @@ -2981,56 +2981,6 @@ "vue": "^3.3.4" } }, - "node_modules/@nuxt/vite-builder/node_modules/@nuxt/kit": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.7.2.tgz", - "integrity": "sha512-z3oW52Ar/nQvyUR2/s5AemcQJDv/EeRto6OUYa7/J9oMOmSpXJ39eldiggn4GV+2jSFCPAYozS/yIKtXYiPo/A==", - "dev": true, - "dependencies": { - "@nuxt/schema": "3.7.2", - "c12": "^1.4.2", - "consola": "^3.2.3", - "defu": "^6.1.2", - "globby": "^13.2.2", - "hash-sum": "^2.0.0", - "ignore": "^5.2.4", - "jiti": "^1.20.0", - "knitwork": "^1.0.0", - "mlly": "^1.4.2", - "pathe": "^1.1.1", - "pkg-types": "^1.0.3", - "scule": "^1.0.0", - "semver": "^7.5.4", - "ufo": "^1.3.0", - "unctx": "^2.3.1", - "unimport": "^3.3.0", - "untyped": "^1.4.0" - }, - "engines": { - "node": "^14.18.0 || >=16.10.0" - } - }, - "node_modules/@nuxt/vite-builder/node_modules/@nuxt/schema": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.7.2.tgz", - "integrity": "sha512-hajUPjpXD3TYfv1PL1UO2wCp8YOasMAnQI9keAYbO3gvMdvyf1SyIUWr2nQOmJDIC0bW4+mLNHFGhGf1dgUVoQ==", - "dev": true, - "dependencies": { - "@nuxt/ui-templates": "^1.3.1", - "defu": "^6.1.2", - "hookable": "^5.5.3", - "pathe": "^1.1.1", - "pkg-types": "^1.0.3", - "postcss-import-resolver": "^2.0.0", - "std-env": "^3.4.3", - "ufo": "^1.3.0", - "unimport": "^3.3.0", - "untyped": "^1.4.0" - }, - "engines": { - "node": "^14.18.0 || >=16.10.0" - } - }, "node_modules/@nuxt/vite-builder/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -3251,13 +3201,13 @@ "dev": true }, "node_modules/@nuxt/webpack-builder": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/@nuxt/webpack-builder/-/webpack-builder-3.7.1.tgz", - "integrity": "sha512-VFnKAJY64JXo4y3NtOxx5PFLxmERxZBtGxl9Te+9hz8hfzpUVAl4yhx6kBq3B2otY6PJcHbdOkosZVCUkYOfKw==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/@nuxt/webpack-builder/-/webpack-builder-3.7.2.tgz", + "integrity": "sha512-QcDjN3u6BCF3EbjOpGi4Dz/1GWmo+fk2FA13XlLM8IcridXUV2v5FWkLenlx+nqhRPqLtsqKiTv5chlR3v8FGQ==", "dev": true, "dependencies": { "@nuxt/friendly-errors-webpack-plugin": "^2.5.2", - "@nuxt/kit": "3.7.1", + "@nuxt/kit": "3.7.2", "autoprefixer": "^10.4.15", "css-loader": "^6.8.1", "css-minimizer-webpack-plugin": "^5.0.1", @@ -13398,95 +13348,12 @@ } } }, - "node_modules/nuxt/node_modules/@nuxt/kit": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.7.2.tgz", - "integrity": "sha512-z3oW52Ar/nQvyUR2/s5AemcQJDv/EeRto6OUYa7/J9oMOmSpXJ39eldiggn4GV+2jSFCPAYozS/yIKtXYiPo/A==", - "dev": true, - "dependencies": { - "@nuxt/schema": "3.7.2", - "c12": "^1.4.2", - "consola": "^3.2.3", - "defu": "^6.1.2", - "globby": "^13.2.2", - "hash-sum": "^2.0.0", - "ignore": "^5.2.4", - "jiti": "^1.20.0", - "knitwork": "^1.0.0", - "mlly": "^1.4.2", - "pathe": "^1.1.1", - "pkg-types": "^1.0.3", - "scule": "^1.0.0", - "semver": "^7.5.4", - "ufo": "^1.3.0", - "unctx": "^2.3.1", - "unimport": "^3.3.0", - "untyped": "^1.4.0" - }, - "engines": { - "node": "^14.18.0 || >=16.10.0" - } - }, - "node_modules/nuxt/node_modules/@nuxt/schema": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.7.2.tgz", - "integrity": "sha512-hajUPjpXD3TYfv1PL1UO2wCp8YOasMAnQI9keAYbO3gvMdvyf1SyIUWr2nQOmJDIC0bW4+mLNHFGhGf1dgUVoQ==", - "dev": true, - "dependencies": { - "@nuxt/ui-templates": "^1.3.1", - "defu": "^6.1.2", - "hookable": "^5.5.3", - "pathe": "^1.1.1", - "pkg-types": "^1.0.3", - "postcss-import-resolver": "^2.0.0", - "std-env": "^3.4.3", - "ufo": "^1.3.0", - "unimport": "^3.3.0", - "untyped": "^1.4.0" - }, - "engines": { - "node": "^14.18.0 || >=16.10.0" - } - }, "node_modules/nuxt/node_modules/destr": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.1.tgz", "integrity": "sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==", "dev": true }, - "node_modules/nuxt/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/nuxt/node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/nuxt/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/nwsapi": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.5.tgz", diff --git a/package.json b/package.json index 1694461f30..38fb0fff2b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt-speedkit", - "version": "3.0.0-next.22", + "version": "3.0.0-next.23", "description": "Nuxt Speedkit takes over the Lighthouse performance optimization of your generated website.", "license": "MIT", "contributors": [ @@ -69,7 +69,7 @@ "@commitlint/config-conventional": "17.7.0", "@fullhuman/postcss-purgecss": "5.0.0", "@nuxt/module-builder": "0.5.1", - "@nuxt/webpack-builder": "3.7.1", + "@nuxt/webpack-builder": "3.7.2", "@nuxtjs/eslint-config": "12.0.0", "@nuxtjs/eslint-module": "4.1.0", "@nuxtjs/stylelint-module": "5.1.0", @@ -90,7 +90,7 @@ "husky": "8.0.3", "jsdom": "22.1.0", "lint-staged": "14.0.1", - "nuxt": "^3.7.2", + "nuxt": "3.7.2", "pinst": "3.0.0", "playwright": "1.37.1", "postcss-functions": "4.0.2", diff --git a/src/module.mjs b/src/module.mjs index cfdde70731..f5b6c3086b 100644 --- a/src/module.mjs +++ b/src/module.mjs @@ -112,7 +112,8 @@ async function addBuildTemplates(nuxt, options) { addTemplate({ filename: MODULE_NAME + '/fonts.css', - getContents: () => fontConfig.toCSS(), + getContents: () => + `/*! speedkit-font-faces start */${fontConfig.toCSS()}/*! speedkit-font-faces end */`, write: true }); diff --git a/src/runtime/classes/Font.mjs b/src/runtime/classes/Font.mjs index c1406bc3df..f929daa090 100644 --- a/src/runtime/classes/Font.mjs +++ b/src/runtime/classes/Font.mjs @@ -50,10 +50,12 @@ export default class Font { getCSSText({ usedFontaine = false } = {}) { const selector = createSelector(this.rootSelector, this.selector); - const family = prepareFamily(this.family, { usedFontaine }); + const family = `"${this.family}"`; return wrapByMedia( `${selector} { - font-family: ${this.fallbackFamily.join(', ')}; + font-family: ${[getFontaineFallback(this.family, usedFontaine)] + .filter(Boolean) + .concat(this.fallbackFamily.join(', '))}; font-weight: ${this.weight}; font-style: ${this.style}; } @@ -64,9 +66,9 @@ export default class Font { ); } - getNoScriptCSSText({ usedFontaine = false } = {}) { + getNoScriptCSSText() { const selector = createSelector(this.rootSelector, this.selector); - const family = prepareFamily(this.family, { usedFontaine }); + const family = `"${this.family}"`; return wrapByMedia( `${selector} { font-family: ${[family].concat(this.fallbackFamily).join(', ')}; @@ -123,9 +125,9 @@ function weightNormalize(weight) { } } -function prepareFamily(family, { usedFontaine = false } = {}) { - if (!usedFontaine) { - return `"${family}"`; +function getFontaineFallback(family, usedFontaine) { + if (usedFontaine) { + return `"${family} fallback"`; } - return `"${family}", "${family} fallback"`; + return ''; } diff --git a/src/runtime/classes/FontCollection.mjs b/src/runtime/classes/FontCollection.mjs index 46c95eb02a..93a937b31e 100644 --- a/src/runtime/classes/FontCollection.mjs +++ b/src/runtime/classes/FontCollection.mjs @@ -50,10 +50,10 @@ export default class FontCollection { ]); } - getNoScriptStyleDescriptions(options) { + getNoScriptStyleDescriptions() { return getRelevantDescriptions([ getStyleDescription( - this.list.map(font => font.getNoScriptCSSText(options)).join(' '), + this.list.map(font => font.getNoScriptCSSText()).join(' '), true ) ]); diff --git a/src/runtime/composables/fonts.mjs b/src/runtime/composables/fonts.mjs index 9a7605ab63..a3238cd0c0 100644 --- a/src/runtime/composables/fonts.mjs +++ b/src/runtime/composables/fonts.mjs @@ -40,7 +40,7 @@ function writeHead(isCritical, fontCollection, runtimeConfig) { return fontCollection.getStyleDescriptions(options); }), noscript: computed(() => { - return fontCollection.getNoScriptStyleDescriptions(options); + return fontCollection.getNoScriptStyleDescriptions(); }) }); } diff --git a/src/utils/preload.mjs b/src/utils/preload.mjs index 60e00fdbba..4244e5dfc7 100644 --- a/src/utils/preload.mjs +++ b/src/utils/preload.mjs @@ -5,13 +5,16 @@ import { load } from 'cheerio'; import { render } from 'dom-serializer'; import { isViteBuild, logger } from '../utils.mjs'; +// eslint-disable-next-line sonarjs/cognitive-complexity export function optimizePreloads(nuxt) { if (isViteBuild(nuxt)) { nuxt.options.vite.build.manifest = false; - nuxt.options.vite.build.cssCodeSplit = false; + if (nuxt.options.speedkit.disableNuxtCritters) { + nuxt.options.vite.build.cssCodeSplit = false; + } } - nuxt.options.experimental.inlineSSRStyles = false; + nuxt.options.experimental.inlineSSRStyles = true; nuxt.hook('nitro:init', nitro => { nitro.hooks.hook('prerender:generate', async route => { @@ -30,7 +33,7 @@ export function optimizePreloads(nuxt) { // embed css files try { - await Promise.all( + const css = await Promise.all( Array.from($('link[rel="stylesheet"]')) .map(el => $(el)) .map(async $el => { @@ -43,19 +46,35 @@ export function optimizePreloads(nuxt) { nuxt.options.vite.build.assetsDir ); const filepath = join(publicDir, basename($el.attr('href'))); + const fileContent = await fsPromises.readFile(filepath, 'utf-8'); - let css = await fsPromises.readFile(filepath, 'utf-8'); - logger.info( - `Embed CSS File \`${basename($el.attr('href'))}\`; Route: \`${ - route.route - }\`` - ); - - css = css.replace(/url\(.\//g, `url(${dir}/`); - $('head').append(``); - $el.remove(); + if (nuxt.options.speedkit.disableNuxtCritters) { + const css = fileContent.replace(/url\(.\//g, `url(${dir}/`); + $el.remove(); + logger.info( + `Embed CSS File \`${basename($el.attr('href'))}\`; Route: \`${ + route.route + }\`` + ); + return css; + } else { + const matches = fileContent.match( + /\/\*! speedkit-font-faces start \*\/(.*)\/\*! speedkit-font-faces end \*\// + ); + if (matches) { + logger.info( + `Embed Font-Faces CSS \`${basename( + $el.attr('href') + )}\`; Route: \`${route.route}\`` + ); + return matches[1].replace(/url\(.\//g, `url(${dir}/`); + } + } }) ); + if (css.length) { + $('head').append(``); + } } catch (error) { logger.error("can't embed css file.", error); }