[7/n] @next/font/google: Add font weight, style to css and js properties #2963

wbinnssmith · 2022-12-08T23:08:41Z

This adds font-weight, font-style, and a fallback font both to the css styled by the exported className as well as to the exported style object.

Test Plan:

Given const inter = Inter({weight: "500", fallback: ["Arial"]});, verified the following css properties were generated and the following js was exported:

.className◽\[project-with-next\]... {
    font-family: 'Inter', 'Arial';
    font-weight: 500;
    font-style: normal;
}

{ 
  className: ".className◽\[project-with-next\]...",
  style: {
    "fontFamily": "'Inter', 'Arial'",
    "fontWeight": 500,
    "fontStyle": "normal"
  }
}

vercel · 2022-12-08T23:08:48Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
examples-cra-web	🔄 Building (Inspect)			Dec 12, 2022 at 11:43PM (UTC)
turbo-site	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 12, 2022 at 11:43PM (UTC)

6 Ignored Deployments

Name	Status	Updated
examples-basic-web	⬜️ Ignored (Inspect)	Dec 12, 2022 at 11:43PM (UTC)
examples-designsystem-docs	⬜️ Ignored (Inspect)	Dec 12, 2022 at 11:43PM (UTC)
examples-kitchensink-blog	⬜️ Ignored (Inspect)	Dec 12, 2022 at 11:43PM (UTC)
examples-native-web	⬜️ Ignored (Inspect)	Dec 12, 2022 at 11:43PM (UTC)
examples-nonmonorepo	⬜️ Ignored (Inspect)	Dec 12, 2022 at 11:43PM (UTC)
examples-svelte-web	⬜️ Ignored (Inspect)	Dec 12, 2022 at 11:43PM (UTC)

jridgewell · 2022-12-08T23:28:59Z

