feat(rules): add typography rules (#99)

package.json

@@ -13,6 +13,7 @@
     "#plugin": "./src/plugin.js",
     "#utils": "./src/_utils/index.js",
     "#rules": "./src/_rules/index.js",
+    "#shortcuts": "./src/_shortcuts/index.js",
     "#theme": "./src/theme.js",
     "#variants": "./src/_variants/index.js",
     "#preflights": "./src/_preflights/index.js",

src/_preflights/index.js

@@ -1,5 +1,6 @@
 import { twReset } from './tw-reset.js';
 import { formPreflight } from './forms/export.js';
 import { transformBase } from './transform.js';
+import { typographyBase } from './typography.js';
 
-export const preflights = [twReset, transformBase, formPreflight];
+export const preflights = [twReset, transformBase, formPreflight, typographyBase];

src/_preflights/typography.js

@@ -0,0 +1,58 @@
+import { entriesToCss } from '@unocss/core';
+
+const fontSizeBaseValues = {
+  '--w-font-size-xs': "1.2rem",
+  '--w-font-size-s': "1.4rem",
+  '--w-font-size-m': "1.6rem",
+  '--w-font-size-ml': "2rem",
+  '--w-font-size-l': "2.2rem",
+  '--w-font-size-xl': "2.8rem",
+  '--w-font-size-xxl': "3.4rem",
+  '--w-font-size-xxxl': "4.8rem",
+};
+
+const lineHeightBaseValues = {
+  '--w-line-height-xs': "1.6rem",
+  '--w-line-height-s': "1.8rem",
+  '--w-line-height-m': "2.2rem",
+  '--w-line-height-ml': "2.6rem",
+  '--w-line-height-l': "2.8rem",
+  '--w-line-height-xl': "3.4rem",
+  '--w-line-height-xxl': "4.1rem",
+  '--w-line-height-xxxl': "5.6rem",
+};
+
+const headingsReset = `
+  h1  {
+    font-size: var(--w-font-size-xxl);
+    line-height:var(--w-line-height-xxl);
+  }
+
+  h2  {
+    font-size:var(--w-font-size-xl);
+    line-height:var(--w-line-height-xl);
+  }
+
+  h3  {
+    font-size:var(--w-font-size-l);
+    line-height:var(--w-line-height-l);
+  }
+
+  h4  {
+    font-size:var(--w-font-size-m);
+    line-height:var(--w-line-height-m);
+  }
+
+  h5  {
+    font-size:var(--w-font-size-s);
+    line-height:var(--w-line-height-s);
+  }
+`;
+
+export const typographyBase = {
+  layer: 'preflights',
+  getCSS() {
+    const css = entriesToCss(Object.entries({ ...fontSizeBaseValues, ...lineHeightBaseValues }));
+    return `${css}${headingsReset}`;
+  },
+};

src/_rules/index.js

@@ -20,6 +20,7 @@ import * as shadow from "./shadow.js";
 import * as size from "./size.js";
 import * as spaceMargin from './space-margin.js';
 import * as spacing from "./spacing.js";
+import * as typography from "./typography.js";
 import * as staticRules from "./static.js";
 import * as transform from "./transform.js";
 import * as transition from "./transition.js";
@@ -52,6 +53,7 @@ const ruleGroups = {
   ...staticRules,
   ...transform,
   ...transition,
+  ...typography,
 };
 
 export const rules = [
@@ -84,3 +86,4 @@ export * from "./static.js";
 export * from "./table.js";
 export * from "./transform.js";
 export * from "./transition.js";
+export * from "./typography.js";

src/_rules/typography.js

@@ -0,0 +1,12 @@
+import { textMap, lineHeightMap } from '#utils';
+
+export const typography = [
+  [/^text-(12|14|16|20|22|28|34|48)$/, ([, d]) => ({ 'font-size': `var(--w-font-size-${textMap[d]})`, 'line-height': `var(--w-line-height-${textMap[d]})` })],
+  [/^text-(xs|s|m|ml|l|xl|xxl|xxxl)$/, ([, size]) =>
+    ({ 'font-size': `var(--w-font-size-${size})`, 'line-height': `var(--w-line-height-${size})` }),
+  ],
+  [/^leading-(16|18|22|26|28|34|41|56)$/, ([, d]) => ({ 'line-height': `var(--w-line-height-${lineHeightMap[d]})` })],
+  [/^leading-(xs|s|m|ml|l|xl|xxl|xxxl)$/, ([, size]) =>
+    ({ 'line-height': `var(--w-line-height-${size})` }),
+  ],
+];

src/_shortcuts/index.js

@@ -0,0 +1,3 @@
+import { typographyAliases } from './typography.js';
+
+export const shortcuts = [typographyAliases];

src/_shortcuts/typography.js

@@ -0,0 +1,18 @@
+export const typographyAliases = {
+  t1: 'text-xxl',
+  t2: 'text-xl',
+  t3: 'text-l',
+  t4: 'text-m',
+  t5: 'text-s',
+  t6: 'text-xs',
+  h5: 'text-s',
+  h4: 'text-m',
+  h3: 'text-l',
+  h2: 'text-xl',
+  h1: 'text-xxl',
+  'text-display': 'text-xxxl',
+  'text-preamble': 'text-ml',
+  'text-body': 'text-m',
+  'text-caption': 'text-s',
+  'text-detail': 'text-xs',
+};

src/_utils/mappings.js

@@ -95,3 +95,25 @@ export const globalKeywords = [
   'revert-layer',
   'unset',
 ];
+
+// for backward compatible typography classes like text-12 or leading-16
+export const textMap = {
+  12: 'xs',
+  14: 's',
+  16: 'm',
+  20: 'ml',
+  22: 'l',
+  28: 'xl',
+  34: 'xxl',
+  48: 'xxxl',
+};
+export const lineHeightMap = {
+  16: 'xs',
+  18: 's',
+  22: 'm',
+  26: 'ml',
+  28: 'l',
+  34: 'xl',
+  41: 'xxl',
+  56: 'xxxl',
+};

src/internals.js

@@ -1,4 +1,5 @@
 export { useTheme } from '#theme';
 export { rules } from '#rules';
 export { variants } from '#variants';
+export { shortcuts } from '#shortcuts';
 

src/plugin.js

@@ -1,5 +1,6 @@
 import { preflights } from '#preflights';
 import { rules } from '#rules';
+import { shortcuts } from '#shortcuts';
 import { variants } from '#variants';
 import { useTheme } from '#theme';
 import { postprocess } from '#postprocess';
@@ -27,6 +28,7 @@ export function presetWarp (options = {}) {
     variants,
     preflights: hasPreflight ? preflights : [],
     postprocess: postprocess(externalizeClasses, externalClasses),
+    shortcuts,
   };
 }
 

test/__snapshots__/typography.js.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`shortcuts 1`] = `
+"/* layer: shortcuts */
+.h1,
+.t1{font-size:var(--w-font-size-xxl);line-height:var(--w-line-height-xxl);}
+.h2,
+.t2{font-size:var(--w-font-size-xl);line-height:var(--w-line-height-xl);}
+.h3,
+.t3{font-size:var(--w-font-size-l);line-height:var(--w-line-height-l);}
+.h4,
+.t4,
+.text-body{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m);}
+.h5,
+.t5,
+.text-caption{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s);}
+.t6,
+.text-detail{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
+.text-display{font-size:var(--w-font-size-xxxl);line-height:var(--w-line-height-xxxl);}
+.text-preamble{font-size:var(--w-font-size-ml);line-height:var(--w-line-height-ml);}"
+`;
+
+exports[`typography - leading classes  1`] = `
+"/* layer: default */
+.leading-16,
+.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-18,
+.leading-s{line-height:var(--w-line-height-s);}
+.leading-22,
+.leading-m{line-height:var(--w-line-height-m);}
+.leading-26,
+.leading-ml{line-height:var(--w-line-height-ml);}
+.leading-28,
+.leading-l{line-height:var(--w-line-height-l);}
+.leading-34,
+.leading-xl{line-height:var(--w-line-height-xl);}
+.leading-41,
+.leading-xxl{line-height:var(--w-line-height-xxl);}
+.leading-56,
+.leading-xxxl{line-height:var(--w-line-height-xxxl);}"
+`;
+
+exports[`typography - text classes  1`] = `
+"/* layer: default */
+.text-12,
+.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
+.text-14,
+.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s);}
+.text-16,
+.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m);}
+.text-20,
+.text-ml{font-size:var(--w-font-size-ml);line-height:var(--w-line-height-ml);}
+.text-22,
+.text-l{font-size:var(--w-font-size-l);line-height:var(--w-line-height-l);}
+.text-28,
+.text-xl{font-size:var(--w-font-size-xl);line-height:var(--w-line-height-xl);}
+.text-34,
+.text-xxl{font-size:var(--w-font-size-xxl);line-height:var(--w-line-height-xxl);}
+.text-48,
+.text-xxxl{font-size:var(--w-font-size-xxxl);line-height:var(--w-line-height-xxxl);}"
+`;

