Function generateVariableCSS

packages/cli/src/google/css.ts:236–319

(
	metadata: GenerateMetadataV2,
	variableMeta: GenerateMetadataVariable,
	makeFontFilePath: (
		id: string,
		subset: string,
		axes: string,
		style: string,
	) => string,
	tag?: string,
)

};

export const generateVariableCSS = (
	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 axesKey of Object.keys(variants)) {
		const variant = variants[axesKey];
		const styles = Object.keys(variant);
		const axesLower = axesKey.toLowerCase();

		// These are variable modifiers to change specific CSS selectors
		// for variable fonts.
		const variableOpts: FontObject['variable'] = {
			wght: axes.wght,
		};
		if (axesKey === 'standard' || axesKey === 'full' || axesKey === 'wdth')
			variableOpts.stretch = axes.wdth;

		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: `${family} Variable`,
					style,
					display: 'swap',
					weight: findClosest(weights, 400),
					unicodeRange: unicodeRange[subset],
					variable: variableOpts,
					src: [
						{
							url: makeFontFilePath(tag ?? id, subset, axesLower, style),
							format: 'woff2-variations',
						},
					],
					comment: `${tag ?? id}-${subset}-${axesLower}-${style}`,
				};

				// This takes in a font object and returns an @font-face block
				const css = generateFontFace(fontObj);
				cssStyle.push(css);
			}

			// Write down CSS