Skip to content

Commit

Permalink
feat: update build process to allow for platforms
Browse files Browse the repository at this point in the history
  • Loading branch information
@druhill
druhill committed Apr 4, 2024
1 parent 6ac4893 commit 6245579
Showing 1 changed file with 78 additions and 64 deletions.
142 changes: 78 additions & 64 deletions scripts/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -117,137 +118,150 @@ 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')
StyleDictionary.buildPlatform('js')
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`)
})

0 comments on commit 6245579

Please sign in to comment.