feat(build): improve build step again; clean from build in 1 command

eslint.config.js

@@ -30,6 +30,7 @@ export default antfu(
       '**/tests/fixtures/',
       '**/tests/tmp/',
       '.vscode',
+      '**/grammars/*.tmLanguage.js',
     ],
   },
 )

examples/nuxt/nuxt.config.ts

@@ -18,9 +18,6 @@ export default defineNuxtConfig({
       excludes: [
         resolve('../../packages'),
       ],
-    },
-    theme: {
-      buildDir: resolve('./.nuxt/pinceau/')
     }
   },
   typescript: {

integrations/astro/src/index.ts

@@ -1,4 +1,4 @@
-import { PinceauPluginsOptions } from '@pinceau/core'
+import type { PinceauPluginsOptions } from '@pinceau/core'
 import type { PinceauAstroOptions } from './types'
 
 declare module '@pinceau/core' {

integrations/language-server/package.json

@@ -27,7 +27,9 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@pinceau/integration": "workspace:*",
+    "@pinceau/theme": "workspace:*",
+    "@pinceau/core": "workspace:*",
+    "@pinceau/style": "workspace:*",
     "@vue/compiler-sfc": "^3.3.4",
     "fast-glob": "^3.3.1",
     "line-column": "^1.0.2",

integrations/react/src/index.ts

@@ -1,4 +1,3 @@
-import { PinceauPluginsOptions } from '@pinceau/core'
 import type { PinceauReactOptions } from './types'
 
 declare module '@pinceau/core' {

integrations/react/src/utils/runtime-plugin.ts

@@ -13,22 +13,21 @@ export function createReactPlugin(ctx: PinceauContext) {
   if (ctx.options.runtime) { imports.push('useRuntimeSheet') }
 
   return `import React, { createContext, useContext } from 'react'
-  import { ${imports.join(', ')} } from '@pinceau/runtime'
+import { ${imports.join(', ')} } from '@pinceau/runtime'
 
-  export const PinceauReactOptions = ${JSON.stringify(runtimeOptions || {})}
+export const PinceauReactOptions = ${JSON.stringify(runtimeOptions || {})}
 
-  const PinceauContext = createContext()
+const PinceauContext = createContext()
 
-  export const usePinceauContext = () => useContext(PinceauContext)
+export const usePinceauContext = () => useContext(PinceauContext)
 
-  export const PinceauProvider = ({ options, children }) => {
-    const userOptions = { ...PinceauReactOptions, ...options }
+export const PinceauProvider = ({ options, children }) => {
+  const userOptions = { ...PinceauReactOptions, ...options }
 
-    ${ctx.options.theme ? 'const themeSheet = useThemeSheet(userOptions)' : ''}
-    ${ctx.options.runtime ? `const runtimeSheet = useRuntimeSheet(${ctx.options.theme ? '{ themeSheet, ...userOptions }' : 'userOptions'})` : ''}
-    ${ctx.options.runtime && !!runtimeOptions?.ssr ? 'const ssr = { toString: () => runtimeSheet.toString() }' : ''}
+  ${ctx.options.theme ? 'const themeSheet = useThemeSheet(userOptions)' : ''}
+  ${ctx.options.runtime ? `const runtimeSheet = useRuntimeSheet(${ctx.options.theme ? '{ themeSheet, ...userOptions }' : 'userOptions'})` : ''}
+  ${ctx.options.runtime && !!runtimeOptions?.ssr ? 'const ssr = { toString: () => runtimeSheet.toString() }' : ''}
 
-    return React.createElement(PinceauContext.Provider, {  value: { themeSheet, runtimeSheet, ssr }, children })
-  }
-`
+  return React.createElement(PinceauContext.Provider, {  value: { themeSheet, runtimeSheet, ssr }, children })
+}`
 }

integrations/react/src/utils/virtual.ts

@@ -1,4 +1,3 @@
-import fs from 'node:fs'
 import { join } from 'pathe'
 import type { PinceauContext } from '@pinceau/core'
 import { writeOutput } from '@pinceau/core/utils'

integrations/repl/public/svelte-plugin-proxy.js

@@ -1,20 +1,20 @@
-import { useThemeSheet, useRuntimeSheet } from '@pinceau/runtime'
+import { useRuntimeSheet, useThemeSheet } from '@pinceau/runtime'
 
-  export const PinceauSvelteOptions = {"dev":false,"colorSchemeMode":"media","computedStyles":true,"variants":true,"ssr":{"theme":true,"runtime":true},"appId":false}
+export const PinceauSvelteOptions = { dev: false, colorSchemeMode: 'media', computedStyles: true, variants: true, ssr: { theme: true, runtime: true }, appId: false }
 
-  let userOptions
+let userOptions
 
-  let themeSheet
+let themeSheet
 export const getRuntimeSheet = () => runtimeSheet
 
-  let runtimeSheet
+let runtimeSheet
 export const getThemeSheet = () => themeSheet
 
-  export const pinceauPlugin = (options) => {
-    userOptions = { ...PinceauSvelteOptions, ...options }
-
-    themeSheet = useThemeSheet(userOptions)
-    runtimeSheet = useRuntimeSheet({ themeSheet, ...userOptions })
-  }
+export function pinceauPlugin(options) {
+  userOptions = { ...PinceauSvelteOptions, ...options }
 
-  export const ssr = { toString: () => runtimeSheet.toString() }
+  themeSheet = useThemeSheet(userOptions)
+  runtimeSheet = useRuntimeSheet({ themeSheet, ...userOptions })
+}
+
+export const ssr = { toString: () => runtimeSheet.toString() }

integrations/repl/src/components/monaco/volar.worker.ts

@@ -87,7 +87,7 @@ self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
             'pug': () => ({}),
             'emmet': () => ({}),
             'pug-beautify': () => ({}),
-            ...(language !== 'vue' ? noopVue : {})
+            ...(language !== 'vue' ? noopVue : {}),
           },
         },
         compilerOptions,
@@ -98,7 +98,8 @@ self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
       if (language === 'svelte') {
         // @ts-ignore
         serviceConfig.languages[0] = svelteLanguage
-      } else if (language !== 'vue') {
+      }
+      else if (language !== 'vue') {
         // @ts-ignore
         serviceConfig.languages[0] = typescriptLanguage
       }

integrations/repl/src/store/index.ts

@@ -1,4 +1,4 @@
-import { nextTick, reactive, ref, watch, watchEffect } from 'vue'
+import { reactive, ref, watch, watchEffect } from 'vue'
 import type { Ref, WatchStopHandle } from 'vue'
 import type { editor } from 'monaco-editor-core'
 import palette from '@pinceau/palette/theme.config?raw'

integrations/repl/src/store/pinceau.ts

@@ -15,12 +15,10 @@ import {
 import {
   normalizeTokens,
 } from '@pinceau/theme/runtime'
-import { transformAddPinceauClass, transformAddRuntimeScriptTag, transformWriteScriptFeatures, suite as vueSuite } from '@pinceau/vue/transforms'
+import { transformAddPinceauClass, transformAddRuntimeScriptTag, transformWriteScriptFeatures } from '@pinceau/vue/transforms'
 import { PinceauVueTransformer } from '@pinceau/vue/utils'
 import { PinceauSvelteTransformer } from '@pinceau/svelte/utils'
-import { suite as svelteSuite } from '@pinceau/svelte/transforms'
-import { suite as reactSuite } from '@pinceau/react/transforms'
-import { findDefaultExport, parseAst, parsePinceauQuery, printAst, transform, usePinceauContext, usePinceauTransformContext, visitAst } from '@pinceau/core/utils'
+import { findDefaultExport, parseAst, parsePinceauQuery, printAst, usePinceauContext, usePinceauTransformContext, visitAst } from '@pinceau/core/utils'
 import { suite as styleSuite } from '@pinceau/style/transforms'
 import { suite as themeSuite } from '@pinceau/theme/transforms'
 import type { PinceauContext } from '@pinceau/core'

integrations/repl/vite.config.ts

@@ -6,7 +6,6 @@ import vue from '@vitejs/plugin-vue'
 import replace from '@rollup/plugin-replace'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import Icons from 'unplugin-icons/vite'
-import { env, node, nodeless } from 'unenv'
 
 const resolve = (p: string) => createResolver(import.meta.url).resolve(p)
 

integrations/svelte/src/index.ts

@@ -1,4 +1,3 @@
-import { PinceauPluginsOptions } from '@pinceau/core'
 import type { PinceauSvelteOptions } from './types'
 
 declare module '@pinceau/core' {

integrations/svelte/src/utils/runtime-plugin.ts

@@ -14,21 +14,20 @@ export function createSveltePlugin(ctx: PinceauContext) {
 
   return `import { ${imports.join(', ')} } from '@pinceau/runtime'
 
-  export const PinceauSvelteOptions = ${JSON.stringify(runtimeOptions || {})}
+export const PinceauSvelteOptions = ${JSON.stringify(runtimeOptions || {})}
 
-  let userOptions
+let userOptions
 
-  ${ctx.options.theme ? 'let themeSheet\nexport const getRuntimeSheet = () => runtimeSheet' : ''}
+${ctx.options.theme ? 'let themeSheet\nexport const getThemeSheet = () => themeSheet' : ''}
 
-  ${ctx.options.runtime ? 'let runtimeSheet\nexport const getThemeSheet = () => themeSheet' : ''}
+${ctx.options.runtime ? 'let runtimeSheet\nexport const getRuntimeSheet = () => runtimeSheet' : ''}
 
-  export const pinceauPlugin = (options) => {
-    userOptions = { ...PinceauSvelteOptions, ...options }
-    
-    ${ctx.options.theme ? 'themeSheet = useThemeSheet(userOptions)' : ''}
-    ${ctx.options.runtime ? `runtimeSheet = useRuntimeSheet(${ctx.options.theme ? '{ themeSheet, ...userOptions }' : 'userOptions'})` : ''}
-  }
+export const pinceauPlugin = (options) => {
+  userOptions = { ...PinceauSvelteOptions, ...options }
+  
+  ${ctx.options.theme ? 'themeSheet = useThemeSheet(userOptions)' : ''}
+  ${ctx.options.runtime ? `runtimeSheet = useRuntimeSheet(${ctx.options.theme ? '{ themeSheet, ...userOptions }' : 'userOptions'})` : ''}
+}
 
-  ${ctx.options.runtime && !!runtimeOptions?.ssr ? 'export const ssr = { toString: () => runtimeSheet.toString() }' : ''}
-`
+${ctx.options.runtime && !!runtimeOptions?.ssr ? 'export const ssr = { toString: () => runtimeSheet.toString() }' : ''}`
 }

integrations/svelte/src/utils/virtual.ts

@@ -1,4 +1,3 @@
-import fs from 'node:fs'
 import { join } from 'pathe'
 import type { PinceauContext } from '@pinceau/core'
 import { writeOutput } from '@pinceau/core/utils'

integrations/vue/src/index.ts

@@ -1,4 +1,3 @@
-import { PinceauPluginsOptions } from '@pinceau/core'
 import type { PinceauVueOptions } from './types'
 
 declare module '@pinceau/core' {

integrations/vue/src/utils/virtual.ts

@@ -1,4 +1,3 @@
-import fs from 'node:fs'
 import { join } from 'pathe'
 import type { PinceauContext } from '@pinceau/core'
 import { writeOutput } from '@pinceau/core/utils'

packages/core/src/utils/fs.ts

@@ -1,5 +1,5 @@
 import { dirname } from 'pathe'
-import type { PinceauContext, VirtualOutputs } from '../types'
+import type { PinceauContext } from '../types'
 
 /**
  * Write a virtual output.

packages/palette/package.json

@@ -29,7 +29,7 @@
     "theme.config.ts"
   ],
   "scripts": {
-    "stub": "pnpm run build:base",
+    "build:pre": "pnpm run build:base",
     "build:base": "vite build -c vite.config.base.ts && rm -rf dist",
     "build:react": "vite build -c vite.config.react.ts && rm -rf dist",
     "build:svelte": "vite build -c vite.config.svelte.ts && rm -rf dist",

packages/palette/vite.config.base.ts

@@ -1,10 +1,19 @@
+import fs from 'node:fs'
 import path from 'node:path'
 import { createResolver } from '@nuxt/kit'
 import { defineConfig } from 'vite'
+import type { ResolvedConfig } from 'vite'
 import Pinceau from 'pinceau/plugin'
+import { getPinceauContext } from '@pinceau/core/utils'
+import { createSveltePlugin } from '@pinceau/svelte/utils'
+import { createReactPlugin } from '@pinceau/react/utils'
+import { createVuePlugin } from '@pinceau/vue/utils'
+import { configSourceFromModulePath } from '@pinceau/theme/utils'
 
 const resolve = createResolver(import.meta.url).resolve
 
+let config: ResolvedConfig
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -23,5 +32,33 @@ export default defineConfig({
         buildDir: path.join(__dirname, '../outputs/'),
       },
     }),
+    {
+      name: '@pinceau/palette-end',
+      configResolved(_config) {
+        config = _config
+      },
+      buildEnd() {
+        const ctx = getPinceauContext(config)
+
+        const plugins = {
+          svelte: createSveltePlugin,
+          react: createReactPlugin,
+          vue: createVuePlugin,
+        }
+
+        const outputsPath = configSourceFromModulePath('@pinceau/outputs', ctx)?.path
+
+        Object.entries(plugins).forEach(([key, plugin]) => {
+          const pluginContent = plugin(ctx)
+
+          if (outputsPath) {
+            fs.writeFileSync(
+              path.join(outputsPath, `${key}-plugin.js`),
+              pluginContent,
+            )
+          }
+        })
+      },
+    },
   ],
 })

packages/runtime/src/index.ts

@@ -1,4 +1,3 @@
-import { PinceauPluginsOptions } from '@pinceau/core'
 import type { PinceauRuntimeOptions } from './types'
 
 export * from './utils'

packages/style/src/index.ts

@@ -1,4 +1,3 @@
-import { PinceauPluginsOptions } from '@pinceau/core'
 import type { PinceauStyleOptions } from './types'
 
 export * from './types'

packages/theme/src/utils.ts

@@ -13,3 +13,5 @@ export * from './formats'
 export * from './utils/tokens-transformers'
 export * from './utils/media-queries'
 export * from './utils/config-content'
+export * from './utils/build-dir'
+export * from './utils/module-path'

packages/theme/src/utils/build-dir.ts

@@ -0,0 +1,26 @@
+import { join } from 'pathe'
+import type { PinceauContext } from '@pinceau/core'
+import { configSourceFromModulePath } from './module-path'
+
+export function resolveBuildDir(ctx: PinceauContext) {
+  const { buildDir: optionsBuildDir } = ctx.options.theme
+
+  let buildDir = optionsBuildDir
+
+  // Enforce ending slash for buildDir
+  if (buildDir && !buildDir.endsWith('/')) {
+    buildDir += '/'
+  }
+
+  // Try to resolve using common module path resolve
+  if (buildDir === undefined && ctx.options.cwd && ctx.options.resolve) {
+    buildDir = configSourceFromModulePath('@pinceau/outputs', ctx)?.path
+  }
+
+  // Try to resolve using path join
+  if (buildDir === undefined && ctx.options.cwd) {
+    buildDir = join(ctx.options.cwd, 'node_modules/@pinceau/outputs/')
+  }
+
+  return buildDir
+}

packages/theme/src/utils/config-file.ts

@@ -1,14 +1,10 @@
 import fs from 'node:fs'
 import type { PinceauOptions } from '@pinceau/core'
-import { message, parseAst } from '@pinceau/core/utils'
+import { message } from '@pinceau/core/utils'
 import createJITI from 'jiti'
 import { resolve } from 'pathe'
 import type { ConfigFileImport, ConfigLayer, ResolvedConfigLayer } from '../types'
-import { resolveMediaQueriesKeys } from './media-queries'
 import { getConfigLayer } from './config-layers'
-import { resolveConfigDefinitions } from './config-definitions'
-import { resolveConfigImports } from './config-imports'
-import { resolveConfigUtils } from './config-utils'
 import { resolveConfigContent } from './config-content'
 
 /**

packages/theme/src/utils/config-layers.ts

@@ -1,4 +1,3 @@
-import { dirname, extname } from 'node:path'
 import type { PinceauContext, PinceauOptions } from '@pinceau/core'
 import { merger } from '@pinceau/core/utils'
 import { resolveSchema as resolveUntypedSchema } from 'untyped'
@@ -7,6 +6,7 @@ import type { ConfigLayer, ResolvedConfigLayer, Theme, ThemeLoadingOutput } from
 import { resolveFileLayer } from './config-file'
 import { normalizeTokens } from './tokens'
 import { resolveMediaQueriesKeys } from './media-queries'
+import { configSourceFromModulePath } from './module-path'
 
 // Gives an empty layer for a given path or nothing.
 export function getConfigLayer(path?: string): ResolvedConfigLayer {
@@ -87,30 +87,9 @@ export function resolveConfigSources(
   options: PinceauOptions,
   ctx: PinceauContext,
 ) {
-  const configSourceFromModulePath = (path: string): ConfigLayer | undefined => {
-    if (!ctx.resolve) { return }
-
-    let pkgPath
-    try {
-      pkgPath = ctx.resolve(path)
-    }
-    catch (e) {
-      // TODO: Debug messages
-    }
-
-    if (pkgPath) {
-      const dir = dirname(pkgPath)
-      const filename = pkgPath.replace(`${dir}/`, '')
-      const ext = extname(filename)
-      if (dir && filename && ext) { return { path: `${dir}/`, configFileName: filename.replace(ext, '') } }
-    }
-
-    return undefined
-  }
-
   // Inject palette if options set to true
   if (options.theme.palette) {
-    const paletteSource = configSourceFromModulePath('@pinceau/palette')
+    const paletteSource = configSourceFromModulePath('@pinceau/palette', ctx)
     if (paletteSource) { options.theme.layers.push(paletteSource) }
   }
 
@@ -128,7 +107,7 @@ export function resolveConfigSources(
       if (typeof layerOrPath === 'string') {
         // Supports passing a package like `@pinceau/palette`
         if (!layerOrPath.startsWith('/')) {
-          const resolvedModuleSource = configSourceFromModulePath(layerOrPath)
+          const resolvedModuleSource = configSourceFromModulePath(layerOrPath, ctx)
           if (resolvedModuleSource) { configLayer = resolvedModuleSource }
         }