From 35bb49bccd695aeac01379339704530a5002dac7 Mon Sep 17 00:00:00 2001 From: Lotus Date: Sat, 12 Dec 2020 12:16:41 +0300 Subject: [PATCH] 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 --- scripts/google/templates.js | 2 +- scripts/google/variable.js | 121 ++++++++++++++++++------------------ 2 files changed, 63 insertions(+), 60 deletions(-) diff --git a/scripts/google/templates.js b/scripts/google/templates.js index 4719103dae9..f5dc8f96878 100644 --- 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 index ef31e7f6128..a08b9fac5db 100644 --- 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("")) + } } }