separate typography files

digdir · Jun 20, 2024 · fe68911 · fe68911
1 parent 4652513
commit fe68911
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/packages/cli/src/tokens/actions.ts b/packages/cli/src/tokens/actions.ts
@@ -4,6 +4,11 @@ import type { Action } from 'style-dictionary/types';
 import chalk from 'chalk';
 import * as R from 'ramda';
 
+const sortLightmodeFirst = R.sortWith([R.descend(R.includes('light'))]);
+
+/**
+ * Creates a CSS entry file that imports base CSS files for a theme
+ */
 export const makeEntryFile: Action = {
   name: 'make_entryfile',
   do: async function (dictionary, platform) {
@@ -15,10 +20,14 @@ export const makeEntryFile: Action = {
       console.log(chalk.green(`Creating entry file: ${writePath}`));
     }
 
+    const generateImportUrls = R.pipe(
+      sortLightmodeFirst,
+      R.map((file) => `@import url('./${theme}/${file}');`),
+      R.join('\n'),
+    );
+
     const files = await glob(`**/*`, { cwd: platform.buildPath });
-    const content = R.reverse(R.sortBy(R.includes('light'), files))
-      .map((file) => `@import url('./${theme}/${file}');`)
-      .join('\n');
+    const content = generateImportUrls(files);
 
     await fs.writeFile(writePath, content);
   },

diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
@@ -32,30 +32,35 @@ export async function run(options: Options): Promise<void> {
 
   const relevant$themes = $themes.filter((theme) => {
     const group = R.toLower(R.defaultTo('')(theme.group));
-    if (group === 'typography' && theme.name !== 'default') return false;
+    // if (group === 'typography' && theme.name !== 'default') return false;
     if (group === 'size' && theme.name !== 'default') return false;
 
     return true;
   });
 
   const themes = permutateThemes(relevant$themes);
+
   const semanticThemes = R.pickBy<Record<string, string[]>, Record<string, string[]>>(
     (_, key) => R.startsWith('light', R.toLower(key)),
     themes,
   );
 
-  const colorModeConfigs = getConfigs(configs.colorModeVariables, tokensOutDir, tokensDir, themes);
+  const colormodeThemes = R.pickBy<Record<string, string[]>, Record<string, string[]>>(
+    (_, key) => R.endsWith('default', R.toLower(key)),
+    themes,
+  );
+
+  const colorModeConfigs = getConfigs(configs.colorModeVariables, tokensOutDir, tokensDir, colormodeThemes);
   const semanticConfigs = getConfigs(configs.semanticVariables, tokensOutDir, tokensDir, semanticThemes);
-  const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, themes);
+  const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes);
   const typographyConfigs = getConfigs(configs.typographyCSS, tokensOutDir, tokensDir, semanticThemes);
 
   if (typographyConfigs.length > 0) {
     console.log(`\n🍱 Building ${chalk.green('typography')}`);
 
     await Promise.all(
-      typographyConfigs.map(async ({ name, config }) => {
-        const typographyTheme = name.split('-')[0];
-        console.log(`👷 Processing: ${typographyTheme}`);
+      typographyConfigs.map(async ({ theme, typography, config }) => {
+        console.log(`👷 Processing: ${theme} - ${typography}`);
 
         const typographyClasses = await sd.extend(config);
 
@@ -68,9 +73,8 @@ export async function run(options: Options): Promise<void> {
     console.log(`\n🍱 Building ${chalk.green('semantic')}`);
 
     await Promise.all(
-      semanticConfigs.map(async ({ name, config }) => {
-        const typographyTheme = name.split('-')[0];
-        console.log(`👷 Processing: ${typographyTheme}`);
+      semanticConfigs.map(async ({ theme, config }) => {
+        console.log(`👷 Processing: ${theme}`);
 
         const typographyClasses = await sd.extend(config);
 
@@ -83,8 +87,8 @@ export async function run(options: Options): Promise<void> {
     console.log(`\n🍱 Building ${chalk.green('color-mode')}`);
 
     await Promise.all(
-      colorModeConfigs.map(async ({ name, config }) => {
-        console.log(`👷 Processing: ${name}`);
+      colorModeConfigs.map(async ({ theme, mode, config }) => {
+        console.log(`👷 Processing: ${theme} - ${mode}`);
 
         const themeVariablesSD = await sd.extend(config);
 
@@ -97,8 +101,8 @@ export async function run(options: Options): Promise<void> {
     console.log(`\n🍱 Building ${chalk.bgGreen('Storefront')}`);
 
     await Promise.all(
-      storefrontConfigs.map(async ({ name, config }) => {
-        console.log(`👷 Processing: ${name}`);
+      storefrontConfigs.map(async ({ theme, config }) => {
+        console.log(`👷 Processing: ${theme}`);
 
         const storefrontSD = await sd.extend(config);
 

diff --git a/packages/cli/src/tokens/configs.ts b/packages/cli/src/tokens/configs.ts
@@ -210,7 +210,7 @@ export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => {
         transforms: [nameKebab.name, 'ts/size/px', sizeRem.name, 'ts/size/lineheight', 'ts/typography/fontWeight'],
         files: [
           {
-            destination: `typography.css`,
+            destination: `typography/${typography}.css`,
             format: cssClassesTypography.name,
             filter: (token) => {
               return (
@@ -235,7 +235,7 @@ type getConfigs = (
   outPath: string,
   tokensDir: string,
   themes: Record<string, string[]>,
-) => { name: string; config: Config }[];
+) => { mode: string; theme: string; semantic: string; fontSize: string; typography: string; config: Config }[];
 
 export const getConfigs: getConfigs = (getConfig, outPath, tokensDir, themes) =>
   Object.entries(themes)
@@ -261,6 +261,6 @@ export const getConfigs: getConfigs = (getConfig, outPath, tokensDir, themes) =>
         include,
       };
 
-      return { name: `${theme}-${mode}`, config };
+      return { mode, theme, semantic, fontSize, typography, config };
     })
     .sort();
diff --git a/packages/cli/src/tokens/formats/css-classes.ts b/packages/cli/src/tokens/formats/css-classes.ts
@@ -30,7 +30,8 @@ const bemify = R.pipe(
     const withPrefix = R.concat([prefix], R.remove(0, 0, filteredPath));
     const [rest, last] = R.splitAt(-1, withPrefix);
 
-    return `${rest.join('-')}--${R.head(last)}`;
+    const className = `${rest.join('-')}--${R.head(last)}`;
+    return className;
   },
   R.trim,
   R.toLower,
@@ -48,7 +49,7 @@ export const cssClassesTypography: Format = {
   name: 'ds/css-classes-typography',
   format: async function ({ dictionary, file, options, platform }) {
     const { outputReferences } = options;
-    const { selector } = platform;
+    const { selector, typography } = platform;
 
     const header = await fileHeader({ file });
 
@@ -124,6 +125,6 @@ export const cssClassesTypography: Format = {
     const variables_ = `:root {\n${variables}\n}\n`;
     const content = selector ? `${selector} {\n${classes}\n}` : classes;
 
-    return header + `@layer ds.typography {\n${variables_}\n${content}\n}\n`;
+    return header + `@layer ds.base.typography.${typography} {\n${variables_}\n${content}\n}\n`;
   },
 };