diff --git a/.changeset/clever-mangos-clap.md b/.changeset/clever-mangos-clap.md deleted file mode 100644 index 10912d25..00000000 --- a/.changeset/clever-mangos-clap.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'@capsizecss/metrics': major -'@capsizecss/unpack': major ---- - -metrics, unpack: Cut v1 release - -No actual breaking change here, but cutting the v1 release to mark the packages moving out of experimental phase. \ No newline at end of file diff --git a/.changeset/curvy-drinks-confess.md b/.changeset/curvy-drinks-confess.md deleted file mode 100644 index 8d992e7d..00000000 --- a/.changeset/curvy-drinks-confess.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@capsizecss/metrics': minor ---- - -Update Google Fonts diff --git a/.changeset/kind-impalas-fail.md b/.changeset/kind-impalas-fail.md deleted file mode 100644 index 7def3295..00000000 --- a/.changeset/kind-impalas-fail.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@capsizecss/metrics': minor -'@capsizecss/unpack': minor ---- - -Calculate and expose `xWidthAvg`, the average width of lowercase characters. - diff --git a/.changeset/loud-rules-warn.md b/.changeset/loud-rules-warn.md deleted file mode 100644 index b5ffe89e..00000000 --- a/.changeset/loud-rules-warn.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@capsizecss/metrics': minor ---- - -Add `category` field to describe the style of the font, e.g. “serif”, “sans-serif” etc. - -Exposes the `category` field captured by Google Fonts, manually populating it for system fonts. diff --git a/.changeset/pretty-beds-know.md b/.changeset/pretty-beds-know.md deleted file mode 100644 index 7f388713..00000000 --- a/.changeset/pretty-beds-know.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -'@capsizecss/core': patch ---- - -Add additional properties to `FontMetrics` type definition. - -Previously the `FontMetrics` type captured only the metrics required by the options for the `createStyleObject` and `createStyleString` APIs. -With additional APIs coming that require a different subset of metrics, the type now reflects the structure of the data from the `metrics` package. - -The additional properties are: `familyName`, `category`, `xHeight` and `xWidthAvg`. -See documentation for more details. \ No newline at end of file diff --git a/.changeset/tall-scissors-draw.md b/.changeset/tall-scissors-draw.md deleted file mode 100644 index 5ccefe83..00000000 --- a/.changeset/tall-scissors-draw.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -'@capsizecss/core': minor ---- - -Add `createFontStack` for metrics-based font family fallbacks. - -Creates metrics-based `@font-face` declarations to improve the alignment of font family fallbacks, which can dramatically improve the [Cumulative Layout Shift](https://web.dev/cls/) metric for sites that depend on a web font. - -### Example usage - -```ts -import { createFontStack } from '@capsizecss/core'; -import lobster from '@capsizecss/metrics/lobster'; -import helveticaNeue from '@capsizecss/metrics/helveticaNeue'; -import arial from '@capsizecss/metrics/arial'; - -const { fontFamily, fontFaces } = createFontStack([ - lobster, - helveticaNeue, - arial, -]); - -``` - -The returned values are the computed font family and the generated font face declarations: -```ts -// `fontFamily` -"Lobster, 'Lobster Fallback: Helvetica Neue', 'Lobster Fallback: Arial'" -``` - -```css -/* `fontFaces` */ -@font-face { - font-family: 'Lobster Fallback: Helvetica Neue'; - src: local('Helvetica Neue'); - ascent-override: 115.1741%; - descent-override: 28.7935%; - size-adjust: 86.8251%; -} -@font-face { - font-family: 'Lobster Fallback: Arial'; - src: local('Arial'); - ascent-override: 113.5679%; - descent-override: 28.392%; - size-adjust: 88.053%; -} -``` \ No newline at end of file diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 6304a200..656bc832 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,30 +1,87 @@ # @capsizecss/core -## 3.0.0 -### Major Changes +## 3.1.0 + +### Minor Changes + +- [#117](https://github.com/seek-oss/capsize/pull/117) [`0e969d8`](https://github.com/seek-oss/capsize/commit/0e969d8968a6b115fec96b1ac214c100480f9e65) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add `createFontStack` for metrics-based font family fallbacks. + + Creates metrics-based `@font-face` declarations to improve the alignment of font family fallbacks, which can dramatically improve the [Cumulative Layout Shift](https://web.dev/cls/) metric for sites that depend on a web font. + + ### Example usage + + ```ts + import { createFontStack } from '@capsizecss/core'; + import lobster from '@capsizecss/metrics/lobster'; + import helveticaNeue from '@capsizecss/metrics/helveticaNeue'; + import arial from '@capsizecss/metrics/arial'; + + const { fontFamily, fontFaces } = createFontStack([ + lobster, + helveticaNeue, + arial, + ]); + ``` + + The returned values are the computed font family and the generated font face declarations: + + ```ts + // `fontFamily` + "Lobster, 'Lobster Fallback: Helvetica Neue', 'Lobster Fallback: Arial'"; + ``` + ```css + /* `fontFaces` */ + @font-face { + font-family: 'Lobster Fallback: Helvetica Neue'; + src: local('Helvetica Neue'); + ascent-override: 115.1741%; + descent-override: 28.7935%; + size-adjust: 86.8251%; + } + @font-face { + font-family: 'Lobster Fallback: Arial'; + src: local('Arial'); + ascent-override: 113.5679%; + descent-override: 28.392%; + size-adjust: 88.053%; + } + ``` + +### Patch Changes + +- [#122](https://github.com/seek-oss/capsize/pull/122) [`8a15c86`](https://github.com/seek-oss/capsize/commit/8a15c8647bb12c85853c6807c1edc9d82a79e6dc) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add additional properties to `FontMetrics` type definition. + + Previously the `FontMetrics` type captured only the metrics required by the options for the `createStyleObject` and `createStyleString` APIs. + With additional APIs coming that require a different subset of metrics, the type now reflects the structure of the data from the `metrics` package. + + The additional properties are: `familyName`, `category`, `xHeight` and `xWidthAvg`. + See documentation for more details. + +## 3.0.0 +### Major Changes - [#41](https://github.com/seek-oss/capsize/pull/41) [`beb400b`](https://github.com/seek-oss/capsize/commit/beb400beab5296353da32c4676466355184ab22b) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - The `capsize` package has been moved to its own organisation on npm called `@capsizecss`. This will allow an official ecosystem of tooling to be added over time. - + ### Features - + #### `createStyleObject` - + Accepts capsize `options` and returns a JS object representation of the capsize styles that is compatible with most css-in-js frameworks. - + This replaces the default export of the previous version (see migration guide below). - + ```ts import { createStyleObject } from '@capsizecss/core'; - + const capsizeStyles = createStyleObject({ fontSize: 18, fontMetrics: { // ... - } + }, }); - +
My capsized text 🛶 -
+ ; ``` - + #### `createStyleString` - + Accepts capsize `options` and returns a string representation of the capsize styles that can then be templated into a HTML `style` tag or appended to a stylesheet. - + ```ts import { createStyleString } from '@capsizecss/core'; - + const capsizedStyleRule = createStyleString('capsizedText', { fontSize: 18, fontMetrics: { // ... - } + }, }); - + document.write(`