test/size.js

@@ -26,7 +26,7 @@ describe('width and height', () => {
     expect(css).toMatchSnapshot();
   });
   test(`height without dash shouldn't match`, async ({ uno }) => {
-    const { css } = await uno.generate(['h2', 'h32']);
+    const { css } = await uno.generate(['h32']);
     expect(css).toMatchInlineSnapshot('""');
   });
 });

test/typography.js

@@ -0,0 +1,24 @@
+import { expect, test } from 'vitest';
+import { setup } from './_helpers.js';
+import { textMap, lineHeightMap } from '#utils';
+import { typographyAliases } from '../src/_shortcuts/typography.js';
+
+setup();
+
+test('typography - text classes ', async ({ uno }) => {
+  const classes = Object.entries(textMap).map(([number, size]) => ([`text-${number}`, `text-${size}`])).flat(1);
+  const { css } = await uno.generate(classes);
+  expect(css).toMatchSnapshot();
+});
+
+test('typography - leading classes ', async ({ uno }) => {
+  const classes = Object.entries(lineHeightMap).map(([number, size]) => ([`leading-${number}`, `leading-${size}`])).flat(1);
+  const { css } = await uno.generate(classes);
+  expect(css).toMatchSnapshot();
+});
+
+test('shortcuts', async ({ uno }) => {
+  const classes = Object.keys(typographyAliases);
+  const { css } = await uno.generate(classes);
+  expect(css).toMatchSnapshot();
+});