@capsizecss/[email protected]

Minor Changes

• #88 7500f2a Thanks @michaeltaranto! - Update Google Fonts to latest

@capsizecss/[email protected]

Minor Changes

• #80 578682b Thanks @michaeltaranto! - Expose xHeight metadata when available

• #80 578682b Thanks @michaeltaranto! - metrics: Ensure generated types reflect extracted metadata

  The constructed types will now align with the metadata available from the font itself. This will ensure that TypeScript consumers receieve build time feedback for incomplete metrics, allowing manual overrides to complete the required FontMetric data.

  Example

  When the font metadata does not include a capHeight:

  {
    familyName: 'My Incomplete Font',
    ascent: 860,
    descent: -348,
    lineGap: 0,
    unitsPerEm: 1024
  }

  TypeScript will now error when providing the metrics, rather than accepting them and rendering incorrectly.

  import myIncompleteFontMetrics from '@capsizecss/metrics/myIncompleteFont';
  import { createStyleObject } from '@capsizecss/core';
  
  createStyleObject({
    fontSize: 16,
    leading: 24,
    // Errors with incomplete metrics, missing `capHeight`
    fontMetrics: myIncompleteFontMetrics,
  });

  This allows consumers to resolve missing values and complete the contract.

  createStyleObject({
    fontSize: 16,
    leading: 24,
    // Error can be resolved by providing a manual override
    fontMetrics: {
      ...myIncompleteFontMetrics,
      capHeight: 594,
    },
  });

  Resolving missing data

  Resolving manual overrides can be done via the Capsize website. After selecting or uploading the font, use the Edit button at the end of Step 1.

Patch Changes

• #80 578682b Thanks @michaeltaranto! - metrics: Update Google Fonts to latest

@capsizecss/[email protected]

Minor Changes

• #48 55251eb Thanks @michaeltaranto! - Initial release

@capsizecss/[email protected]

Minor Changes

• #48 55251eb Thanks @michaeltaranto! - Initial release

@capsizecss/[email protected]

Major Changes

• #41 beb400b Thanks @michaeltaranto! - Initial release

@capsizecss/[email protected]

Major Changes

• #41 beb400b Thanks @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).

  import { createStyleObject } from '@capsizecss/core';
  
  const capsizeStyles = createStyleObject({
    fontSize: 18,
    fontMetrics: {
      // ...
    }
  });
  
  <div
    css={{
      // fontFamily: '...' etc,
      ...capsizeStyles,
    }}
  >
    My capsized text 🛶
  </div>

  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.

  import { createStyleString } from '@capsizecss/core';
  
  const capsizedStyleRule = createStyleString('capsizedText', {
    fontSize: 18,
    fontMetrics: {
      // ...
    }
  });
  
  document.write(`
    <style type="text/css">
      ${capsizedStyleRule}
    </style>
    <div class="capsizedText">
      My capsized text 🛶
    </div>
  `);

  precomputeValues

  Accepts capsize options and returns all the information required to create styles for a specific font size given the provided font metrics. This is useful for integrations with different styling solutions.

  Breaking Change Migration Guide

  Installation

  Replace the previous capsize dependency with the new scoped version of the package @capsizecss/core:

  npm uninstall capsize
  npm install @capsizecss/core

  API changes

  There is no longer a default export, this behaviour is now available via the createStyleObject named export.

  - import capsize from 'capsize';
  + import { createStyleObject } from '@capsizecss/core';
  
  - const styles = capsize({
  + const styles = createStyleObject({
    fontSize: 18,
    fontMetrics: {
      // ...
    }
  });

  Import changes

  Both the getCapHeight function and FontMetrics type still exist, but the package name will need to be updated.

  - import { getCapHeight, FontMetrics } from 'capsize';
  + import { getCapHeight, FontMetrics } from '@capsizecss/core';

  Removals

  The CapsizeOptions type has been removed, you can infer this from the first argument passed to createStyleObject using TypeScripts built-in Parameters utility:

  - import type { CapsizeStyles } from 'capsize';
  + import type { createStyleObject } from '@capsizecss/core';
  
  + type CapsizeOptions = Parameters<typeof createStyleObject>[0];

  The CapsizeStyles type has been removed, you can infer this from createStyleObject using TypeScripts built-in ReturnType utility:

  - import type { CapsizeStyles } from 'capsize';
  + import type { createStyleObject } from '@capsizecss/core';
  
  + type CapsizeStyles = ReturnType<typeof createStyleObject>;

[email protected]

Major Changes

• 4719217 #33 Thanks @michaeltaranto! - Change margin collapse guard from padding to display table

  The styles object returned from capsize no longer contains a padding property (also removed the height property from the pseudo elements). This was previously used to prevent the negative margins from collapsing.

  The technique has been swapped out in favour of using display: table on the pseudo elements, which also required an inversion of the negative margin direction.

  {
    "fontSize": "67.5165px",
    "lineHeight": "72px",
  -  "padding": "0.05px 0",
    "::before": {
      "content": "''",
  +    "marginBottom": "-0.1648em",
  +    "display": "table",
  -    "marginTop": "-0.1648em",
  -    "display": "block",
  -    "height": 0
    },
    "::after": {
      "content": "''",
  +    "marginTop": "-0.1921em",
  +    "display": "table",
  -    "marginBottom": "-0.1921em",
  -    "display": "block",
  -    "height": 0
    }
  }

Patch Changes

• 4719217 #33 Thanks @michaeltaranto! - Internalise rounding function to remove dependencies

[email protected]

Minor Changes

• 943bbc4 #19 Thanks @michaeltaranto! - Add getCapHeight utility and round decimal precision to 4 places

  Add getCapHeight({ fontSize: number, fontMetrics: FontMetrics }): number
  Utility to get the actual rendered cap height for a specific font size given the provided font metrics.

  CSS property precision
  Based on discovering that browser implementations of layout units fall between 1/60th and 1/64th of a pixel, rounding all property values to 4 decimal precision.

  Reference: https://trac.webkit.org/wiki/LayoutUnit
  (also mentions Mozilla - https://trac.webkit.org/wiki/LayoutUnit#Notes)

[email protected]

Patch Changes

• 9508c63 Thanks @michaeltaranto! - Update dependencies & npm keywords

[email protected]

Major Changes

• 0589488 Thanks @michaeltaranto! - Initial release