fix(cli): invalid urls generated for cdn (#838)

* fix: include tag to fix cdn links * ci: build packages before publishing * fix: loosen types for generating css * Create slimy-mice-notice.md * fix: rely on weights for variable packager
fontsource · Sep 20, 2023 · f09ea8e · f09ea8e
1 parent b275242
commit f09ea8e
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 33 deletions.
diff --git a/.changeset/slimy-mice-notice.md b/.changeset/slimy-mice-notice.md
@@ -0,0 +1,5 @@
+---
+"@fontsource-utils/cli": patch
+---
+
+fix(cli): invalid urls generated for cdn and loosen types for CSS generators
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
 		"ci:lint": "pnpm -r run ci:lint",
 		"ci:test": "CI=true pnpm build && pnpm coverage",
 		"ci:version": "changeset version",
-		"ci:publish": "pnpm --filter \"./packages/*\" publish",
+		"ci:publish": "pnpm --filter \"./packages/*\" run build && pnpm --filter \"./packages/*\" publish",
 		"ci:publish-api": "pnpm --filter \"./packages/*\" run build && pnpm --filter \"./api/*\" run deploy"
 	},
 	"dependencies": {

diff --git a/packages/cli/src/google/packager-icons.ts b/packages/cli/src/google/packager-icons.ts
@@ -17,15 +17,26 @@ import {
 	makeVariableFontFilePath,
 } from '../utils';
 
+type GenerateIconStatic = Pick<
+	FontObjectV2['id'],
+	'id' | 'family' | 'styles' | 'weights' | 'subsets' | 'variants'
+>;
+
+type GenerateIconVariable = Pick<
+	FontObjectVariable['id'],
+	'id' | 'family' | 'axes' | 'variants'
+>;
+
 const generateIconStaticCSS = (
-	metadata: FontObjectV2['id'],
+	metadata: GenerateIconStatic,
 	makeFontFilePath: (
 		id: string,
 		subset: string,
 		weight: string,
 		style: string,
 		extension: string,
 	) => string,
+	tag?: string,
 ): CSSGenerate => {
 	const cssGenerate: CSSGenerate = [];
 	const { id, family, styles, weights, subsets, variants } = metadata;
@@ -50,7 +61,7 @@ const generateIconStaticCSS = (
 						src: [
 							{
 								url: makeFontFilePath(
-									id,
+									tag ?? id,
 									subset,
 									String(weight),
 									style,
@@ -60,7 +71,7 @@ const generateIconStaticCSS = (
 							},
 							{
 								url: makeFontFilePath(
-									id,
+									tag ?? id,
 									subset,
 									String(weight),
 									style,
@@ -69,7 +80,7 @@ const generateIconStaticCSS = (
 								format: 'woff' as const,
 							},
 						],
-						comment: `${id}-${subset}-${weight}-${style}`,
+						comment: `${tag ?? id}-${subset}-${weight}-${style}`,
 					};
 					// This takes in a font object and returns an @font-face block
 					const css = generateFontFace(fontObj);
@@ -132,13 +143,14 @@ const packagerIconsStatic = async (id: string, opts: BuildOptions) => {
 };
 
 const generateIconVariableCSS = (
-	metadata: FontObjectVariable['id'],
+	metadata: GenerateIconVariable,
 	makeFontFilePath: (
 		id: string,
 		subset: string,
 		axesLower: string,
 		style: string,
 	) => string,
+	tag?: string,
 ): CSSGenerate => {
 	const cssGenerate: CSSGenerate = [];
 	const { id, family, variants, axes } = metadata;
@@ -175,11 +187,11 @@ const generateIconVariableCSS = (
 					variable: variableOpts,
 					src: [
 						{
-							url: makeFontFilePath(id, subset, axesLower, style),
+							url: makeFontFilePath(tag ?? id, subset, axesLower, style),
 							format: 'woff2-variations',
 						},
 					],
-					comment: `${id}-${subset}-${axesLower}-${style}`,
+					comment: `${tag ?? id}-${subset}-${axesLower}-${style}`,
 				};
 
 				// This takes in a font object and returns an @font-face block

diff --git a/packages/cli/src/google/packager-v1.ts b/packages/cli/src/google/packager-v1.ts
@@ -7,15 +7,21 @@ import * as path from 'pathe';
 import type { BuildOptions, CSSGenerate } from '../types';
 import { makeFontFilePath } from '../utils';
 
+type GenerateMetadataV1 = Pick<
+	FontObjectV1['id'],
+	'id' | 'family' | 'styles' | 'weights' | 'subsets' | 'variants'
+>;
+
 const generateV1CSS = (
-	metadata: FontObjectV1['id'],
+	metadata: GenerateMetadataV1,
 	makeFontFilePath: (
 		id: string,
 		subset: string,
 		weight: string,
 		style: string,
 		extension: string,
 	) => string,
+	tag?: string,
 ): CSSGenerate => {
 	const cssGenerate: CSSGenerate = [];
 	const { id, family, styles, weights, subsets, variants } = metadata;
@@ -37,7 +43,7 @@ const generateV1CSS = (
 						src: [
 							{
 								url: makeFontFilePath(
-									id,
+									tag ?? id,
 									subset,
 									String(weight),
 									style,
@@ -47,7 +53,7 @@ const generateV1CSS = (
 							},
 							{
 								url: makeFontFilePath(
-									id,
+									tag ?? id,
 									subset,
 									String(weight),
 									style,
@@ -56,7 +62,7 @@ const generateV1CSS = (
 								format: 'woff' as const,
 							},
 						],
-						comment: `${id}-${subset}-${weight}-${style}`,
+						comment: `${tag ?? id}-${subset}-${weight}-${style}`,
 					};
 					// This takes in a font object and returns an @font-face block
 					const css = generateFontFace(fontObj);

diff --git a/packages/cli/src/google/packager-v2.ts b/packages/cli/src/google/packager-v2.ts
@@ -7,15 +7,27 @@ import * as path from 'pathe';
 import type { BuildOptions, CSSGenerate } from '../types';
 import { findClosest, makeFontFilePath } from '../utils';
 
+type GenerateMetadataV2 = Pick<
+	FontObjectV2['id'],
+	| 'id'
+	| 'family'
+	| 'styles'
+	| 'weights'
+	| 'subsets'
+	| 'variants'
+	| 'unicodeRange'
+>;
+
 const generateV2CSS = (
-	metadata: FontObjectV2['id'],
+	metadata: GenerateMetadataV2,
 	makeFontFilePath: (
 		id: string,
 		subset: string,
 		weight: string,
 		style: string,
 		extension: string,
 	) => string,
+	tag?: string,
 ): CSSGenerate => {
 	const cssGenerate: CSSGenerate = [];
 	const { id, family, styles, weights, variants, unicodeRange } = metadata;
@@ -42,7 +54,7 @@ const generateV2CSS = (
 						src: [
 							{
 								url: makeFontFilePath(
-									id,
+									tag ?? id,
 									subset,
 									String(weight),
 									style,
@@ -52,7 +64,7 @@ const generateV2CSS = (
 							},
 							{
 								url: makeFontFilePath(
-									id,
+									tag ?? id,
 									subset,
 									String(weight),
 									style,
@@ -61,7 +73,7 @@ const generateV2CSS = (
 								format: 'woff' as const,
 							},
 						],
-						comment: `${id}-${subset}-${weight}-${style}`,
+						comment: `${tag ?? id}-${subset}-${weight}-${style}`,
 					};
 					// This takes in a font object and returns an @font-face block
 					const css = generateFontFace(fontObj);

diff --git a/packages/cli/src/google/packager-variable.ts b/packages/cli/src/google/packager-variable.ts
@@ -12,53 +12,66 @@ import * as path from 'pathe';
 import type { BuildOptions, CSSGenerate } from '../types';
 import { findClosest, makeVariableFontFilePath } from '../utils';
 
+type GenerateMetadataV2 = Pick<
+	FontObjectV2['id'],
+	'id' | 'family' | 'unicodeRange' | 'weights'
+>;
+
+type GenerateMetadataVariable = Pick<
+	FontObjectVariable['id'],
+	'axes' | 'variants'
+>;
+
 const generateVariableCSS = (
-	metadata: FontObjectV2['id'],
-	variableMeta: FontObjectVariable['id'],
+	metadata: GenerateMetadataV2,
+	variableMeta: GenerateMetadataVariable,
 	makeFontFilePath: (
 		id: string,
 		subset: string,
 		axes: string,
 		style: string,
 	) => string,
+	tag?: string,
 ): CSSGenerate => {
+	const { id, family, unicodeRange, weights } = metadata;
+	const { axes, variants } = variableMeta;
 	const cssGenerate: CSSGenerate = [];
 	let indexCSS = '';
 
-	for (const axes of Object.keys(variableMeta.variants)) {
-		const variant = variableMeta.variants[axes];
+	for (const axesKey of Object.keys(variants)) {
+		const variant = variants[axesKey];
 		const styles = Object.keys(variant);
-		const axesLower = axes.toLowerCase();
+		const axesLower = axesKey.toLowerCase();
 
 		// These are variable modifiers to change specific CSS selectors
 		// for variable fonts.
 		const variableOpts: FontObject['variable'] = {
-			wght: variableMeta.axes.wght,
+			wght: axes.wght,
 		};
-		if (axes === 'standard' || axes === 'full' || axes === 'wdth')
-			variableOpts.stretch = variableMeta.axes.wdth;
+		if (axesKey === 'standard' || axesKey === 'full' || axesKey === 'wdth')
+			variableOpts.stretch = axes.wdth;
 
-		if (axes === 'standard' || axes === 'full' || axes === 'slnt')
-			variableOpts.slnt = variableMeta.axes.slnt;
+		if (axesKey === 'standard' || axesKey === 'full' || axesKey === 'slnt')
+			variableOpts.slnt = axes.slnt;
 
 		for (const style of styles) {
 			const cssStyle: string[] = [];
 
 			for (const subset of Object.keys(variant[style])) {
 				const fontObj: FontObject = {
-					family: metadata.family,
+					family,
 					style,
 					display: 'swap',
-					weight: findClosest(metadata.weights, 400),
-					unicodeRange: metadata.unicodeRange[subset],
+					weight: findClosest(weights, 400),
+					unicodeRange: unicodeRange[subset],
 					variable: variableOpts,
 					src: [
 						{
-							url: makeFontFilePath(metadata.id, subset, axesLower, style),
+							url: makeFontFilePath(tag ?? id, subset, axesLower, style),
 							format: 'woff2-variations',
 						},
 					],
-					comment: `${metadata.id}-${subset}-${axesLower}-${style}`,
+					comment: `${tag ?? id}-${subset}-${axesLower}-${style}`,
 				};
 
 				// This takes in a font object and returns an @font-face block
@@ -77,11 +90,11 @@ const generateVariableCSS = (
 			});
 
 			// Ensure style is normal or there is only one style
-			if (axes === 'wght' && (style === 'normal' || styles.length === 1))
+			if (axesKey === 'wght' && (style === 'normal' || styles.length === 1))
 				indexCSS = css;
 
 			// Some fonts may not have a wght axis, but usually have an opsz axis to compensate
-			if (indexCSS === '' && axes === 'opsz') indexCSS = css;
+			if (indexCSS === '' && axesKey === 'opsz') indexCSS = css;
 		}
 	}