feat: impl multiply platforms for one theme

bem · Jun 7, 2020 · 66140e5 · 66140e5
1 parent faf5857
commit 66140e5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/src/core-v2/build.ts b/src/core-v2/build.ts
@@ -58,20 +58,23 @@ export async function build(config: any): Promise<any> {
   for (const themeConfig of normalizedConfig) {
     for (const entryKey in themeConfig.entry) {
       const theme = await loadTheme(themeConfig.entry[entryKey])
-      // TODO: Load sources in themes?
-      const sources = await loadSources(theme.sources, theme.platform)
-      // TODO: Load mappers in themes?
-      store.set('mapper', await loadMappers(theme.mappers))
-      for (const _themeFileConfig of themeConfig.output.files) {
-        store.set('whitepaper', theme.whitepaper)
-        const styleDictionaryConfig = createStyleDictionaryConfig({
-          source: sources,
-          theme: entryKey,
-          outDir: themeConfig.output.path,
-        })
-        const StyleDictionary = StyleDictionaryApi.extend(styleDictionaryConfig)
-        StyleDictionary.properties = dedupeProps(StyleDictionary.properties)
-        StyleDictionary.buildPlatform('css')
+      for (const platform of theme.platforms) {
+        // TODO: Load sources in themes?
+        const sources = await loadSources(theme.sources, platform)
+        // TODO: Load mappers in themes?
+        store.set('mapper', await loadMappers(theme.mappers))
+        for (const _themeFileConfig of themeConfig.output.files) {
+          store.set('whitepaper', theme.whitepaper)
+          const styleDictionaryConfig = createStyleDictionaryConfig({
+            platform: platform,
+            source: sources,
+            theme: entryKey,
+            outDir: themeConfig.output.path,
+          })
+          const StyleDictionary = StyleDictionaryApi.extend(styleDictionaryConfig)
+          StyleDictionary.properties = dedupeProps(StyleDictionary.properties)
+          StyleDictionary.buildPlatform('css')
+        }
       }
     }
   }

diff --git a/src/core-v2/load-theme.ts b/src/core-v2/load-theme.ts
@@ -9,12 +9,12 @@ type Theme = {
   mappers: string[]
   sources: string[]
   whitepaper: {}
-  platform: Platforms
+  platforms: Platforms[]
   extends?: string
 }
 
 export async function loadTheme(sources: string, cwd: string = process.cwd()): Promise<Theme> {
-  let result: Theme = { mappers: [], sources: [], whitepaper: {}, platform: 'common' }
+  let result: Theme = { mappers: [], sources: [], whitepaper: {}, platforms: ['common'] }
   const theme: Theme = await readJSON(sources)
 
   if (theme.extends !== undefined) {
@@ -33,8 +33,8 @@ export async function loadTheme(sources: string, cwd: string = process.cwd()): P
     }
   }
 
-  if (theme.platform !== undefined) {
-    result.platform = theme.platform
+  if (theme.platforms !== undefined) {
+    result.platforms = theme.platforms
   }
 
   if (theme.mappers !== undefined) {

diff --git a/src/core-v2/style-dictionary-config.ts b/src/core-v2/style-dictionary-config.ts
@@ -1,8 +1,7 @@
-import { getFolderWithPlatform } from './utils'
-
 const whitepaper = ['space', 'size', 'capacity', 'cosmetic', 'color']
 
-export function createStyleDictionaryConfig({ source, theme, outDir }: any): any {
+export function createStyleDictionaryConfig({ source, theme, outDir, platform }: any): any {
+  const themeFolder = platform === 'common' ? theme : `${theme}/${platform}`
   return {
     include: source,
     platforms: {
@@ -11,7 +10,7 @@ export function createStyleDictionaryConfig({ source, theme, outDir }: any): any
         transforms: ['attribute/cti', 'time/seconds', 'color/css', 'name/cti/kebab', 'name/mapper'],
         actions: ['process-color'],
         files: whitepaper.map((file: any) => ({
-          destination: `${getFolderWithPlatform(theme)}/${file}.css`,
+          destination: `${themeFolder}/${file}.css`,
           format: 'css/whitepaper',
           filter: (token: any) => token.group === file,
         })),

diff --git a/src/core-v2/utils.ts b/src/core-v2/utils.ts
@@ -1,13 +1,5 @@
 import { Platforms } from '../core/platforms'
 
-export function getFolderWithPlatform(fileName: string): string {
-  const [name, platform] = fileName.split('@')
-  if (platform === undefined) {
-    return name
-  }
-  return `${name}/${platform}`
-}
-
 export function getPlatformFromFilePath(filePath: string): Platforms {
   const matched = filePath.match(/@([\w|-]+)+\./)
   return matched === null ? 'common' : (matched[1] as Platforms)