@tpzdsp/eslint-config-dsp/tailwindcss/typography.js

re-usable config for ESLint, Prettier and semantic-release

import plugin from 'tailwindcss/plugin';

// https://github.com/alphagov/govuk-frontend/blob/9d9d3d293ad131e24a7ab1ef42a1d10aca5a6b51/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss#L174
/** @type Record<string, Record<string, [number, number]>> */
export const FONT_SIZES = {
  '5xl': { sm: [80, 1], base: [53, 1.04] }, // [font size (px), line height]
  '4xl': { sm: [48, 1.04], base: [32, 1.09] },
  '3xl': { sm: [36, 1.11], base: [27, 1.11] },
  '2xl': { sm: [27, 1.11], base: [21, 1.19] },
  xl: { sm: [24, 1.25], base: [21, 1.19] },
  lg: { sm: [19, 1.32], base: [19, 1.32] },
  base: { sm: [16, 1.25], base: [16, 1.25] },
};

// creates an object containing key value pairs that are the names
// of the font sizes, e.g. { "lg": "lg" }
const TEXT_VALUES = Object.keys(FONT_SIZES).reduce((obj, key) => {
  obj[key] = key;
  return obj;
}, {});

// this a plugin that will match against any `text-...` classes
// and define the respective responsive version of that font size
export const RESPONSIVE_TEXT_PLUGIN = plugin(({ matchUtilities }) => {
  matchUtilities(
    {
      text: (value) => {
        if (!FONT_SIZES[value]) {
          return {};
        }

        const { base, ...screens } = FONT_SIZES[value];

        return {
          fontSize: `${base[0] / 16}rem`, // divide by 16 to turn to rem
          lineHeight: base[1],
          ...Object.keys(screens).map((screen) => ({
            [`@screen ${screen}`]: {
              fontSize: `${screens[screen][0] / 16}rem`,
              lineHeight: screens[screen][1],
            },
          })),
        };
      },
    },
    { values: TEXT_VALUES },
  );
});