From cf529ec79f2af17bbc080e7ec4b0d26e0ac6cae5 Mon Sep 17 00:00:00 2001 From: qwerzl Date: Thu, 20 Feb 2025 15:59:28 +0800 Subject: [PATCH 1/4] feat(`processCSSVariables`): `font-prefixed-only` --- src/plugins/transform.ts | 9 +++++++-- src/types.ts | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/plugins/transform.ts b/src/plugins/transform.ts index 10dbea54..92b6b9a2 100644 --- a/src/plugins/transform.ts +++ b/src/plugins/transform.ts @@ -22,7 +22,7 @@ export interface FontFaceResolution { interface FontFamilyInjectionPluginOptions { resolveFontFace: (fontFamily: string, fallbackOptions?: { fallbacks: string[], generic?: GenericCSSFamily }) => Awaitable dev: boolean - processCSSVariables?: boolean + processCSSVariables?: boolean | 'font-prefixed-only' shouldPreload: (fontFamily: string, font: FontFaceData) => boolean fontsToPreload: Map> } @@ -121,7 +121,12 @@ export const FontFamilyInjectionPlugin = (options: FontFamilyInjectionPluginOpti walk(node, { visit: 'Declaration', enter(node) { - if (((node.property !== 'font-family' && node.property !== 'font') && (!options.processCSSVariables || !node.property.startsWith('--'))) || this.atrule?.name === 'font-face') { + if (( + (node.property !== 'font-family' && node.property !== 'font') + && (options.processCSSVariables === false + || (options.processCSSVariables === 'font-prefixed-only' && !node.property.startsWith('--font')) + || (options.processCSSVariables === true && !node.property.startsWith('--')))) + || this.atrule?.name === 'font-face') { return } diff --git a/src/types.ts b/src/types.ts index 7455288f..15f02277 100644 --- a/src/types.ts +++ b/src/types.ts @@ -186,7 +186,7 @@ export interface ModuleOptions { * You can enable support for processing CSS variables for font family names. This may have a performance impact. * @default false */ - processCSSVariables?: boolean + processCSSVariables?: boolean | 'font-prefixed-only' } } From 10fd1591ab7a3267b064fa8d947cecee423910bd Mon Sep 17 00:00:00 2001 From: qwerzl Date: Fri, 21 Feb 2025 08:17:13 +0800 Subject: [PATCH 2/4] move out of experimental and set default --- src/module.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/module.ts b/src/module.ts index 7e9571b1..87e113b7 100644 --- a/src/module.ts +++ b/src/module.ts @@ -82,8 +82,8 @@ export default defineNuxtModule({ }, defaults: { devtools: true, + processCSSVariables: 'font-prefixed-only', experimental: { - processCSSVariables: false, disableLocalFallbacks: false, }, defaults: {}, @@ -332,7 +332,7 @@ export default defineNuxtModule({ addBuildPlugin(FontFamilyInjectionPlugin({ dev: nuxt.options.dev, fontsToPreload: fontMap, - processCSSVariables: options.experimental?.processCSSVariables, + processCSSVariables: options.experimental?.processCSSVariables ?? options.processCSSVariables, shouldPreload(fontFamily, fontFace) { const override = options.families?.find(f => f.name === fontFamily) if (override && override.preload !== undefined) { From 5223bb26de743694f6833672bc60bbce9e36c294 Mon Sep 17 00:00:00 2001 From: qwerzl Date: Fri, 21 Feb 2025 08:18:13 +0800 Subject: [PATCH 3/4] forgot to commit this file --- src/types.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/types.ts b/src/types.ts index 15f02277..3c779a5c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -176,6 +176,11 @@ export interface ModuleOptions { * @default true */ devtools?: boolean + /** + * You can enable support for processing CSS variables for font family names. + * @default 'font-prefixed-only' + */ + processCSSVariables?: boolean | 'font-prefixed-only' experimental?: { /** * You can disable adding local fallbacks for generated font faces, like `local('Font Face')`. @@ -183,8 +188,9 @@ export interface ModuleOptions { */ disableLocalFallbacks?: boolean /** - * You can enable support for processing CSS variables for font family names. This may have a performance impact. - * @default false + * You can enable support for processing CSS variables for font family names. + * @default 'font-prefixed-only' + * @deprecated This feature is no longer experimental. Use `processCSSVariables` instead. */ processCSSVariables?: boolean | 'font-prefixed-only' } From 1ac6fb215f0b7c5a3c4666e60a3d563fa09a0718 Mon Sep 17 00:00:00 2001 From: qwerzl Date: Fri, 21 Feb 2025 11:23:07 +0800 Subject: [PATCH 4/4] add test --- playgrounds/basic/pages/css-variable.vue | 24 ++++++++++++++++++++++++ test/basic.test.ts | 12 ++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 playgrounds/basic/pages/css-variable.vue diff --git a/playgrounds/basic/pages/css-variable.vue b/playgrounds/basic/pages/css-variable.vue new file mode 100644 index 00000000..5f7f2dde --- /dev/null +++ b/playgrounds/basic/pages/css-variable.vue @@ -0,0 +1,24 @@ + + + diff --git a/test/basic.test.ts b/test/basic.test.ts index 9aa135f9..45467b91 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -193,6 +193,18 @@ describe('features', () => { `) }) + it('only processes css variables prefixed with --font by default', async () => { + const html = await $fetch('/css-variable') + expect(extractFontFaces('Sigmar', html)).toMatchInlineSnapshot(` + [ + "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff2) format(woff2);font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-weight:400;font-style:normal}", + "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff2) format(woff2);font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-weight:400;font-style:normal}", + "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff2) format(woff2);font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400;font-style:normal}", + "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff) format(woff);font-display:swap;font-weight:400;font-style:normal}", + ] + `) + }) + // TODO: Font defined in the global CSS is not being preloaded. Looks like a bug, needs investigation. it('adds preload links to the HTML with locally scoped rules', async () => { const html = await $fetch('/providers/local')