feat: impl formats with templates

src/core/formats.ts

@@ -0,0 +1,61 @@
+import { cssTemplate, esmTemplate } from './templates'
+
+function getFileNameWithPlatform(fileName: string, platform: string, extension: string): string {
+  if (platform === 'common') {
+    return `${fileName}.${extension}`
+  }
+  return `${fileName}@${platform}.${extension}`
+}
+
+type Formats = {
+  // TODO: Fix any types.
+  [key: string]: (platforms: any, options?: any) =>
+    Array<{ fileName: string; content: string }>
+}
+
+export const formats: Formats = {
+  'css.flat': (platforms, options) => {
+    const result = []
+    for (const platform in platforms) {
+      const layers = platforms[platform]
+      const composedTokens = []
+      for (const layer in layers) {
+        composedTokens.push(...layers[layer].tokens)
+      }
+      result.push({
+        fileName: getFileNameWithPlatform(options.fileName, platform, 'css'),
+        content: cssTemplate(composedTokens, ':root'),
+      })
+    }
+    return result
+  },
+  'css.whitepaper': (platforms) => {
+    const result = []
+    for (const platform in platforms) {
+      const layers = platforms[platform]
+      for (const layer in layers) {
+        const { name, meta, tokens } = layers[layer]
+        result.push({
+          fileName: getFileNameWithPlatform(name, platform, 'css'),
+          content: cssTemplate(tokens, meta.css),
+        })
+      }
+    }
+    return result
+  },
+  'js.esm': (platforms, options) => {
+    const result = []
+    for (const platform in platforms) {
+      const layers = platforms[platform]
+      const composedTokens = []
+      for (const layer in layers) {
+        composedTokens.push(...layers[layer].tokens)
+      }
+      result.push({
+        fileName: getFileNameWithPlatform(options.fileName, platform, 'js'),
+        content: esmTemplate(composedTokens),
+      })
+    }
+    return result
+  },
+}

src/core/templates.ts

@@ -0,0 +1,35 @@
+import { FlattenToken } from './token.h'
+
+/**
+ * Returns css with tokens.
+ *
+ * @param tokens Tokens list.
+ * @param selector Selector name.
+ */
+export function cssTemplate(tokens: FlattenToken[], selector: string): string {
+  let result = `${selector} {\n`
+  for (const token of tokens) {
+    if (token.comment !== undefined) {
+      result += `    /* ${token.comment} */\n`
+    }
+    result += `    --${token.name}: ${token.value};\n`
+  }
+  result += '}\n'
+  return result
+}
+
+/**
+ * Returns js module with tokens.
+ *
+ * @param tokens Tokens list.
+ */
+export function esmTemplate(tokens: FlattenToken[]): string {
+  let result = ''
+  for (const token of tokens) {
+    if (token.comment !== undefined) {
+      result += `// ${token.comment}\n`
+    }
+    result += `export const ${token.name} = '${token.value};'\n`
+  }
+  return result
+}

src/core/token.h.ts

@@ -0,0 +1,15 @@
+export type Shape<T> = { [key: string]: T }
+
+export type Token = {
+  value: string | number
+  type: 'color' | 'size'
+  comment?: string
+}
+
+export type FlattenToken = Token & {
+  name: string
+}
+
+export type TokensMap = {
+  [key: string]: Token | TokensMap
+}