token json を結合して color や数値をとれるトークンオブジェクトを作成する

eslint.config.mjs

@@ -132,13 +132,13 @@ const config = [
   },
   {
     files: [
-      '**/*.test.ts',
-      '**/*.test.tsx',
+      '**/*.test.{ts,tsx}',
       '**/__tests__/**',
       '**/*.config.*',
       '*.config.*',
       '**/*.story.*',
       '.storybook/**',
+      '**/*.bench.{ts,tsx}',
     ],
     languageOptions: {
       globals: {

package.json

@@ -70,7 +70,7 @@
     "@types/eslint__js": "^8.42.3",
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/jest-specific-snapshot": "^0.5.9",
-    "@types/node": "^17.0.13",
+    "@types/node": "^18.19.59",
     "@types/prettier": "^2.4.3",
     "@types/styled-components": "^5.1.21",
     "@types/webpack": "^5.28.0",

packages/theme/cli/token-object.ts

@@ -0,0 +1,128 @@
+/* eslint-disable no-console */
+import { readFileSync, mkdirSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
+import { createCSSTokenObject, createTokenObject } from '../src/token-object'
+import type { TokenDictionary } from '../src/token-object/types'
+import { camelCaseKeys } from '../src/token-object'
+
+type ValueStyle = 'cssVariable'
+type KeyStyle = 'camelCase'
+
+type Config = {
+  tokenFile: string
+  baseFile: string
+  outputFile: string
+  keyStyle?: KeyStyle
+  valueStyle?: ValueStyle
+}
+
+const configurations: Config[] = [
+  {
+    tokenFile: './src/json/pixiv-light.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/pixiv-light.json',
+    keyStyle: undefined,
+    valueStyle: undefined,
+  },
+  {
+    tokenFile: './src/json/pixiv-dark.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/pixiv-dark.json',
+    keyStyle: undefined,
+    valueStyle: undefined,
+  },
+
+  {
+    tokenFile: './src/json/pixiv-light.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/camel/pixiv-light.json',
+    keyStyle: 'camelCase',
+    valueStyle: undefined,
+  },
+  {
+    tokenFile: './src/json/pixiv-dark.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/camel/pixiv-dark.json',
+    keyStyle: 'camelCase',
+    valueStyle: undefined,
+  },
+
+  {
+    tokenFile: './src/json/pixiv-light.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/css-variables/pixiv-light.json',
+    keyStyle: undefined,
+    valueStyle: 'cssVariable',
+  },
+  {
+    tokenFile: './src/json/pixiv-dark.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/css-variables/pixiv-dark.json',
+    keyStyle: undefined,
+    valueStyle: 'cssVariable',
+  },
+
+  {
+    tokenFile: './src/json/pixiv-light.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/css-variables/camel/pixiv-light.json',
+    keyStyle: 'camelCase',
+    valueStyle: 'cssVariable',
+  },
+  {
+    tokenFile: './src/json/pixiv-dark.json',
+    baseFile: './src/json/base.json',
+    outputFile: './dist/tokens/css-variables/camel/pixiv-dark.json',
+    keyStyle: 'camelCase',
+    valueStyle: 'cssVariable',
+  },
+]
+
+for (const {
+  tokenFile,
+  baseFile,
+  outputFile,
+  keyStyle,
+  valueStyle,
+} of configurations) {
+  const baseJson = JSON.parse(
+    readFileSync(path.resolve(baseFile), 'utf8')
+  ) as TokenDictionary
+
+  const createToken = <T extends TokenDictionary>(
+    value: T
+  ): Record<string, unknown> => {
+    switch (valueStyle) {
+      case 'cssVariable': {
+        return createCSSTokenObject(value, (x) => `charcoal-${x}`)
+      }
+      default: {
+        return createTokenObject(value, baseJson)
+      }
+    }
+  }
+  const transformKey = <T extends Record<string, unknown>>(
+    value: T
+  ): Record<string, unknown> => {
+    switch (keyStyle) {
+      case 'camelCase': {
+        return camelCaseKeys(value)
+      }
+      default: {
+        return value
+      }
+    }
+  }
+
+  const tokenJson = JSON.parse(
+    readFileSync(path.resolve(tokenFile), 'utf8')
+  ) as TokenDictionary
+  const tokenObject = transformKey(createToken(tokenJson))
+
+  mkdirSync(path.dirname(outputFile), { recursive: true })
+  writeFileSync(path.resolve(outputFile), JSON.stringify(tokenObject, null, 2))
+
+  console.log(
+    `Generated ${outputFile} with keyStyle ${keyStyle} and valueStyle ${valueStyle}.`
+  )
+}

packages/theme/package.json

@@ -4,39 +4,69 @@
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "require": "./dist/index.cjs.js",
-    "import": "./dist/index.esm.js",
-    "default": "./dist/index.esm.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./token-object": {
+      "types": "./dist/token-object/index.d.ts",
+      "require": "./dist/token-object/index.cjs.js",
+      "import": "./dist/token-object/index.esm.js",
+      "default": "./dist/token-object/index.esm.js"
+    },
+    "./css/*": "./dist/css/*",
+    "./tokens/*": "./dist/tokens/*"
+  },
+  "typesVersions": {
+    "*": {
+      "token-object": [
+        "./dist/token-object/index.d.ts"
+      ],
+      "tokens/*": [
+        "./dist/tokens/*"
+      ],
+      "css/*": [
+        "./dist/css/*"
+      ]
+    }
   },
-  "types": "./dist/index.d.ts",
   "sideEffects": [
     "*.css"
   ],
   "scripts": {
-    "build": "npm-run-all --print-label --parallel 'build:*' --sequential serialize",
+    "build": "npm-run-all --print-label -s 'build:*' --sequential serialize",
     "build:bundle": "FORCE_COLOR=1 tsup",
     "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
-    "build:copy-css": "cpx 'src/css/**/*.css' dist/css && cpx 'src/json/**/*.json' dist/json",
+    "build:copy-css": "cpx --clean 'src/css/**/*.{css,d.ts}' dist/css",
+    "build:token-object": "tsx cli/token-object.ts",
     "serialize": "node cli/index.js",
     "typecheck": "run-p --print-label 'typecheck:*'",
     "typecheck:main": "tsc --project tsconfig.build.json --pretty --noEmit",
     "typecheck:cli": "tsc --project cli/tsconfig.build.json --noEmit",
     "clean": "rimraf dist .tsbuildinfo",
-    "test": "vitest run --passWithNoTests"
+    "test": "vitest run --passWithNoTests",
+    "bench": "vitest bench --passWithNoTests"
   },
   "devDependencies": {
+    "@types/css": "^0.0.38",
     "cpx": "^1.5.0",
+    "css": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "tsup": "^6.5.0",
+    "tsx": "^4.19.1",
     "typescript": "^4.9.5",
     "vitest": "^2.0.2"
   },
   "dependencies": {
     "@charcoal-ui/foundation": "^4.0.0-beta.15",
     "@charcoal-ui/utils": "^4.0.0-beta.15",
+    "change-case-all": "^2.1.0",
+    "deepmerge": "^4.3.1",
     "polished": "^4.1.4"
   },
   "files": [

packages/theme/src/css/_variables_dark.css.d.ts

@@ -0,0 +1 @@
+declare module "*.css" { }

packages/theme/src/css/_variables_light.css.d.ts

@@ -0,0 +1 @@
+declare module "*.css" { }