From 5abdc58a3bb7329729e0535dea1ac22e6f911a6c Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Wed, 13 Sep 2023 10:32:37 +0200 Subject: [PATCH 1/3] fix(ssr): added style embed in prerenderer - disable critters by default - disable fontaine by default --- package-lock.json | 268 +++++++++++++++++++++++++++--------- package.json | 6 +- src/module.mjs | 6 - src/runtime/tmpl/plugin.mjs | 16 +-- src/utils.mjs | 3 +- src/utils/options.mjs | 4 +- src/utils/preload.mjs | 42 +++++- 7 files changed, 251 insertions(+), 94 deletions(-) diff --git a/package-lock.json b/package-lock.json index a5e104f534..d4899359c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,7 +52,7 @@ "husky": "8.0.3", "jsdom": "22.1.0", "lint-staged": "14.0.1", - "nuxt": "3.7.1", + "nuxt": "^3.7.2", "pinst": "3.0.0", "playwright": "1.37.1", "postcss-functions": "4.0.2", @@ -2933,12 +2933,12 @@ "integrity": "sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==" }, "node_modules/@nuxt/vite-builder": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.7.1.tgz", - "integrity": "sha512-/DJZNJ8al8P+O5GrmmgpUmtlaDKZfrm1bfGnjpsDR8VBN6dgxTvAYi5bCkxTLCbaJyXs4XcbYrAXCNSlsRrl3Q==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.7.2.tgz", + "integrity": "sha512-jkU5rDwKj+su3mwdRdjEbcegLPoKsl06vcxirdTtPbI/preI47e9FKNRveDDEB0kWWFnqrcCXCEbrcYiodZ6lg==", "dev": true, "dependencies": { - "@nuxt/kit": "3.7.1", + "@nuxt/kit": "3.7.2", "@rollup/plugin-replace": "^5.0.2", "@vitejs/plugin-vue": "^4.3.4", "@vitejs/plugin-vue-jsx": "^3.0.2", @@ -2952,7 +2952,7 @@ "estree-walker": "^3.0.3", "externality": "^1.0.2", "fs-extra": "^11.1.1", - "get-port-please": "^3.0.2", + "get-port-please": "^3.1.1", "h3": "^1.8.1", "knitwork": "^1.0.0", "magic-string": "^0.30.3", @@ -2981,6 +2981,56 @@ "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", @@ -4232,66 +4282,66 @@ "dev": true }, "node_modules/@unhead/dom": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.5.4.tgz", - "integrity": "sha512-bbqGY9HB1PesBWCXvcH1syZywZw6szQNF14In+Wv+7KkzSuzPP/Ke0Ujxy6libtNtSY1iN5PGNO02TepykwEKw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.7.0.tgz", + "integrity": "sha512-stmQRicSlv5fvAi6hD2pGhjGTCg7HTqNdVbfZXMrNhqA11aLmsY0zB0Dqa+VxEQqM493ORojGywQJNfo+f7wog==", "dev": true, "dependencies": { - "@unhead/schema": "1.5.4", - "@unhead/shared": "1.5.4" + "@unhead/schema": "1.7.0", + "@unhead/shared": "1.7.0" }, "funding": { "url": "https://github.com/sponsors/harlan-zw" } }, "node_modules/@unhead/schema": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.5.4.tgz", - "integrity": "sha512-0+XS8nduMBfOshviNVzNOLjnlAnNfEZGsO4VAvfHBQLdBKY7AYFHZLfbOURFpWzgyfxGZzankrkmLw76PwxFRg==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.7.0.tgz", + "integrity": "sha512-mXDBW3h8c2x3JUOTVyEGCM7Cvy8vnDERbdBh8mZgTOFu90xy317MYN6RGaZRHt5lTqQ0dWzotmNuoYJcHAIIjg==", "dev": true, "dependencies": { "hookable": "^5.5.3", - "zhead": "^2.0.10" + "zhead": "^2.1.1" }, "funding": { "url": "https://github.com/sponsors/harlan-zw" } }, "node_modules/@unhead/shared": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.5.4.tgz", - "integrity": "sha512-EobYjdKARcGHMNfJ4jWMl/fUQRV8bmB5YiSWrWAcfPf2LH4GTywMlUfdBkU1nH9Fy8gx37rImxHL7EZKC0GLVg==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.7.0.tgz", + "integrity": "sha512-Etbw+OcN/cAWS2BCQyPmSqvPpECMthHsRv+/mSh8ykuZ6baU/0JR+Jk/oh3bOAwtmoM1jJiBU37gz68icZev0w==", "dev": true, "dependencies": { - "@unhead/schema": "1.5.4" + "@unhead/schema": "1.7.0" }, "funding": { "url": "https://github.com/sponsors/harlan-zw" } }, "node_modules/@unhead/ssr": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.5.4.tgz", - "integrity": "sha512-VuNntvbNrt5BdXYoRcLwuyYGe0aP/xneY1ozOPhn3bIlM0qWVn5aVM8KGKzLthhpZmMzEOoSgDyE1QIQoLMsdw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.7.0.tgz", + "integrity": "sha512-2bI1Goqr0TJqM/DI6D9Q/DWDw4Qs8Y+/RHaeb5UnavNjUHEpCrKY3XL7RMGWeMaGRcQ0hhn5hjv+SyanA4kf5w==", "dev": true, "dependencies": { - "@unhead/schema": "1.5.4", - "@unhead/shared": "1.5.4" + "@unhead/schema": "1.7.0", + "@unhead/shared": "1.7.0" }, "funding": { "url": "https://github.com/sponsors/harlan-zw" } }, "node_modules/@unhead/vue": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.5.4.tgz", - "integrity": "sha512-PzF5BvlRdYsnaTpDgqdxogyAbXQYb4huwkEDM8x6B8PGknV+ifAn80ZQZH6iu8rKifE2VHLSXuezmArB7erYCQ==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.7.0.tgz", + "integrity": "sha512-MnRqWbbwE9mAywM7dDsfVZZGDzf/b4t4YoKq88dM2qW/cJ7yOJZTeXag/6WwwQU9TWzAvDhmq6vUgUyv/ZTCnQ==", "dev": true, "dependencies": { - "@unhead/schema": "1.5.4", - "@unhead/shared": "1.5.4", + "@unhead/schema": "1.7.0", + "@unhead/shared": "1.7.0", "hookable": "^5.5.3", - "unhead": "1.5.4" + "unhead": "1.7.0" }, "funding": { "url": "https://github.com/sponsors/harlan-zw" @@ -5964,9 +6014,9 @@ } }, "node_modules/citty": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.3.tgz", - "integrity": "sha512-tb6zTEb2BDSrzFedqFYFUKUuKNaxVJWCm7o02K4kADGkBDyyiz7D40rDMpguczdZyAN3aetd5fhpB01HkreNyg==", + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.4.tgz", + "integrity": "sha512-Q3bK1huLxzQrvj7hImJ7Z1vKYJRPQCDnd0EjXfHMidcjecGOMuLrmuQmtWmFkuKLcMThlGh1yCKG8IEc6VeNXQ==", "devOptional": true, "dependencies": { "consola": "^3.2.3" @@ -13250,9 +13300,9 @@ } }, "node_modules/nuxi": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/nuxi/-/nuxi-3.8.0.tgz", - "integrity": "sha512-SdeSKuKXTGZD5kbQR7eoM56/P30zK/FWp8QAgUzeI2ZlMyali53LvCh0UzvgCurSor9p66wm2o6FIqh3Avnjzg==", + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/nuxi/-/nuxi-3.8.3.tgz", + "integrity": "sha512-LS1KlxQhQDt+WREENAG44zfO91uiPYDcorQ7xlcaV0ejV65v7Eub94FTmJ6JNXL2boHhc+raODtJBClW2uYyJw==", "dev": true, "bin": { "nuxi": "bin/nuxi.mjs", @@ -13268,20 +13318,20 @@ } }, "node_modules/nuxt": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.7.1.tgz", - "integrity": "sha512-y8so6b11dDnuOkjqls3WZToyKODmHFaEYVB/RitjMrkNCez68qGDBFtG+VLaO34I2IdsbugTzByXktEk4dbs9w==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.7.2.tgz", + "integrity": "sha512-tNwVeGFBWExNDI3rQe0tPhE9MghfvLb4X4jh27/dzUaNElsqRDJ18mmX11WiIMwWApWPH9XVQVfHVasGn+9MRw==", "dev": true, "dependencies": { "@nuxt/devalue": "^2.0.2", - "@nuxt/kit": "3.7.1", - "@nuxt/schema": "3.7.1", + "@nuxt/kit": "3.7.2", + "@nuxt/schema": "3.7.2", "@nuxt/telemetry": "^2.4.1", "@nuxt/ui-templates": "^1.3.1", - "@nuxt/vite-builder": "3.7.1", - "@unhead/dom": "^1.5.2", - "@unhead/ssr": "^1.5.2", - "@unhead/vue": "^1.5.2", + "@nuxt/vite-builder": "3.7.2", + "@unhead/dom": "^1.6.2", + "@unhead/ssr": "^1.6.2", + "@unhead/vue": "^1.6.2", "@vue/shared": "^3.3.4", "acorn": "8.10.0", "c12": "^1.4.2", @@ -13297,14 +13347,14 @@ "globby": "^13.2.2", "h3": "^1.8.1", "hookable": "^5.5.3", - "jiti": "^1.19.3", + "jiti": "^1.20.0", "klona": "^2.0.6", "knitwork": "^1.0.0", "magic-string": "^0.30.3", "mlly": "^1.4.2", - "nitropack": "^2.6.2", - "nuxi": "^3.7.3", - "nypm": "^0.3.2", + "nitropack": "^2.6.3", + "nuxi": "^3.8.3", + "nypm": "^0.3.3", "ofetch": "^1.3.3", "ohash": "^1.1.3", "pathe": "^1.1.1", @@ -13315,7 +13365,7 @@ "std-env": "^3.4.3", "strip-literal": "^1.3.0", "ufo": "^1.3.0", - "ultrahtml": "^1.4.0", + "ultrahtml": "^1.5.2", "uncrypto": "^0.1.3", "unctx": "^2.3.1", "unenv": "^1.7.4", @@ -13348,12 +13398,95 @@ } } }, + "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", @@ -13361,14 +13494,19 @@ "dev": true }, "node_modules/nypm": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.2.tgz", - "integrity": "sha512-a49F06faGtgflUVvqIkBmrYkijbbhjEoR40gzgw7I43J1p3DkHQegNcRhaGaHddIYQ0KwrmvD1W/h16jn/2puA==", + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.3.tgz", + "integrity": "sha512-FHoxtTscAE723e80d2M9cJRb4YVjL82Ra+ZV+YqC6rfNZUWahi+ZhPF+krnR+bdMvibsfHCtgKXnZf5R6kmEPA==", "dev": true, "dependencies": { + "citty": "^0.1.4", "execa": "^8.0.1", + "pathe": "^1.1.1", "ufo": "^1.3.0" }, + "bin": { + "nypm": "dist/cli.mjs" + }, "engines": { "node": "^14.16.0 || >=16.10.0" } @@ -18481,9 +18619,9 @@ "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==" }, "node_modules/ultrahtml": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.4.0.tgz", - "integrity": "sha512-2SbudS8oD4GNq4en+3ivp25JTCwP5O2soJhIBxGJrjojjLVaLcP84xVU6Xdf0wKMhZvr68rTtrXtO6uvEr2llQ==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.2.tgz", + "integrity": "sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==", "dev": true }, "node_modules/unbox-primitive": { @@ -18597,14 +18735,14 @@ } }, "node_modules/unhead": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.5.4.tgz", - "integrity": "sha512-UnPZtL6sfSyLZNhMjjwISviCCTizZmqgbcbv38uoPq3abYlyMlndmEox19wBL9T06QzXJ6TrUzeQLU3XhBYB7A==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.7.0.tgz", + "integrity": "sha512-ql8U2dEf6de+8Bfy6MyHNbhKLkDE8sxWOEcDvHUsoKQ3eGjCiQbdMw8ha8r/jBs12bpgauQRC0p6kvIVSjR/og==", "dev": true, "dependencies": { - "@unhead/dom": "1.5.4", - "@unhead/schema": "1.5.4", - "@unhead/shared": "1.5.4", + "@unhead/dom": "1.7.0", + "@unhead/schema": "1.7.0", + "@unhead/shared": "1.7.0", "hookable": "^5.5.3" }, "funding": { @@ -20420,9 +20558,9 @@ } }, "node_modules/zhead": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.0.10.tgz", - "integrity": "sha512-irug8fXNKjqazkA27cFQs7C6/ZD3qNiEzLC56kDyzQART/Z9GMGfg8h2i6fb9c8ZWnIx/QgOgFJxK3A/CYHG0g==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.1.1.tgz", + "integrity": "sha512-FRmjAFioi07R+bmL+fqbkXF/pCbC9PwcKQ8RDluC5xTaVbNBgYRQ4eKuS1C8c7Sil//UIxet/AGp7D6royoHhA==", "dev": true, "funding": { "url": "https://github.com/sponsors/harlan-zw" diff --git a/package.json b/package.json index 51f18c2c8c..3abfeaecb6 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "test": "npm run vitest:run", "vitest:run": "nuxt generate test && vitest run", "vitest:dev": "nuxt generate test && vitest dev", - "start": "nuxt start --config-file playground/nuxt.config.js --target static", - "start:generate": "npm run generate && npm run start" + "start": "npx serve playground/dist", + "start:generate": "npm run generate && npx serve playground/dist" }, "exports": { ".": { @@ -90,7 +90,7 @@ "husky": "8.0.3", "jsdom": "22.1.0", "lint-staged": "14.0.1", - "nuxt": "3.7.1", + "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 843e7cde56..8e7740584f 100644 --- a/src/module.mjs +++ b/src/module.mjs @@ -112,12 +112,6 @@ async function addBuildTemplates(nuxt, options) { write: true }); - addTemplate({ - filename: MODULE_NAME + '/fonts.mjs', - getContents: () => getFontConfigCSSTemplate(fontConfig), - write: true - }); - addTemplate({ filename: MODULE_NAME + '/fonts.css', getContents: () => fontConfig.toCSS(), diff --git a/src/runtime/tmpl/plugin.mjs b/src/runtime/tmpl/plugin.mjs index bec720418a..1b1c1c28b9 100644 --- a/src/runtime/tmpl/plugin.mjs +++ b/src/runtime/tmpl/plugin.mjs @@ -2,11 +2,13 @@ import vFont from '#speedkit/directives/vFont'; import { isSupportedBrowser } from '#speedkit/utils/browser'; import FontList from '#speedkit/classes/FontList'; import hydrate from '#speedkit/hydrate'; +import './fonts.css'; export default defineNuxtPlugin({ name: 'speedkit-plugin', enforce: 'post', async setup(nuxtApp) { + const fontConfig = await import('./fontConfig.mjs').then( module => module.default || module ); @@ -21,20 +23,6 @@ export default defineNuxtPlugin({ targetFormats: <%= JSON.stringify(options.targetFormats) %> }); - - const fonts = await import('./fonts.mjs').then( - module => module.default || module - ); - - useHead({ - style: [ - { - key: 'speedkit-fonts', - type: 'text/css', - children: fonts - } - ] - }); }, hooks: { 'app:created'() { diff --git a/src/utils.mjs b/src/utils.mjs index 6f7bb3d377..72e35a1dea 100644 --- a/src/utils.mjs +++ b/src/utils.mjs @@ -43,7 +43,8 @@ export async function addNuxtCritters(nuxt) { nuxt.options.critters = defu( { config: { - preload: false + preload: false, + fonts: false } }, nuxt.options.critters diff --git a/src/utils/options.mjs b/src/utils/options.mjs index 7cd93cab96..8c0eaae110 100644 --- a/src/utils/options.mjs +++ b/src/utils/options.mjs @@ -4,8 +4,8 @@ export function getDefaultOptions() { return { debug: false, - disableNuxtCritters: false, // If set, `@nuxtjs/critters` will not be integrated. - disableNuxtFontaine: false, // If set, `@nuxtjs/fontaine` will not be integrated. + disableNuxtCritters: true, // If set, `@nuxtjs/critters` will not be integrated. + disableNuxtFontaine: true, // If set, `@nuxtjs/fontaine` will not be integrated. disableNuxtImage: false, // If set, `@nuxt/image` will not be integrated. optimizePreloads: true, diff --git a/src/utils/preload.mjs b/src/utils/preload.mjs index 2b83bc3d0b..60e00fdbba 100644 --- a/src/utils/preload.mjs +++ b/src/utils/preload.mjs @@ -1,15 +1,20 @@ +import { promises as fsPromises } from 'fs'; +import { basename, dirname, join } from 'path'; import { parseDocument } from 'htmlparser2'; import { load } from 'cheerio'; import { render } from 'dom-serializer'; -import { isViteBuild } from '../utils.mjs'; +import { isViteBuild, logger } from '../utils.mjs'; export function optimizePreloads(nuxt) { if (isViteBuild(nuxt)) { nuxt.options.vite.build.manifest = false; + nuxt.options.vite.build.cssCodeSplit = false; } + nuxt.options.experimental.inlineSSRStyles = false; + nuxt.hook('nitro:init', nitro => { - nitro.hooks.hook('prerender:generate', route => { + nitro.hooks.hook('prerender:generate', async route => { if (!route.fileName?.endsWith('.html') || !route.contents) { return; } @@ -22,7 +27,38 @@ export function optimizePreloads(nuxt) { $('[rel="preload"][as="style"]').remove(); $('[rel="prefetch"][as="style"]').remove(); - $('link[rel="stylesheet"]').remove(); + + // embed css files + try { + await Promise.all( + Array.from($('link[rel="stylesheet"]')) + .map(el => $(el)) + .map(async $el => { + const dir = dirname($el.attr('href')); + + // https://nuxt.com/docs/guide/directory-structure/output + const publicDir = join( + nuxt.options.rootDir, + '.output/public', + nuxt.options.vite.build.assetsDir + ); + const filepath = join(publicDir, basename($el.attr('href'))); + + 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(); + }) + ); + } catch (error) { + logger.error("can't embed css file.", error); + } route.contents = render(document); }); From fcd85933681c6870d841ac127b3291fd271e0d47 Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Wed, 13 Sep 2023 10:53:05 +0200 Subject: [PATCH 2/3] chore(lint): fix lint error --- src/module.mjs | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/module.mjs b/src/module.mjs index 8e7740584f..46c063ff4d 100644 --- a/src/module.mjs +++ b/src/module.mjs @@ -19,10 +19,7 @@ import { setPublicRuntimeConfig } from './utils.mjs'; import { getDefaultOptions } from './utils/options.mjs'; -import { - getFontConfigTemplate, - getFontConfigCSSTemplate -} from './utils/template.mjs'; +import { getFontConfigTemplate } from './utils/template.mjs'; import { optimizePreloads } from './utils/preload.mjs'; import { getSupportedBrowserDetector } from './utils/browser.mjs'; import { registerAppEntry as registerAppEntryWebpack } from './hookFunctions/webpack.mjs'; From c793fd5a3665133f92480a4d1ac6bd4cc039d1e5 Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Wed, 13 Sep 2023 11:16:11 +0200 Subject: [PATCH 3/3] fix(font): fix missing fontaine fallback family --- src/runtime/classes/Font.mjs | 15 +++++++++++---- src/runtime/classes/FontCollection.mjs | 10 ++++++---- src/runtime/composables/fonts.mjs | 9 +++++---- src/utils.mjs | 3 ++- src/utils/options.mjs | 2 +- 5 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/runtime/classes/Font.mjs b/src/runtime/classes/Font.mjs index a44bc06e32..c1406bc3df 100644 --- a/src/runtime/classes/Font.mjs +++ b/src/runtime/classes/Font.mjs @@ -48,9 +48,9 @@ export default class Font { return btoa(JSON.stringify(data)); } - getCSSText() { + getCSSText({ usedFontaine = false } = {}) { const selector = createSelector(this.rootSelector, this.selector); - const family = `"${this.family}"`; + const family = prepareFamily(this.family, { usedFontaine }); return wrapByMedia( `${selector} { font-family: ${this.fallbackFamily.join(', ')}; @@ -64,9 +64,9 @@ export default class Font { ); } - getNoScriptCSSText() { + getNoScriptCSSText({ usedFontaine = false } = {}) { const selector = createSelector(this.rootSelector, this.selector); - const family = `"${this.family}"`; + const family = prepareFamily(this.family, { usedFontaine }); return wrapByMedia( `${selector} { font-family: ${[family].concat(this.fallbackFamily).join(', ')}; @@ -122,3 +122,10 @@ function weightNormalize(weight) { return weight; } } + +function prepareFamily(family, { usedFontaine = false } = {}) { + if (!usedFontaine) { + return `"${family}"`; + } + return `"${family}", "${family} fallback"`; +} diff --git a/src/runtime/classes/FontCollection.mjs b/src/runtime/classes/FontCollection.mjs index ef39d428f2..46c95eb02a 100644 --- a/src/runtime/classes/FontCollection.mjs +++ b/src/runtime/classes/FontCollection.mjs @@ -42,16 +42,18 @@ export default class FontCollection { ); } - getStyleDescriptions() { + getStyleDescriptions(options) { return getRelevantDescriptions([ - getStyleDescription(this.list.map(font => font.getCSSText()).join(' ')) + getStyleDescription( + this.list.map(font => font.getCSSText(options)).join(' ') + ) ]); } - getNoScriptStyleDescriptions() { + getNoScriptStyleDescriptions(options) { return getRelevantDescriptions([ getStyleDescription( - this.list.map(font => font.getNoScriptCSSText()).join(' '), + this.list.map(font => font.getNoScriptCSSText(options)).join(' '), true ) ]); diff --git a/src/runtime/composables/fonts.mjs b/src/runtime/composables/fonts.mjs index 9f21dd5c4f..9a7605ab63 100644 --- a/src/runtime/composables/fonts.mjs +++ b/src/runtime/composables/fonts.mjs @@ -14,7 +14,7 @@ export default function useFonts(context) { const fontCollection = reactive(new FontCollection()); - writeHead(isCritical, fontCollection); + writeHead(isCritical, fontCollection, runtimeConfig); return { isCritical, @@ -30,16 +30,17 @@ export default function useFonts(context) { }; } -function writeHead(isCritical, fontCollection) { +function writeHead(isCritical, fontCollection, runtimeConfig) { + const options = { usedFontaine: runtimeConfig.usedFontaine }; useHead({ link: computed(() => { return fontCollection.getPreloadDescriptions(isCritical.value); }), style: computed(() => { - return fontCollection.getStyleDescriptions(); + return fontCollection.getStyleDescriptions(options); }), noscript: computed(() => { - return fontCollection.getNoScriptStyleDescriptions(); + return fontCollection.getNoScriptStyleDescriptions(options); }) }); } diff --git a/src/utils.mjs b/src/utils.mjs index 72e35a1dea..aff32166d2 100644 --- a/src/utils.mjs +++ b/src/utils.mjs @@ -24,7 +24,8 @@ export function isViteBuild(nuxt) { export const setPublicRuntimeConfig = (nuxt, options) => { nuxt.options.runtimeConfig.public.speedkit = { lazyOffsetComponent: options.lazyOffset.component, - lazyOffsetAsset: options.lazyOffset.asset + lazyOffsetAsset: options.lazyOffset.asset, + usedFontaine: !options.disableNuxtFontaine }; }; diff --git a/src/utils/options.mjs b/src/utils/options.mjs index 8c0eaae110..0ecf7f8c10 100644 --- a/src/utils/options.mjs +++ b/src/utils/options.mjs @@ -5,7 +5,7 @@ export function getDefaultOptions() { debug: false, disableNuxtCritters: true, // If set, `@nuxtjs/critters` will not be integrated. - disableNuxtFontaine: true, // If set, `@nuxtjs/fontaine` will not be integrated. + disableNuxtFontaine: false, // If set, `@nuxtjs/fontaine` will not be integrated. disableNuxtImage: false, // If set, `@nuxt/image` will not be integrated. optimizePreloads: true,