Function generateIconVariableCSS

packages/cli/src/google/css.ts:424–503

(
	metadata: GenerateIconVariable,
	makeFontFilePath: (
		id: string,
		subset: string,
		axesLower: string,
		style: string,
	) => string,
	tag?: string,
)

};

export const generateIconVariableCSS = (
	metadata: GenerateIconVariable,
	makeFontFilePath: (
		id: string,
		subset: string,
		axesLower: string,
		style: string,
	) => string,
	tag?: string,
): CSSGenerate => {
	const cssGenerate: CSSGenerate = [];
	const { id, family, variants, axes } = metadata;

	// Generate CSS
	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: APIIconResponse['axes'] = {
			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;

		// Generate variable CSS
		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: Number(axes.wght.default),
					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