feat: allow globalFontFace to accept array of font face rules

[ronci]

This PR adds support to globalFontFace function to accept an array of font face rules.

example:

import {
  globalFontFace,
  style
} from '@vanilla-extract/css';

const gentium = 'GlobalGentium';

globalFontFace(gentium, [
  {
    src: 'local("Gentium")',
    fontWeight: 'normal'
  },
  {
    src: 'local("Gentium Bold")',
    fontWeight: 'bold'
  }
]);

export const font = style({
  fontFamily: gentium
});

If you need any additional documentation or clarification, please let me know.
Thank you!

[changeset-bot]

🦋 Changeset detected

Latest commit: 67a27a8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@vanilla-extract/css	Minor
@fixtures/features	Patch
@fixtures/layers	Patch
@fixtures/low-level	Patch
@fixtures/recipes	Patch
@fixtures/sprinkles	Patch
@fixtures/template-string-paths	Patch
@fixtures/themed	Patch
@fixtures/thirdparty	Patch
@fixtures/unused-modules	Patch
@fixtures/thirdparty-dep	Patch
@fixtures/thirdparty-dep-dep	Patch
vanilla-extract-example-webpack-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[askoufis]

This complements #1114 nicely. We should've done this a while ago. Thanks for the PR!

[JonathanLorimer]

@askoufis I think this broke something. The css I am seeing generated is this:

@font-face {
  src: url("/fonts/slussen/Slussen-Black-Italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-family: Slussen;
}
@font-face {
  0 {
    src: url("/fonts/slussen/Slussen-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
  }
  1 {
    src: url("/fonts/slussen/Slussen-Bold-Italic.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
  }
  2 {
    src: url("/fonts/slussen/Slussen-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
  }
  3 {
    src: url("/fonts/slussen/Slussen-Light-Italic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
  }
  4 {
    src: url("/fonts/slussen/Slussen-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
  }
  5 {
    src: url("/fonts/slussen/Slussen-Medium-Italic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
  }
  6 {
    src: url("/fonts/slussen/Slussen-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
  }
  7 {
    src: url("/fonts/slussen/Slussen-Regular-Italic.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
  }
  8 {
    src: url("/fonts/slussen/Slussen-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
  }
  9 {
    src: url("/fonts/slussen/Slussen-Semibold-Italic.otf") format("opentype");
    font-weight: 600;
    font-style: italic;
  }
  10 {
    src: url("/fonts/slussen/Slussen-Semibold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
  }
  11 {
    src: url("/fonts/slussen/Slussen-Thin-Italic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
  }
  12 {
    src: url("/fonts/slussen/Slussen-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
  }
  font-family: Slussen;
}

for this vanilla extract snippet:

globalFontFace(slussen,
  {
    src: 'url("/fonts/slussen/Slussen-Black-Italic.otf") format("opentype")',
    fontWeight: '900',
    fontStyle: 'italic'
  },
)

globalFontFace(slussen, [
  {
    src: 'url("/fonts/slussen/Slussen-Black.otf") format("opentype")',
    fontWeight: '900',
    fontStyle: 'normal'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Bold-Italic.otf") format("opentype")',
    fontWeight: 'bold',
    fontStyle: 'italic'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Bold.otf") format("opentype")',
    fontWeight: 'bold',
    fontStyle: 'normal'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Light-Italic.otf") format("opentype")',
    fontWeight: '300',
    fontStyle: 'italic'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Light.otf") format("opentype")',
    fontWeight: '300',
    fontStyle: 'normal'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Medium-Italic.otf") format("opentype")',
    fontWeight: '500',
    fontStyle: 'italic'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Medium.otf") format("opentype")',
    fontWeight: '500',
    fontStyle: 'normal'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Regular-Italic.otf") format("opentype")',
    fontWeight: 'normal',
    fontStyle: 'italic'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Regular.otf") format("opentype")',
    fontWeight: 'normal',
    fontStyle: 'normal'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Semibold-Italic.otf") format("opentype")',
    fontWeight: '600',
    fontStyle: 'italic'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Semibold.otf") format("opentype")',
    fontWeight: '600',
    fontStyle: 'normal'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Thin-Italic.otf") format("opentype")',
    fontWeight: '100',
    fontStyle: 'italic'
  },
  {
    src: 'url("/fonts/slussen/Slussen-Thin.otf") format("opentype")',
    fontWeight: '100',
    fontStyle: 'normal'
  },
]);

[JonathanLorimer]

Oh sorry, I see this was only merged last week, and hasn't officially been released! The docs are updated though so it confused me.

[JonathanLorimer]

For anyone else coming across this you can fix temporarily like so:

[
  {
    src: 'url("/fonts/slussen/Slussen-Thin.otf") format("opentype")',
    fontWeight: '100',
    fontStyle: 'normal'
  },
  ...
].map((ff) => {
  globalFontFace(slussen, ff)
})

[askoufis]

Oh sorry, I see this was only merged last week, and hasn't officially been released! The docs are updated though so it confused me.

@JonathanLorimer I was planning to release this feature alongside some other changes, but they haven't been merged yet. I've just done a release, so this feature is now available in @vanilla-extract/[email protected].