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);
}