@capsizecss/vanilla-extract

@capsizecss/vanilla-extract

Integration package for vanilla-extract.

npm install @capsizecss/vanilla-extract

• Usage
  • Themed typography
  • Responsive typography
  • Debug identifiers

Usage

1. Import createTextStyle within your vanilla-extract stylesheet, passing the relevant options.

// Text.css.ts
import { createTextStyle } from '@capsizecss/vanilla-extract';

export const text = createTextStyle({
  fontSize: 16,
  leading: 24,
  fontMetrics: {
    capHeight: 700,
    ascent: 1058,
    descent: -291,
    lineGap: 0,
    unitsPerEm: 1000,
  },
});

1. Import that class from your stylesheet and apply to the text element

// Text.ts
import * as styles from './Text.css';

document.write(`
  <div class="${styles.text}">
    My capsized text 🛶
  </div>
`);

Themed typography

When using a vanilla-extract theme to manage your typography, you need to precompute and store the values at a theme level.

Import precomputeValues passing the relevant options and assign to your vanilla-extract theme. These precomputed values can then be directly passed to createTextStyles as below:

// Text.css.ts
import { createTheme } from '@vanilla-extract/css';
import { createTextStyle, precomputeValues } from '@capsizecss/vanilla-extract';

const [themeClass, vars] = createTheme({
  bodyText: precomputeValues({
    fontSize: 18,
    leading: 24,
    fontMetrics: {
      capHeight: 700,
      ascent: 1058,
      descent: -291,
      lineGap: 0,
      unitsPerEm: 1000,
    },
  }),
});

export const text = createTextStyle(vars.bodyText);

Responsive typography

As a convenience for responsive styles, createTextStyle accepts a second argument in the form of a vanilla-extract media query object, returning the full responsive class list.

// Text.css.ts
import { createTextStyle } from '@capsizecss/vanilla-extract';

const fontMetrics = {
  capHeight: 700,
  ascent: 1058,
  descent: -291,
  lineGap: 0,
  unitsPerEm: 1000,
};

const textDefinitions = {
  mobile: { fontSize: 18, leading: 24, fontMetrics },
  tablet: { fontSize: 16, leading: 22, fontMetrics },
  desktop: { fontSize: 14, leading: 18, fontMetrics },
};

export const text = createTextStyle(textDefinitions.mobile, {
  '@media': {
    'screen and (min-width: 768px)': textDefinitions.tablet,
    'screen and (min-width: 1024px)': textDefinitions.desktop,
  },
});

Or in the themed case:

// Text.css.ts
import { createTheme } from '@vanilla-extract/css';
import { createTextStyle, precomputeValues } from '@capsizecss/vanilla-extract';

const fontMetrics = {
  capHeight: 700,
  ascent: 1058,
  descent: -291,
  lineGap: 0,
  unitsPerEm: 1000,
};

const [themeClass, vars] = createTheme({
  bodyText: {
    mobile: precomputeValues({ fontSize: 18, leading: 24, fontMetrics }),
    tablet: precomputeValues({ fontSize: 16, leading: 22, fontMetrics }),
    desktop: precomputeValues({ fontSize: 14, leading: 18, fontMetrics }),
  },
});

export const text = createTextStyle(vars.bodyText.mobile, {
  '@media': {
    'screen and (min-width: 768px)': vars.bodyText.tablet,
    'screen and (min-width: 1024px)': vars.bodyText.desktop,
  },
});

Debug identifiers

To improve the developer experience, createTextStyle accepts a debug identifier as the last argument.

export const text = createTextStyle({ ... }, 'myCapsizedRule');

This produces a class name something like .Text_myCapsizedRule__1bese54h.

License

MIT.