cleaning up code

digdir · Jun 6, 2024 · 7aaf157 · 7aaf157
1 parent 7e87d7c
commit 7aaf157
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
@@ -5,7 +5,7 @@ import type { ThemeObject } from '@tokens-studio/types';
 import StyleDictionary from 'style-dictionary';
 import * as R from 'ramda';
 
-import { getConfigs, tokensConfig, previewConfig, typographyConfig, permutateThemes } from './configs.js';
+import { getConfigs, cssVariablesConfig, jsTokensConfig, cssTypographyConfig, permutateThemes } from './configs.js';
 
 type Options = {
   /** Design tokens path  */
@@ -27,12 +27,19 @@ export async function run(options: Options): Promise<void> {
 
   const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), 'utf-8')) as ThemeObject[];
 
-  const themes = permutateThemes($themes);
+  const relevantThemes = $themes.filter((theme) => {
+    const group = R.toLower(R.defaultTo('')(theme.group));
+    if (group === 'typography' && theme.name !== 'default') return false;
+    if (group === 'fontsize' && theme.name !== 'default') return false;
 
-  const tokenConfigs = getConfigs(tokensConfig, tokensOutDir, tokensDir, themes);
-  const storefrontConfigs = getConfigs(previewConfig, storefrontOutDir, tokensDir, themes);
+    return true;
+  });
+  const themes = permutateThemes(relevantThemes);
+
+  const variablesConfigs = getConfigs(cssVariablesConfig, tokensOutDir, tokensDir, themes);
+  const storefrontConfigs = getConfigs(jsTokensConfig, storefrontOutDir, tokensDir, themes);
   const typographyConfigs = getConfigs(
-    typographyConfig,
+    cssTypographyConfig,
     tokensOutDir,
     tokensDir,
     R.pickBy((_, key) => R.startsWith('light', R.toLower(key)), themes),
@@ -54,11 +61,11 @@ export async function run(options: Options): Promise<void> {
     console.log('🏁 Finished building Typography classes!');
   }
 
-  if (tokenConfigs.length > 0) {
+  if (variablesConfigs.length > 0) {
     console.log('🍱 Building CSS variables from tokens');
     console.log('➡️  Tokens path: ', tokensDir);
     await Promise.all(
-      tokenConfigs.map(async ([name, config]) => {
+      variablesConfigs.map(async ([name, config]) => {
         console.log(`👷 Processing ${name as string}`);
 
         const tokensPackageSD = await sd.extend(config);

diff --git a/packages/cli/src/tokens/configs.ts b/packages/cli/src/tokens/configs.ts
@@ -7,7 +7,7 @@ import type { ThemeObject } from '@tokens-studio/types';
 import { nameKebab, typographyShorthand, sizeRem } from './transformers.js';
 import { jsTokens } from './formats/js-tokens.js';
 import { cssVariables } from './formats/css-variables.js';
-import { cssClasses } from './formats/css-classes.js';
+import { cssClassesTypography } from './formats/css-classes.js';
 import { makeEntryFile } from './actions.js';
 
 void tokenStudio.registerTransforms(StyleDictionary);
@@ -24,7 +24,7 @@ StyleDictionary.registerTransform(typographyShorthand);
 
 StyleDictionary.registerFormat(jsTokens);
 StyleDictionary.registerFormat(cssVariables);
-StyleDictionary.registerFormat(cssClasses);
+StyleDictionary.registerFormat(cssClassesTypography);
 
 StyleDictionary.registerAction(makeEntryFile);
 
@@ -60,7 +60,7 @@ type GetConfig = (options: {
   outPath?: string;
 }) => Config;
 
-export const tokensConfig: GetConfig = ({ mode = 'light', outPath, theme }) => {
+export const cssVariablesConfig: GetConfig = ({ mode = 'light', outPath, theme }) => {
   const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
 
   return {
@@ -104,7 +104,7 @@ export const tokensConfig: GetConfig = ({ mode = 'light', outPath, theme }) => {
   };
 };
 
-export const previewConfig: GetConfig = ({ mode = 'unknown', outPath, theme }) => {
+export const jsTokensConfig: GetConfig = ({ mode = 'unknown', outPath, theme }) => {
   return {
     preprocessors: ['tokens-studio'],
     platforms: {
@@ -137,21 +137,24 @@ export const previewConfig: GetConfig = ({ mode = 'unknown', outPath, theme }) =
   };
 };
 
-export const typographyConfig: GetConfig = ({ outPath, theme, typography }) => {
+export const cssTypographyConfig: GetConfig = ({ outPath, theme, typography }) => {
+  // const selector = `${typography === 'default' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
+
   return {
     log: { verbosity: 'verbose' },
     preprocessors: ['tokens-studio'],
     platforms: {
       css: {
         prefix,
         typography,
+        // selector,
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
         transforms: [nameKebab.name, 'ts/size/lineheight', 'ts/size/px', 'ts/typography/fontWeight'],
         files: [
           {
-            destination: `typography/${typography}.css`,
-            format: cssClasses.name,
+            destination: `typography.css`,
+            format: cssClassesTypography.name,
             filter: (token) => token.type === 'typography',
           },
         ],

diff --git a/packages/cli/src/tokens/formats/css-classes.ts b/packages/cli/src/tokens/formats/css-classes.ts
@@ -12,11 +12,11 @@ type Typgraphy = {
 /**
  * Creates CSS classes from typography tokens
  */
-export const cssClasses: Format = {
-  name: 'ds/css-classes',
+export const cssClassesTypography: Format = {
+  name: 'ds/css-classes-typography',
   format: async function ({ dictionary, file, options, platform }) {
     const { usesDtcg } = options;
-    const { basePxFontSize } = platform;
+    const { basePxFontSize, selector } = platform;
 
     const header = await fileHeader({ file });
 
@@ -26,9 +26,10 @@ export const cssClasses: Format = {
 
         const baseFontPx = (basePxFontSize as unknown as number) || 16;
         const fontSize = `${parseInt(typography.fontSize) / baseFontPx}rem`;
-        const selector = R.replace('-typography', '', token.name);
+        const classSelector = R.replace('-typography', '', token.name);
 
-        const className = `.${selector} {
+        const className = `
+  .${classSelector} {
     font-size: ${fontSize};
     line-height: ${typography?.lineHeight};
     font-weight: ${typography?.fontWeight};
@@ -38,6 +39,9 @@ export const cssClasses: Format = {
       }
     }, dictionary.allTokens);
 
-    return header + `@layer ds.typography {\n${classNames.join('\n')}\n}\n`;
+    const classes = classNames.join('\n');
+    const content = selector ? `${selector} {\n${classes}\n}` : classes;
+
+    return header + `@layer ds.typography {\n${content}\n}\n`;
   },
 };