feat(transforms): improve transforms ; refactor module

Author: Tahul

build.config.ts

@@ -28,6 +28,7 @@ export default defineBuildConfig({
     'unplugin',
     '#design-tokens',
     'browser-style-dictionary',
+    'consola',
     'ufo',
     'jiti',
     'pathe',

package.json

@@ -60,7 +60,7 @@
     "@nuxt/schema": "^3.0.0-rc.8",
     "@nuxt/test-utils": "npm:@nuxt/test-utils-edge@latest",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@nuxtjs/tailwindcss": "npm:@nuxtjs/tailwindcss-edge@latest",
+    "@nuxtjs/tailwindcss": "^5.3.2",
     "browser-style-dictionary": "^3.1.1-browser.1",
     "c8": "^7.12.0",
     "eslint": "^8.22.0",

playground/nuxt.config.ts

@@ -12,9 +12,5 @@ export default defineNuxtConfig({
 
   extends: [resolveThemeDir('./theme')]
 
-  /*
-  designTokens: {
-    server: false
-  }
-  */
+  // modules: ['@nuxtjs/tailwindcss']
 })

playground/pages/index.vue

@@ -9,7 +9,7 @@
     </header>
 
     <section>
-      <Block :variants="['primary']" />
+      <Block :variants="variants" @click="makeRounded" />
       <Block :variants="['black']" />
       <Block :variants="['grape']" />
       <Block :variants="['lila']" />
@@ -27,9 +27,11 @@
 </template>
 
 <script setup lang="ts">
-// const { fetch: fetchTokens } = useTokens()
+const variants = ref(['primary'])
 
-// const { data } = await useAsyncData(fetchTokens)
+const makeRounded = () => {
+  variants.value.push('rounded')
+}
 </script>
 
 <style>

playground/theme/tokens.config.ts

@@ -57,10 +57,7 @@ export default defineTokens({
           backgroundColor: '{colors.lila}'
         },
         velvet: {
-          backgroundColor: '{colors.velvet}',
-          ':hover': {
-            border: '4px solid red'
-          }
+          backgroundColor: '{colors.velvet}'
         },
         grape: {
           backgroundColor: '{colors.grape}'

playground/tokens.config.ts

@@ -6,4 +6,7 @@ import { defineTokens } from '../src'
  */
 
 export default defineTokens({
+  components: {
+
+  }
 })

src/config.ts

@@ -0,0 +1,61 @@
+import { mkdir } from 'fs/promises'
+import { existsSync } from 'fs'
+import { requireModule } from '@nuxt/kit'
+import { resolve } from 'pathe'
+import { defu } from 'defu'
+import { MODULE_DEFAULTS, NuxtLayer } from './utils'
+import type { NuxtDesignTokens } from './index'
+
+export const resolveConfig = (layer: NuxtLayer, key: string, configFile = `${key}.config`) => {
+  const value = layer.config?.designTokens?.[key] || MODULE_DEFAULTS[key]
+  let config = {}
+
+  let filePath: string
+
+  if (typeof value === 'boolean') {
+    filePath = resolve(layer.cwd, configFile)
+  } else if (typeof value === 'string') {
+    filePath = resolve(layer.cwd, value)
+  } else if (typeof value === 'object') {
+    config = value
+  }
+
+  if (filePath) {
+    try {
+      const _file = requireModule(filePath, { clearCache: true })
+      if (_file) { config = _file }
+    } catch (_) {}
+  }
+
+  return { filePath, config }
+}
+
+/**
+ * Resolve `tokens` config layers from `extends` layers and merge them via `defu()`.
+ */
+export const resolveConfigTokens = (layers: NuxtLayer[]) => {
+  const tokensFilePaths: string[] = []
+  let tokens = {} as NuxtDesignTokens
+
+  const splitLayer = (layer: NuxtLayer) => {
+    // Deeply merge tokens
+    // In opposition to defaults, here arrays should also be merged.
+    if (layer.config?.designTokens?.tokens || MODULE_DEFAULTS.tokens) {
+      const { config: layerTokens, filePath: _layerTokensFilePath } = resolveConfig(layer, 'tokens', 'tokens.config')
+
+      if (_layerTokensFilePath) { tokensFilePaths.push(_layerTokensFilePath) }
+
+      tokens = defu(tokens, layerTokens)
+    }
+  }
+
+  for (const layer of layers) { splitLayer(layer) }
+
+  return { tokensFilePaths, tokens }
+}
+
+export const createTokensDir = async (path: string) => {
+  if (!existsSync(path)) {
+    await mkdir(path, { recursive: true })
+  }
+}