fix: resolve full variant CSS generation (#110)

* fix: resolve unnecessary CSS generation * docs: make it slightly more clear if full variant exists Co-authored-by: Lotus <DecliningLotus@users.noreply.github.com>
fontsource · Dec 12, 2020 · 35bb49b · 35bb49b
1 parent afd16d4
commit 35bb49b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 60 deletions.
diff --git a/scripts/google/templates.js b/scripts/google/templates.js
@@ -235,7 +235,7 @@ import "fontsource-<%= fontId %>/variable-full-normal.css" // Normal variant.
 import "fontsource-<%= fontId %>/variable-full-italic.css" // Italic variant.
 \`\`\`
 
-Note a \`full\` or \`italic\` variant may NOT exist if there are no additional axes other than weight.
+Note a \`full\` or \`italic\` variant may NOT exist if there are no additional axes other than wght and/or ital. You can check the available axes [here](https://fonts.google.com/variablefonts).
 
 Followed by the CSS using the @supports tag, which checks whether the browser is capable of utilising variable fonts. Fallback fonts and their relevant CSS should be used outside the block, whilst all variable options should be used within the @supports block and utilising the font-variation-settings tag.
 

diff --git a/scripts/google/variable.js b/scripts/google/variable.js
@@ -78,68 +78,71 @@ module.exports = function (id) {
   fs.writeFileSync(cssPath, css.join(""))
 
   // full CSS Generation
-  if ("wdth" in fontVariable.axes) {
-    const css = []
-    font.styles.forEach(style => {
-      const origStyle = style
-      if ("slnt" in fontVariable.axes && style === "normal") {
-        // SLNT has a different style linked to it.
-        style = `oblique ${fontVariable.axes.slnt.max * -1}deg ${
-          fontVariable.axes.slnt.min * -1
-        }deg`
-      }
-      const cssStyle = []
-      font.subsets.forEach(subset => {
-        const type = "full"
-        const cssWght = fontFaceVariableWdth({
-          fontId: font.id,
-          fontName: variableName,
-          style,
-          subset,
-          type,
-          wdth: `${fontVariable.axes.wdth.min}% ${fontVariable.axes.wdth.max}%`,
-          weight: `${fontVariable.axes.wght.min} ${fontVariable.axes.wght.max}`,
-          woff2Path: makeFontFilePath(subset, type, origStyle),
-          unicodeRange: font.unicodeRange[subset],
+  if ("full" in fontVariable.variants) {
+    // Wdth requires a different CSS template (font-stretch)
+    if ("wdth" in fontVariable.axes) {
+      const css = []
+      font.styles.forEach(style => {
+        const origStyle = style
+        if ("slnt" in fontVariable.axes && style === "normal") {
+          // SLNT has a different style linked to it.
+          style = `oblique ${fontVariable.axes.slnt.max * -1}deg ${
+            fontVariable.axes.slnt.min * -1
+          }deg`
+        }
+        const cssStyle = []
+        font.subsets.forEach(subset => {
+          const type = "full"
+          const cssWght = fontFaceVariableWdth({
+            fontId: font.id,
+            fontName: variableName,
+            style,
+            subset,
+            type,
+            wdth: `${fontVariable.axes.wdth.min}% ${fontVariable.axes.wdth.max}%`,
+            weight: `${fontVariable.axes.wght.min} ${fontVariable.axes.wght.max}`,
+            woff2Path: makeFontFilePath(subset, type, origStyle),
+            unicodeRange: font.unicodeRange[subset],
+          })
+          cssStyle.push(cssWght)
+          css.push(cssWght)
         })
-        cssStyle.push(cssWght)
-        css.push(cssWght)
+        const cssStylePath = `${fontDir}/variable-full-${origStyle}.css`
+        fs.writeFileSync(cssStylePath, cssStyle.join(""))
       })
-      const cssStylePath = `${fontDir}/variable-full-${origStyle}.css`
-      fs.writeFileSync(cssStylePath, cssStyle.join(""))
-    })
-    const cssPath = `${fontDir}/variable-full.css`
-    fs.writeFileSync(cssPath, css.join(""))
-  } else {
-    const css = []
-    font.styles.forEach(style => {
-      const origStyle = style
-      if ("slnt" in fontVariable.axes && style === "normal") {
-        // SLNT has a different style linked to it.
-        style = `oblique ${fontVariable.axes.slnt.max * -1}deg ${
-          fontVariable.axes.slnt.min * -1
-        }deg`
-      }
-      const cssStyle = []
-      font.subsets.forEach(subset => {
-        const type = "full"
-        const cssWght = fontFaceVariable({
-          fontId: font.id,
-          fontName: variableName,
-          style,
-          subset,
-          type,
-          weight: `${fontVariable.axes.wght.min} ${fontVariable.axes.wght.max}`,
-          woff2Path: makeFontFilePath(subset, type, origStyle),
-          unicodeRange: font.unicodeRange[subset],
+      const cssPath = `${fontDir}/variable-full.css`
+      fs.writeFileSync(cssPath, css.join(""))
+    } else {
+      const css = []
+      font.styles.forEach(style => {
+        const origStyle = style
+        if ("slnt" in fontVariable.axes && style === "normal") {
+          // SLNT has a different style linked to it.
+          style = `oblique ${fontVariable.axes.slnt.max * -1}deg ${
+            fontVariable.axes.slnt.min * -1
+          }deg`
+        }
+        const cssStyle = []
+        font.subsets.forEach(subset => {
+          const type = "full"
+          const cssWght = fontFaceVariable({
+            fontId: font.id,
+            fontName: variableName,
+            style,
+            subset,
+            type,
+            weight: `${fontVariable.axes.wght.min} ${fontVariable.axes.wght.max}`,
+            woff2Path: makeFontFilePath(subset, type, origStyle),
+            unicodeRange: font.unicodeRange[subset],
+          })
+          cssStyle.push(cssWght)
+          css.push(cssWght)
         })
-        cssStyle.push(cssWght)
-        css.push(cssWght)
+        const cssStylePath = `${fontDir}/variable-full-${origStyle}.css`
+        fs.writeFileSync(cssStylePath, cssStyle.join(""))
       })
-      const cssStylePath = `${fontDir}/variable-full-${origStyle}.css`
-      fs.writeFileSync(cssStylePath, cssStyle.join(""))
-    })
-    const cssPath = `${fontDir}/variable-full.css`
-    fs.writeFileSync(cssPath, css.join(""))
+      const cssPath = `${fontDir}/variable-full.css`
+      fs.writeFileSync(cssPath, css.join(""))
+    }
   }
 }