From 62455796a13dd49a413be3ddd8072f2ec1e869a5 Mon Sep 17 00:00:00 2001 From: Dru Hill Date: Thu, 4 Apr 2024 12:29:46 +0100 Subject: [PATCH] feat: update build process to allow for platforms --- scripts/build.js | 142 ++++++++++++++++++++++++++--------------------- 1 file changed, 78 insertions(+), 64 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 0b32ccdf..e2db9a32 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -6,44 +6,45 @@ const { readdirSync } = require('fs-extra') const { dictionary, groups } = require('./style-dictionary') const filterComponent = require('./utils/filter-component') -// const platforms = readdirSync('./data/tokens/Platforms/') -const components = readdirSync('./data/tokens/Components/') -const modes = readdirSync('./data/tokens/Modes/') +const platforms = readdirSync('./data/tokens/platforms/') +const components = readdirSync('./data/tokens/components/') +const modes = readdirSync('./data/tokens/modes/') -const getFiles = (modeName, format, subType, suffix) => { +const getFiles = (platformName, modeName, format, subType, suffix) => { + const platform = format.includes('variables') ? '' : platformName const mode = format.includes('variables') ? '' : modeName return [ - ...getSplit('base', modeName, format, subType, suffix, false), - ...getComponents(mode, format, subType, suffix) + ...getSplit('base', platformName, modeName, format, subType, suffix, false), + ...getComponents(platform, mode, format, subType, suffix) ] } -const getComponents = (modeName, format, subType, suffix) => { +const getComponents = (platformName, modeName, format, subType, suffix) => { const componentArray = [] components.forEach((component) => { - componentArray.push(...getSplit(component.split('.')[0], modeName, format, subType, suffix, true)) + componentArray.push(...getSplit(component.split('.')[0], platformName, modeName, format, subType, suffix, true)) }) return componentArray } -const getSplit = (componentName, modeName, format, subType, suffix, outputReferences) => { +const getSplit = (componentName, platformName, modeName, format, subType, suffix, outputReferences) => { const getPath = (componentName) => { const path = { - base: '/base', + base: suffix === 'css' || suffix === 'scss' ? ' ' : '/base', global: '/global' } return path[componentName] || '/components/' + componentName } - const path = getPath(componentName) + const path = getPath(componentName).trim() const selector = outputReferences ? '[class^="sds-mode-"]' : modeName ? `.sds-mode-${modeName}` : undefined return [ { - destination: `${subType}${modeName}${path}/all.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/all.${suffix}`, filter: (token) => filterComponent(token, componentName), format, options: { @@ -52,7 +53,7 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } }, { - destination: `${subType}${modeName}${path}/color.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/color.${suffix}`, filter: (token) => token.type === 'color' && filterComponent(token, componentName), format, options: { @@ -61,7 +62,7 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } }, { - destination: `${subType}${modeName}${path}/borderRadius.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/borderRadius.${suffix}`, filter: (token) => token.type === 'borderRadius' && filterComponent(token, componentName), format, options: { @@ -70,7 +71,7 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } }, { - destination: `${subType}${modeName}${path}/borderWidth.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/borderWidth.${suffix}`, filter: (token) => token.type === 'borderWidth' && filterComponent(token, componentName), format, options: { @@ -79,7 +80,7 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } }, { - destination: `${subType}${modeName}${path}/shadow.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/shadow.${suffix}`, filter: (token) => token.type === 'boxShadow' && filterComponent(token, componentName), format, options: { @@ -88,7 +89,7 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } }, { - destination: `${subType}${modeName}${path}/sizing.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/sizing.${suffix}`, filter: (token) => token.type === 'sizing' && filterComponent(token, componentName), format, options: { @@ -97,7 +98,7 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } }, { - destination: `${subType}${modeName}${path}/spacing.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/spacing.${suffix}`, filter: (token) => token.type === 'spacing' && filterComponent(token, componentName), format, options: { @@ -106,7 +107,7 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } }, { - destination: `${subType}${modeName}${path}/typography.${suffix}`, + destination: `${subType}${platformName}/${modeName}${path}/typography.${suffix}`, filter: (token) => token.type === 'typography' && filterComponent(token, componentName), format, options: { @@ -117,131 +118,125 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere ] } -const getGlobalConfig = () => { +const getGlobalConfig = (platform) => { + const platformName = platform.split('.json')[0] + return { source: [ './data/tokens/origin.json', - './data/tokens/global/*.json' + './data/tokens/global/*.json', + `./data/tokens/platforms/${platform}` ], platforms: { css: { buildPath: 'dist/css/', transforms: groups.css, files: [ - ...getSplit('global', '', 'css/variables', '', 'css', false) + ...getSplit('global', platformName, '', 'css/variables', '', 'css', false) ] }, scss: { buildPath: 'dist/scss/', transforms: groups.scss, files: [ - ...getSplit('global', '', 'scss/variables', '', 'scss', false) + ...getSplit('global', platformName, '', 'scss/variables', '', 'scss', false) ] }, js: { buildPath: 'dist/js/', transforms: groups.js, files: [ - ...getSplit('global', '', 'javascript/module', 'common/', 'js', false), - ...getSplit('global', '', 'typescript/module-declarations', 'common/', 'd.ts', false), - ...getSplit('global', '', 'javascript/es6', 'es6/', 'js', false), - ...getSplit('global', '', 'typescript/es6-declarations', 'es6/', 'd.ts', false), - ...getSplit('global', '', 'javascript/umd', 'umd/', 'js', false), - ...getSplit('global', '', 'json', 'json/', 'json', false) + ...getSplit('global', platformName, '', 'javascript/module', 'common/', 'js', false), + ...getSplit('global', platformName, '', 'typescript/module-declarations', 'common/', 'd.ts', false), + ...getSplit('global', platformName, '', 'javascript/es6', 'es6/', 'js', false), + ...getSplit('global', platformName, '', 'typescript/es6-declarations', 'es6/', 'd.ts', false), + ...getSplit('global', platformName, '', 'javascript/umd', 'umd/', 'js', false), + ...getSplit('global', platformName, '', 'json', 'json/', 'json', false) ] }, android: { buildPath: 'dist/android/', transforms: groups.mobile, files: [ - ...getSplit('global', '', 'android/resources', '', 'xml', false) + ...getSplit('global', platformName, '', 'android/resources', '', 'xml', false) ] }, ios: { buildPath: 'dist/ios/', transforms: groups.mobile, files: [ - ...getSplit('global', '', 'ios/macros', '', 'h', false) + ...getSplit('global', platformName, '', 'ios/macros', '', 'h', false) ] } } } } -(() => { - console.log('\r\n\r\nBuilding global') - - const StyleDictionary = dictionary.extend(getGlobalConfig()) - - StyleDictionary.buildPlatform('css') - StyleDictionary.buildPlatform('scss') - StyleDictionary.buildPlatform('js') - StyleDictionary.buildPlatform('ios') - StyleDictionary.buildPlatform('android') - - console.log('\r\nDone.\r\n') -})() - -const getModeConfig = (mode) => { - const modeName = mode.split('.json')[0] +const getModeConfig = (platform, mode) => { + const platformName = platform.split('.json')[0] + const modeName = `modes/${mode.split('.json')[0]}` return { source: [ './data/tokens/origin.json', './data/tokens/global/*.json', - `./data/tokens/Modes/${mode}`, - './data/tokens/Components/*.json' - // `./data/tokens/Platforms/${platform}/*.json` + `./data/tokens/platforms/${platform}`, + `./data/tokens/modes/${mode}`, + './data/tokens/components/*.json' ], platforms: { css: { buildPath: 'dist/css/', transforms: groups.css, files: [ - ...getFiles(modeName, 'css/variables', '', 'css') + ...getFiles(platformName, modeName, 'css/variables', '', 'css') ] }, scss: { buildPath: 'dist/scss/', transforms: groups.scss, files: [ - ...getFiles(modeName, 'scss/variables', '', 'scss') + ...getFiles(platformName, modeName, 'scss/variables', '', 'scss') ] }, js: { buildPath: 'dist/js/', transforms: groups.js, files: [ - ...getFiles(modeName, 'javascript/module', 'common/', 'js'), - ...getFiles(modeName, 'typescript/module-declarations', 'common/', 'd.ts'), - ...getFiles(modeName, 'javascript/es6', 'es6/', 'js'), - ...getFiles(modeName, 'typescript/es6-declarations', 'es6/', 'd.ts'), - ...getFiles(modeName, 'javascript/umd', 'umd/', 'js'), - ...getFiles(modeName, 'json', 'json/', 'json') + ...getFiles(platformName, modeName, 'javascript/module', 'common/', 'js'), + ...getFiles(platformName, modeName, 'typescript/module-declarations', 'common/', 'd.ts'), + ...getFiles(platformName, modeName, 'javascript/es6', 'es6/', 'js'), + ...getFiles(platformName, modeName, 'typescript/es6-declarations', 'es6/', 'd.ts'), + ...getFiles(platformName, modeName, 'javascript/umd', 'umd/', 'js'), + ...getFiles(platformName, modeName, 'json', 'json/', 'json') ] }, android: { buildPath: 'dist/android/', transforms: groups.mobile, files: [ - ...getFiles(modeName, 'android/resources', '', 'xml') + ...getFiles(platformName, modeName, 'android/resources', '', 'xml') ] }, ios: { buildPath: 'dist/ios/', transforms: groups.mobile, files: [ - ...getFiles(modeName, 'ios/macros', '', 'h') + ...getFiles(platformName, modeName, 'ios/macros', '', 'h') ] } } } } -modes.forEach((mode) => { - console.log(`\r\n\r\nBuilding mode: ${mode}`) +platforms.forEach((platform) => { + const platformName = platform.split('.json')[0] + + console.log(`\r\nStart building platform: ${platformName}\r\n`) + + console.log('\r\nStart building global\r\n') - const StyleDictionary = dictionary.extend(getModeConfig(mode)) + const StyleDictionary = dictionary.extend(getGlobalConfig(platform)) StyleDictionary.buildPlatform('css') StyleDictionary.buildPlatform('scss') @@ -249,5 +244,24 @@ modes.forEach((mode) => { StyleDictionary.buildPlatform('ios') StyleDictionary.buildPlatform('android') - console.log('\r\nDone.\r\n') + console.log('\r\nDone building global\r\n') + + modes.forEach((mode) => { + const modeName = mode.split('.json')[0] + + console.log(`\r\nStart building mode: ${modeName}\r\n`) + + const StyleDictionary = dictionary.extend(getModeConfig(platform, mode)) + + StyleDictionary.buildPlatform('css') + StyleDictionary.buildPlatform('scss') + StyleDictionary.buildPlatform('js') + StyleDictionary.buildPlatform('ios') + StyleDictionary.buildPlatform('android') + + console.log(`\r\nDone building mode: ${modeName}\r\n`) + }) + + console.log(`\r\nDone building platform: ${platformName}\r\n`) }) +