crates/next-core/src/next_font_google/util.rs

        FontWeights::Fixed(weights) => Ok(FontAxes {
-            wght: weights.clone(),
+            wght: IndexSet::from_iter(weights.iter().map(|w| w.to_string())),


Is the weights already sorted? Should this just be a vec instead?

Yeah, these sets are only ever iterated (membership is never checked). I went with the IndexSet here because of the invariant that there can't be duplicated values.

At this point FontWeights also being a set would take care of duplicates from the query string, which itself is derived from how the user invoked the font function. So in practice it's probably not an issue outside of programming errors. Does AutoSet preserve insertion order?

crates/next-core/src/next_font_google/mod.rs

wbinnssmith · 2022-12-08T23:42:34Z

Current dependencies on/for this PR:

main
- PR [7/n] @next/font/google: Add font weight, style to css and js properties #2963 👈
  - PR turbo-tasks-fetch: Emit issues on failed fetches #2964
    - PR Unmark @next/font/google as unsupported and move feature to gate @next/font/local only #2965
      - PR @next/font/google: Hash filenames used in virtual file paths #2978

This comment was auto-generated by Graphite.

github-actions · 2022-12-09T00:20:25Z

Benchmark for `323f17e`

Test	Base	PR	%	Significant %
bench_hydration/Turbopack SSR/1000 modules	2946.63ms ± 10.63ms	2989.45ms ± 9.97ms	+1.45%	+0.05%

Click to view full benchmark

Test	Base	PR	%	Significant %
bench_hmr_to_commit/Turbopack CSR/1000 modules	8006.18µs ± 46.87µs	7931.04µs ± 77.29µs	-0.94%
bench_hmr_to_commit/Turbopack RCC/1000 modules	8240.03µs ± 75.61µs	8273.79µs ± 32.54µs	+0.41%
bench_hmr_to_commit/Turbopack RSC/1000 modules	840.56ms ± 23.07ms	857.35ms ± 35.20ms	+2.00%
bench_hmr_to_commit/Turbopack SSR/1000 modules	8034.36µs ± 52.39µs	8090.95µs ± 53.46µs	+0.70%
bench_hmr_to_eval/Turbopack CSR/1000 modules	7103.27µs ± 60.58µs	7079.63µs ± 26.60µs	-0.33%
bench_hmr_to_eval/Turbopack RCC/1000 modules	7193.23µs ± 58.96µs	7160.47µs ± 43.18µs	-0.46%
bench_hmr_to_eval/Turbopack SSR/1000 modules	7078.07µs ± 54.07µs	7135.45µs ± 63.83µs	+0.81%
bench_hydration/Turbopack RCC/1000 modules	3501.30ms ± 66.64ms	3455.79ms ± 25.95ms	-1.30%
bench_hydration/Turbopack RSC/1000 modules	2651.75ms ± 35.76ms	2607.58ms ± 33.85ms	-1.67%
bench_hydration/Turbopack SSR/1000 modules	2946.63ms ± 10.63ms	2989.45ms ± 9.97ms	+1.45%	+0.05%
bench_startup/Turbopack CSR/1000 modules	1430.79ms ± 4.15ms	1419.19ms ± 5.70ms	-0.81%
bench_startup/Turbopack RCC/1000 modules	2621.91ms ± 28.52ms	2710.53ms ± 29.82ms	+3.38%
bench_startup/Turbopack RSC/1000 modules	2281.63ms ± 34.25ms	2236.98ms ± 42.93ms	-1.96%
bench_startup/Turbopack SSR/1000 modules	2316.30ms ± 4.13ms	2308.13ms ± 5.96ms	-0.35%

github-actions · 2022-12-09T00:39:40Z

🟢 CI successful 🟢

Thanks

github-actions · 2022-12-09T02:48:07Z

Benchmark for `368bc65`

Click to view benchmark

Test	Base	PR	%
bench_hmr_to_commit/Turbopack CSR/1000 modules	7896.27µs ± 81.42µs	7936.50µs ± 47.62µs	+0.51%
bench_hmr_to_commit/Turbopack RCC/1000 modules	8233.48µs ± 57.82µs	8232.84µs ± 65.52µs	-0.01%
bench_hmr_to_commit/Turbopack RSC/1000 modules	818.20ms ± 11.94ms	835.66ms ± 15.28ms	+2.13%
bench_hmr_to_commit/Turbopack SSR/1000 modules	8025.06µs ± 51.75µs	7973.15µs ± 31.68µs	-0.65%
bench_hmr_to_eval/Turbopack CSR/1000 modules	6970.85µs ± 60.59µs	6975.57µs ± 47.98µs	+0.07%
bench_hmr_to_eval/Turbopack RCC/1000 modules	7165.66µs ± 61.08µs	7141.43µs ± 72.94µs	-0.34%
bench_hmr_to_eval/Turbopack SSR/1000 modules	7075.03µs ± 73.40µs	7034.94µs ± 56.50µs	-0.57%
bench_hydration/Turbopack RCC/1000 modules	3489.41ms ± 46.53ms	3422.50ms ± 32.68ms	-1.92%
bench_hydration/Turbopack RSC/1000 modules	2548.70ms ± 23.30ms	2664.07ms ± 34.77ms	+4.53%
bench_hydration/Turbopack SSR/1000 modules	2952.66ms ± 8.81ms	2911.56ms ± 31.81ms	-1.39%
bench_startup/Turbopack CSR/1000 modules	1424.34ms ± 3.55ms	1429.33ms ± 5.96ms	+0.35%
bench_startup/Turbopack RCC/1000 modules	2650.18ms ± 24.69ms	2704.10ms ± 9.57ms	+2.03%
bench_startup/Turbopack RSC/1000 modules	2188.47ms ± 23.31ms	2207.59ms ± 31.98ms	+0.87%
bench_startup/Turbopack SSR/1000 modules	2290.96ms ± 16.93ms	2297.19ms ± 23.87ms	+0.27%

github-actions · 2022-12-09T23:34:55Z

Benchmark for `5fae10f`

Click to view benchmark

Test	Base	PR	%
bench_hmr_to_commit/Turbopack CSR/1000 modules	7970.93µs ± 47.62µs	7967.99µs ± 50.56µs	-0.04%
bench_hmr_to_commit/Turbopack RCC/1000 modules	8327.01µs ± 48.50µs	8277.14µs ± 79.49µs	-0.60%
bench_hmr_to_commit/Turbopack RSC/1000 modules	830.84ms ± 15.29ms	835.12ms ± 14.44ms	+0.52%
bench_hmr_to_commit/Turbopack SSR/1000 modules	8114.15µs ± 95.80µs	8020.06µs ± 52.81µs	-1.16%
bench_hmr_to_eval/Turbopack CSR/1000 modules	6970.71µs ± 35.10µs	6939.91µs ± 56.49µs	-0.44%
bench_hmr_to_eval/Turbopack RCC/1000 modules	7153.80µs ± 43.00µs	7169.82µs ± 43.34µs	+0.22%
bench_hmr_to_eval/Turbopack SSR/1000 modules	7127.68µs ± 49.29µs	7098.98µs ± 61.04µs	-0.40%
bench_hydration/Turbopack RCC/1000 modules	3414.89ms ± 28.14ms	3405.16ms ± 20.74ms	-0.28%
bench_hydration/Turbopack RSC/1000 modules	2551.65ms ± 27.78ms	2600.77ms ± 34.61ms	+1.93%
bench_hydration/Turbopack SSR/1000 modules	2942.71ms ± 7.67ms	2947.51ms ± 8.51ms	+0.16%
bench_startup/Turbopack CSR/1000 modules	1410.19ms ± 5.07ms	1407.64ms ± 7.92ms	-0.18%
bench_startup/Turbopack RCC/1000 modules	2599.55ms ± 26.24ms	2591.19ms ± 30.23ms	-0.32%
bench_startup/Turbopack RSC/1000 modules	2267.57ms ± 55.06ms	2215.60ms ± 28.02ms	-2.29%
bench_startup/Turbopack SSR/1000 modules	2299.14ms ± 6.64ms	2312.29ms ± 9.35ms	+0.57%

ForsakenHarmony · 2022-12-12T18:49:00Z

crates/next-core/src/next_font_google/mod.rs

@@ -76,11 +79,27 @@ impl ImportMappingReplacement for NextFontGoogleReplacer {
                        r#"
                            import cssModule from "@vercel/turbopack-next/internal/font/google/cssmodule.module.css?{}";


Why aren't we putting this into @next/font/google/cssmodule.module.css?

These are all virtual assets and will never exist on disk at those locations. I figured it might be confusing or misleading to present them as if they did.

Isn't the whole @next/font package virtual?

looking at https://github.com/vercel/next.js/blob/canary/packages/font/google/index.js

github-actions · 2022-12-13T00:57:25Z

Benchmark for `34c135f`

Click to view benchmark

Test	Base	PR	%
bench_hmr_to_commit/Turbopack CSR/1000 modules	8250.23µs ± 76.34µs	8315.13µs ± 51.59µs	+0.79%
bench_hmr_to_commit/Turbopack RCC/1000 modules	8663.10µs ± 68.74µs	8596.72µs ± 52.47µs	-0.77%
bench_hmr_to_commit/Turbopack RSC/1000 modules	820.79ms ± 12.86ms	855.55ms ± 20.75ms	+4.24%
bench_hmr_to_commit/Turbopack SSR/1000 modules	8379.90µs ± 62.53µs	8321.68µs ± 41.19µs	-0.69%
bench_hmr_to_eval/Turbopack CSR/1000 modules	7362.43µs ± 53.27µs	7353.65µs ± 39.43µs	-0.12%
bench_hmr_to_eval/Turbopack RCC/1000 modules	7481.46µs ± 50.83µs	7436.95µs ± 65.77µs	-0.60%
bench_hmr_to_eval/Turbopack SSR/1000 modules	7447.43µs ± 37.57µs	7413.41µs ± 85.15µs	-0.46%
bench_hydration/Turbopack RCC/1000 modules	3484.56ms ± 27.79ms	3514.52ms ± 27.75ms	+0.86%
bench_hydration/Turbopack RSC/1000 modules	2612.82ms ± 23.91ms	2652.91ms ± 36.62ms	+1.53%
bench_hydration/Turbopack SSR/1000 modules	2958.37ms ± 27.93ms	3012.17ms ± 5.82ms	+1.82%
bench_startup/Turbopack CSR/1000 modules	1447.57ms ± 4.30ms	1449.49ms ± 4.65ms	+0.13%
bench_startup/Turbopack RCC/1000 modules	2707.94ms ± 47.71ms	2687.69ms ± 39.78ms	-0.75%
bench_startup/Turbopack RSC/1000 modules	2333.64ms ± 57.64ms	2353.93ms ± 55.74ms	+0.87%
bench_startup/Turbopack SSR/1000 modules	2342.44ms ± 27.04ms	2365.66ms ± 6.29ms	+0.99%

wbinnssmith requested a review from a team as a code owner December 8, 2022 23:08

github-actions bot added the area: turbopack label Dec 8, 2022

jridgewell reviewed Dec 8, 2022

View reviewed changes

wbinnssmith mentioned this pull request Dec 8, 2022

turbo-tasks-fetch: Emit issues on failed fetches #2964

Merged

wbinnssmith mentioned this pull request Dec 9, 2022

Unmark @next/font/google as unsupported and move feature to gate @next/font/local only #2965

Merged

wbinnssmith force-pushed the wbinnssmith/next-font-google-handle-connection-issues branch from 6cd213a to d08a0a8 Compare December 9, 2022 01:38

vercel bot deployed to Preview – turbo-site December 9, 2022 01:39 View deployment

wbinnssmith force-pushed the wbinnssmith/next-font-google-handle-connection-issues branch from d08a0a8 to b7ee981 Compare December 9, 2022 22:23

vercel bot deployed to Preview – turbo-site December 9, 2022 22:24 View deployment

wbinnssmith requested review from ForsakenHarmony, alexkirsz and a team December 9, 2022 23:12

wbinnssmith mentioned this pull request Dec 12, 2022

@next/font/google: Hash filenames used in virtual file paths #2978

Merged

ForsakenHarmony approved these changes Dec 12, 2022

View reviewed changes

Add font weight, style to css and js properties

808dd46

wbinnssmith force-pushed the wbinnssmith/next-font-google-handle-connection-issues branch from b7ee981 to 808dd46 Compare December 12, 2022 23:42

vercel bot deployed to Preview – turbo-site December 12, 2022 23:43 View deployment

wbinnssmith enabled auto-merge (squash) December 13, 2022 00:18

wbinnssmith disabled auto-merge December 13, 2022 00:22

wbinnssmith merged commit 4847d1b into main Dec 13, 2022

wbinnssmith deleted the wbinnssmith/next-font-google-handle-connection-issues branch December 13, 2022 00:22

jridgewell pushed a commit to vercel/next.js that referenced this pull request Mar 10, 2023

Add font weight, style to css and js properties (vercel/turbo#2963)

f073609

sokra pushed a commit to vercel/next.js that referenced this pull request Mar 13, 2023

Add font weight, style to css and js properties (vercel/turbo#2963)

e3d210f

DuCanhGH mentioned this pull request Mar 15, 2023

Fix(typedRoutes): fixed files from directories other than pages and app getting into Route vercel/next.js#47184

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7/n] @next/font/google: Add font weight, style to css and js properties #2963

[7/n] @next/font/google: Add font weight, style to css and js properties #2963

wbinnssmith commented Dec 8, 2022 •

edited

vercel bot commented Dec 8, 2022 •

edited

jridgewell Dec 8, 2022

wbinnssmith Dec 9, 2022

wbinnssmith commented Dec 8, 2022 •

edited

github-actions bot commented Dec 9, 2022

github-actions bot commented Dec 9, 2022 •

edited

github-actions bot commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

ForsakenHarmony Dec 12, 2022

wbinnssmith Dec 12, 2022

ForsakenHarmony Dec 13, 2022

github-actions bot commented Dec 13, 2022

		@@ -76,11 +79,27 @@ impl ImportMappingReplacement for NextFontGoogleReplacer {
		r#"
		import cssModule from "@vercel/turbopack-next/internal/font/google/cssmodule.module.css?{}";

[7/n] @next/font/google: Add font weight, style to css and js properties #2963

[7/n] @next/font/google: Add font weight, style to css and js properties #2963

Conversation

wbinnssmith commented Dec 8, 2022 • edited

vercel bot commented Dec 8, 2022 • edited

jridgewell Dec 8, 2022

Choose a reason for hiding this comment

wbinnssmith Dec 9, 2022

Choose a reason for hiding this comment

wbinnssmith commented Dec 8, 2022 • edited

github-actions bot commented Dec 9, 2022

Benchmark for 323f17e

github-actions bot commented Dec 9, 2022 • edited

🟢 CI successful 🟢

github-actions bot commented Dec 9, 2022

Benchmark for 368bc65

github-actions bot commented Dec 9, 2022

Benchmark for 5fae10f

ForsakenHarmony Dec 12, 2022

Choose a reason for hiding this comment

wbinnssmith Dec 12, 2022

Choose a reason for hiding this comment

ForsakenHarmony Dec 13, 2022

Choose a reason for hiding this comment

github-actions bot commented Dec 13, 2022

Benchmark for 34c135f

wbinnssmith commented Dec 8, 2022 •

edited

vercel bot commented Dec 8, 2022 •

edited

wbinnssmith commented Dec 8, 2022 •

edited

Benchmark for `323f17e`

github-actions bot commented Dec 9, 2022 •

edited

Benchmark for `368bc65`

Benchmark for `5fae10f`

Benchmark for `34c135f`