diff --git a/src/core/build.ts b/src/core/build.ts index 8aed118..b6323d6 100644 --- a/src/core/build.ts +++ b/src/core/build.ts @@ -1,5 +1,5 @@ import './yaml-interop' -import StyleDictionaryApi from 'style-dictionary' +import StyleDictionaryApi, { Property } from 'style-dictionary' import cssColorFn from 'css-color-function' import { resolve } from 'path' import { readFileSync, writeFileSync } from 'fs-extra' @@ -34,6 +34,28 @@ StyleDictionaryApi.registerTransform({ }, }) +const isTypographyCategory = (prop: Property) => { + const category = prop.attributes.category + return category === 'fontSize' || category === 'lineHeight' +} + +StyleDictionaryApi.registerTransform({ + name: 'yaTypography/rem', + type: 'value', + matcher: isTypographyCategory, + transformer: (prop) => { + const { + value, + } = prop + + if (typeof value === 'number') { + return `${value}rem` + } + + return value + }, +}) + StyleDictionaryApi.registerFilter({ name: 'whitepaper/color', matcher: (prop) => { diff --git a/src/modules.d.ts b/src/modules.d.ts index ef01001..5f9265c 100644 --- a/src/modules.d.ts +++ b/src/modules.d.ts @@ -9,7 +9,8 @@ declare module 'style-dictionary' { export type Property = { value: string | number group: string - name: string + name: string, + attributes: any } export type Platform = {