Skip to content

Commit

Permalink
moved configs to separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
mimarz committed Jun 6, 2024
1 parent daf0cc6 commit 51ef18b
Show file tree
Hide file tree
Showing 2 changed files with 207 additions and 192 deletions.
197 changes: 5 additions & 192 deletions packages/cli/src/tokens/build.ts
Original file line number Diff line number Diff line change
@@ -1,166 +1,11 @@
import path from 'path';
import fs from 'fs';

import { registerTransforms, permutateThemes } from '@tokens-studio/sd-transforms';
import type { ThemeObject } from '@tokens-studio/types';
import StyleDictionary from 'style-dictionary';
import type { Config, TransformedToken } from 'style-dictionary/types';
import * as R from 'ramda';

import { nameKebab, typographyShorthand, sizeRem } from './transformers.js';
import { groupedTokens } from './formats/groupedTokens.js';
import { scopedReferenceVariables } from './formats/scopedReferenceVariables.js';
import { typographyClasses } from './formats/typographyClasses.js';
import { makeEntryFile } from './actions.js';

void registerTransforms(StyleDictionary);

const prefix = 'ds';
const basePxFontSize = 16;
const separator = '_';

const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];

StyleDictionary.registerTransform(sizeRem);
StyleDictionary.registerTransform(nameKebab);
StyleDictionary.registerTransform(typographyShorthand);

StyleDictionary.registerFormat(groupedTokens);
StyleDictionary.registerFormat(scopedReferenceVariables);
StyleDictionary.registerFormat(typographyClasses);

StyleDictionary.registerAction(makeEntryFile);

StyleDictionary.registerTransformGroup({
name: 'fds/css',
transforms: [
`ts/resolveMath`,
'ts/typography/fontWeight',
nameKebab.name,
sizeRem.name,
typographyShorthand.name,
'ts/color/modifiers',
'ts/color/css/hexrgba',
'ts/size/lineheight',
'ts/size/px',
'ts/shadow/css/shorthand',
],
});

const processThemeName = R.pipe(R.replace(`${separator}semantic`, ''), R.toLower, R.split(separator));

type GetConfig = (options: {
fileName: string;
buildPath: string;
mode?: string;
outPath?: string;
folderName?: string;
}) => Config;

const getCSSConfig: GetConfig = ({
fileName = 'unknown',
buildPath = 'unknown',
mode = 'light',
outPath,
folderName,
}) => {
return {
log: { verbosity: 'verbose' },
preprocessors: ['tokens-studio'],
platforms: {
css: {
// custom
outPath,
fileName,
folderName,
basePxFontSize,
//
prefix,
buildPath: buildPath ?? `${outPath}/${folderName}/`,
transformGroup: 'fds/css',
actions: [makeEntryFile.name],
files: [
{
destination: `${fileName}.css`,
format: scopedReferenceVariables.name,
},
],
options: {
mode,
fileHeader,
includeReferences: (token: TransformedToken) => {
if (
R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) &&
R.includes('semantic/color', token.filePath)
) {
return true;
}

return false;
},
},
},
},
};
};

const getStorefrontConfig = ({ fileName = 'unknown', buildPath = 'unknown' }): Config => {
return {
preprocessors: ['tokens-studio'],
platforms: {
storefront: {
prefix,
basePxFontSize,
transformGroup: 'fds/css',
buildPath,
files: [
{
destination: `${fileName}.ts`,
format: groupedTokens.name,
filter: (token: TransformedToken) => {
if (
R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) ||
R.includes('semantic', token.filePath)
) {
return true;
}

return false;
},
},
],
options: {
fileHeader,
},
},
},
};
};

const getTypographyConfig: GetConfig = ({ buildPath = 'unknown', fileName }) => {
return {
log: { verbosity: 'verbose' },
preprocessors: ['tokens-studio'],
platforms: {
css: {
prefix,
buildPath,
basePxFontSize,
transforms: [nameKebab.name, 'ts/size/lineheight', 'ts/size/px', 'ts/typography/fontWeight'],
files: [
{
destination: `typography.css`,
format: typographyClasses.name,
filter: (token) => token.type === 'typography',
},
],
options: {
fileHeader,
},
},
},
};
};
import { getConfigs, tokensConfig, previewConfig, typographyConfig, permutateThemes } from './configs.js';

type Options = {
/** Design tokens path */
Expand All @@ -173,51 +18,19 @@ type Options = {

const sd = new StyleDictionary();

const getConfigs = (getConfig: GetConfig, outPath: string, tokensDir: string, themes: Record<string, string[]>) =>
Object.entries(themes)
.map(([name, tokensets]) => {
const setsWithPaths = tokensets.map((x) => `${tokensDir}/${x}.json`);

const [fileName, folderName] = processThemeName(name);

const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
const [source, include] = R.partition(R.test(paritionPrimitives), setsWithPaths);

const config_ = getConfig({
fileName: fileName,
outPath,
folderName,
buildPath: `${outPath}/${folderName}/`,
mode: fileName,
});

const config = {
...config_,
source,
include,
};

// console.log(config);

return [name, config];
})
.sort();

export async function run(options: Options): Promise<void> {
const tokensDir = options.tokens;
const storefrontOutDir = path.resolve('../../apps/storefront/tokens');
const tokensOutDir = path.resolve(options.out);

const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), 'utf-8')) as ThemeObject[];

const themes = permutateThemes($themes, {
separator,
}) as Record<string, string[]>;
const themes = permutateThemes($themes);

const tokenConfigs = getConfigs(getCSSConfig, tokensOutDir, tokensDir, themes);
const storefrontConfigs = getConfigs(getStorefrontConfig, storefrontOutDir, tokensDir, themes);
const tokenConfigs = getConfigs(tokensConfig, tokensOutDir, tokensDir, themes);
const storefrontConfigs = getConfigs(previewConfig, storefrontOutDir, tokensDir, themes);
const typographyConfigs = getConfigs(
getTypographyConfig,
typographyConfig,
tokensOutDir,
tokensDir,
R.pickBy((_, key) => R.startsWith('light', R.toLower(key)), themes),
Expand Down
Loading

0 comments on commit 51ef18b

Please sign in to comment.