Merge pull request #856 from GrabarzUndPartner/feature/update-css-ssr

fix(ssr): added style embed in prerenderer

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": {
     ".": {
@@ -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.2",
+    "@nuxt/webpack-builder": "3.7.1",
     "@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",

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';
@@ -112,12 +109,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(),

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"`;
+}

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

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