fix(build): fix build in all situations

Author: Tahul

src/generate.ts

@@ -1,8 +1,9 @@
 import { existsSync } from 'fs'
-import { rm, writeFile } from 'fs/promises'
+import { unlink, writeFile } from 'fs/promises'
 import type { Core as Instance } from 'browser-style-dictionary/types/browser'
 import StyleDictionary from 'browser-style-dictionary/browser.js'
 import { tsTypesDeclaration, tsFull, jsFull } from './formats'
+import { createTokensDir } from './utils'
 import type { NuxtDesignTokens } from './index'
 
 export const stubTokens = async (buildPath: string, force = false) => {
@@ -18,7 +19,7 @@ export const stubTokens = async (buildPath: string, force = false) => {
   for (const [file, stubbingFunction] of Object.entries(files)) {
     const path = `${buildPath}${file}`
 
-    if (force && existsSync(path)) { await rm(path) }
+    if (force && existsSync(path)) { await unlink(path) }
 
     if (!existsSync(path)) { await writeFile(path, stubbingFunction ? stubbingFunction({ tokens: {} }) : '') }
   }
@@ -29,6 +30,10 @@ export const generateTokens = async (
   buildPath: string,
   silent = true
 ) => {
+  // Check for tokens directory existence; it might get cleaned-up from `.nuxt`
+  if (!existsSync(buildPath)) { await createTokensDir(buildPath) }
+
+  // Stub tokens if no tokens provided
   if (!tokens || !Object.keys(tokens).length) {
     await stubTokens(buildPath, true)
     return

src/module.ts

@@ -35,15 +35,26 @@ export default defineNuxtModule<ModuleOptions>({
 
     const privateConfig = nuxt.options.runtimeConfig.designTokens
 
-    // `.nuxt/theme` resolver
+    // `.nuxt/tokens` resolver
     const tokensDir = withTrailingSlash(nuxt.options.buildDir + '/tokens')
 
-    // Init directory
+    // Set srcDir for external imports
+    globalThis.__nuxtDesignTokensBuildDir__ = tokensDir
+
+    // Tokens dir resolver
+    const { resolve: resolveTokensDir } = createResolver(tokensDir)
+    privateConfig.tokensDir = tokensDir
+
+    // `runtime/` resolver
+    const { resolve: resolveRuntime } = createResolver(import.meta.url)
+    const resolveRuntimeModule = (path: string) => resolveModule(path, { paths: resolveRuntime('./runtime') })
+
+    // Init directory on first module run
     await createTokensDir(tokensDir)
 
-    // Refresh configuration
+    // Refresh configurations
     const refreshTokens = async (nitro?: Nitro) => {
-      // Resolve theme configuration from every layer
+      // Resolve tokens.config configuration from every layer
       const { tokensFilePaths, tokens } = resolveTokens(layers as NuxtLayer[])
 
       if (moduleOptions.tokens) { privateConfig.tokensFilePaths = tokensFilePaths }
@@ -55,26 +66,8 @@ export default defineNuxtModule<ModuleOptions>({
       return { tokens, tokensFilePaths }
     }
 
-    // Set srcDir for external imports
-    globalThis.__nuxtDesignTokensBuildDir__ = tokensDir
-
-    // Theme dir resolver
-    const { resolve: resolveTokensDir } = createResolver(tokensDir)
-    privateConfig.tokensDir = tokensDir
-
-    // Initial theme resolving
-    const { tokens } = await refreshTokens()
-
-    // `runtime/` resolver
-    const { resolve: resolveRuntime } = createResolver(import.meta.url)
-    const resolveRuntimeModule = (path: string) => resolveModule(path, { paths: resolveRuntime('./runtime') })
-
-    // Transpile
-    nuxt.options.build.transpile = nuxt.options.build.transpile || []
-    nuxt.options.build.transpile.push(resolveRuntime('./runtime'))
-
     // Main function to build tokens (module-level)
-    const buildTokens = async (nitro) => {
+    const buildTokens = async (nitro: Nitro) => {
       try {
         const start = performance.now()
         const tokens = await nitro.storage.getItem('cache:design-tokens:tokens.json') as NuxtDesignTokens
@@ -88,6 +81,13 @@ export default defineNuxtModule<ModuleOptions>({
       }
     }
 
+    // Initial tokens resolving
+    const { tokens } = await refreshTokens()
+
+    // Transpile
+    nuxt.options.build.transpile = nuxt.options.build.transpile || []
+    nuxt.options.build.transpile.push(resolveRuntime('./runtime'))
+
     // Apply aliases
     nuxt.options.alias = nuxt.options.alias || {}
     nuxt.options.alias['#design-tokens'] = resolveTokensDir('index')
@@ -159,6 +159,7 @@ export default defineNuxtModule<ModuleOptions>({
     /**
      * Runtime
      */
+
     addPlugin({
       src: resolveRuntimeModule('./plugins/tokens')
     })
@@ -168,12 +169,10 @@ export default defineNuxtModule<ModuleOptions>({
       as: 'useTokens'
     })
 
-    // Create initial build targets for tokens
-    await generateTokens(tokens, tokensDir, true)
-
     /**
-     * Build environments
+     * Dev
      */
+
     if (nuxt.options.dev) {
       nuxt.hook('nitro:init', (nitro) => {
         nuxt.hook('vite:serverCreated', (viteServer: ViteDevServer) => {
@@ -196,9 +195,12 @@ export default defineNuxtModule<ModuleOptions>({
           })
         })
       })
-    } else {
-      // Production builds
-      nuxt.hook('build:before', async () => await generateTokens(tokens, tokensDir, true))
     }
+
+    /**
+     * Prod
+     */
+
+    nuxt.hook('build:before', async () => await generateTokens(tokens, tokensDir, true))
   }
 })

src/utils.ts

@@ -5,6 +5,7 @@ import { resolve } from 'pathe'
 import chalk from 'chalk'
 import { requireModule, useLogger } from '@nuxt/kit'
 import { name, version } from '../package.json'
+import { stubTokens } from './generate'
 import type { NuxtDesignTokens, ModuleOptions } from './index'
 
 export interface NuxtLayer {
@@ -75,7 +76,10 @@ export const resolveTokens = (layers: NuxtLayer[]) => {
 }
 
 export const createTokensDir = async (path: string) => {
-  if (!existsSync(path)) { await mkdir(path, { recursive: true }) }
+  if (!existsSync(path)) {
+    await mkdir(path, { recursive: true })
+    await stubTokens(path, true)
+  }
 }
 
 /**