feat(outputs): update outputs system to use a real module path making…

… type resolution easier

docs/content/0.get-started/1.installation.md

@@ -67,14 +67,7 @@ If you are using Vite, you need to manually add the Volar plugin in your `tsconf
 ```json [tsconfig.json]
 {
   "compilerOptions": {
-    "paths": {
-      "pinceau.css": ["./node_modules/.pinceau/pinceau.css"],
-      "$pinceau/theme": ["./node_modules/.pinceau/theme.ts"],
-      "$pinceau/utils": ["./node_modules/.pinceau/utils.ts"],
-      "$pinceau/schema": ["./node_modules/.pinceau/schema.ts"],
-      "$pinceau/definitions": ["./node_modules/.pinceau/definitions.ts"],
-      "$pinceau/vue-plugin": ["./node_modules/.pinceau/vue-plugin.ts"]
-    }
+    "types": ["@pinceau/outputs"]
   },
   "vueCompilerOptions": {
     "plugins": [

docs/content/1.configuration/4.utils-properties.md

@@ -34,7 +34,7 @@ export default defineTheme({
 })
 ```
 
-```ts [$pinceau/utils]
+```ts [@pinceau/outputs/utils]
 import { PropertyValue } from '@pinceau/style'
 
 export function px(value: PropertyValue<'padding'>) {
@@ -96,7 +96,7 @@ That also means you are free to only use these utils in static styling, and neve
 ```ts
 import { createApp } from 'vue'
 import Pinceau from 'pinceau/runtime'
-import utils from '$pinceau/utils'
+import utils from '@pinceau/outputs/utils'
 
 const app = createApp()
 

examples/astro-svelte/package.json

@@ -16,7 +16,8 @@
     "@astrojs/svelte": "^4.0.3",
     "@pinceau/astro": "workspace:*",
     "@pinceau/configs": "workspace:*",
-    "@pinceau/svelte": "workspace:*",
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "@pinceau/svelte": "workspace:*",
     "astro": "^3.3.0"
   },
   "stackblitz": {

examples/astro-vue/package.json

@@ -16,7 +16,8 @@
     "@astrojs/vue": "^3.0.1",
     "@pinceau/astro": "workspace:*",
     "@pinceau/configs": "workspace:*",
-    "@pinceau/vue": "workspace:*",
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "@pinceau/vue": "workspace:*",
     "astro": "^3.3.0"
   },
   "stackblitz": {

examples/nuxt/app.vue

@@ -1,11 +1,15 @@
+<script setup lang="ts">
+const TestComponent = $styled.a({
+  
+})
+</script>
+
 <template>
-  <App>
+  <App 
+    :styled="{
+      backgroundColor: '$color.blue.1'
+    }"
+  >
     <NuxtPage />
   </App>
 </template>
-
-<style lang="ts">
-css({
-      color: ''
-})
-</style>

examples/nuxt/package.json

@@ -13,7 +13,8 @@
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
-    "nuxt": "^3.7.4"
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "nuxt": "^3.7.4"
   },
   "stackblitz": {
     "installDependencies": false,

examples/nuxt/tsconfig.json

@@ -1,4 +1,3 @@
 {
-  "extends": "./.nuxt/tsconfig.json",
-  "references": [{ "path": "@pinceau/configs/tsconfig.base.json" }]
+  "extends": "./.nuxt/tsconfig.json"
 }

examples/shared/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import theme from '$pinceau/theme'
+import theme from '@pinceau/outputs/theme'
 
 const color = ref('blue')
 
@@ -43,7 +43,6 @@ css({
     backgroundColor: '$color.gray.9',
     minHeight: '100vh',
     minWidth: '100vw',
-    padding: '$space.16',
   },
 })
 </style>

examples/sveltekit/package.json

@@ -11,7 +11,8 @@
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
-    "@pinceau/svelte": "workspace:*",
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "@pinceau/svelte": "workspace:*",
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.25.2",
     "svelte": "^4.2.1",

examples/vite-lib/package.json

@@ -13,7 +13,8 @@
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
-    "typescript": "^5.2.2",
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "typescript": "^5.2.2",
     "vite": "^4.4.11"
   }
 }

examples/vite-lit/package.json

@@ -20,7 +20,8 @@
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
-    "pinceau": "workspace:*",
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "pinceau": "workspace:*",
     "typescript": "^5.2.2",
     "vite": "^4.4.11"
   },

examples/vite-preact/package.json

@@ -15,7 +15,8 @@
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
-    "@pinceau/react": "workspace:*",
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "@pinceau/react": "workspace:*",
     "@preact/preset-vite": "^2.5.0",
     "@prefresh/vite": "^2.4.1",
     "cross-env": "^7.0.3",

examples/vite-react/package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
     "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",
     "@pinceau/react": "workspace:*",
     "@types/node": "20.8.5",
     "@types/react": "latest",

examples/vite-react/src/App.tsx

@@ -1,4 +1,4 @@
-import { PinceauTheme } from '$pinceau/theme'
+import { PinceauTheme } from '@pinceau/outputs/theme'
 import { useState } from 'react'
 
 const TestComponent = $styled

examples/vite-react/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { PinceauProvider } from '$pinceau/react-plugin'
+import { PinceauProvider } from '@pinceau/outputs/react-plugin'
 import './index.css'
 import App from './App'
 

examples/vite-solid/package.json

@@ -14,7 +14,8 @@
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
-    "@pinceau/react": "workspace:*",
+    "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",    "@pinceau/react": "workspace:*",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
     "vite-plugin-inspect": "^0.7.40",

examples/vite-svelte/package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
     "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",
     "@pinceau/svelte": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "^2.4.6",
     "svelte": "^4.2.1",

examples/vite-svelte/src/main.ts

@@ -1,5 +1,5 @@
 import App from './App.svelte'
-import { pinceauPlugin } from '$pinceau/svelte-plugin'
+import { pinceauPlugin } from '@pinceau/outputs/svelte-plugin'
 
 pinceauPlugin()
 

examples/vite-vue/app.vue

@@ -1,37 +1,72 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
+import { useMouseInElement } from '@vueuse/core'
 import App from '../shared/App.vue'
-</script>
 
-<script lang="ts">
-const TestComponent = $styled.a<{ color: keyof PinceauTheme['color'] }>({
-  color: ({ color = 'red' }) => `$color.${color}.5`,
-  backgroundColor: 'green'
-}).withVariants({
-  size: {
-    md: {
-      padding: '$space.32'
-    },
-    options: {
-      default: 'md'
-    }
-  }
-})
-</script>
+const containerRef = ref()
 
-<template>
-  <App class="main">
-    <div>
-      <Navigation />
-    </div>
+const size = ref(128)
+
+css({
+  '.container': {
+     position: 'relative',
+     width: '100%',
+     height: '100vh',
+     backgroundColor: '$color.gray.8',
+     mixBlendMode: 'hard-light'
+   },
+
+   '.dot-background': {
+     position: 'absolute',
+     width: '100%',
+     height: '100%',
+     backgroundImage: 'radial-gradient(circle, transparent 1px, black 1px)',
+     backgroundSize: '10px 10px',
+     zIndex: '2'
+   },
+})
 
-    <TestComponent>
-      hello world
-    </TestComponent>
+const { x, y } = useMouseInElement(containerRef)
 
-    <TestComponent size="md" color="blue">
-      hello world
-    </TestComponent>
+const CircleComponent = $styled.div({
+  $size: () => `${size.value}px`,
+  position: 'absolute',
+  left: () => `calc(${x.value}px - calc($size / 2))`,
+  top: () => `calc(${y.value}px - calc($size / 2))`,
+  width: '$size',
+  height: '$size',
+  borderRadius: 'calc($size / 2)',
+  zIndex: '1',
+  boxShadow: '10px 10px 10px red',
+  backgroundImage: 'radial-gradient(circle at center, $color.red.5, $color.red.1, $color.red.9)',
+})
+</script>
 
-    <RouterView />
+<template>
+  <App ref="containerRef" class="main container">
+    <input :styled="{ position: 'absolute', zIndex: '9', color: '$color.gray.8', borderRadius: '9px', right: 0 }" v-model="size" />
+    <CircleComponent />
+    <div class="dot-background" />
   </App>
 </template>
+
+<style lang="ts">
+styled({
+  variants: {
+    size: {
+      sm: {
+        padding: '$space.1'
+      },
+      md: {
+        padding: '$space.2'
+      },
+      lg: {
+        padding: '$space.4'
+      }
+    },
+    options: {
+      default: 'sm'
+    }
+  }
+})
+</style>

examples/vite-vue/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import * as VueRouter from 'vue-router'
 import App from './app.vue'
 import Navigation from './components/Navigation.vue'
-import { PinceauVue } from '$pinceau/vue-plugin'
+import { PinceauVue } from '@pinceau/outputs/vue-plugin'
 import './style.css'
 
 export const routes = [

examples/vite-vue/package.json

@@ -9,12 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^10.5.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
     "@pinceau/palette": "workspace:*",
+    "@pinceau/outputs": "workspace:*",
     "@pinceau/vue": "workspace:*",
     "@vitejs/plugin-vue": "^4.4.0",
     "typescript": "^5.2.2",

examples/vite-vue/tsconfig.json

@@ -1,8 +1,3 @@
 {
-  "extends": "@pinceau/configs/tsconfig.base.json",
-  "compilerOptions": {
-    "paths": {
-      "$pinceau/types": ["./node_modules/.pinceau/pinceau.d.ts"]
-    }
-  }
+  "extends": "@pinceau/configs/tsconfig.base.json"
 }

integrations/browser/build.ts

@@ -35,7 +35,8 @@ build({
     options.external.push('react-dom')
     options.external.push('@volar/*')
     options.external.push(...external)
-    options.external.push('$pinceau/*')
+    options.external.push('@pinceau/outputs')
+    options.external.push('@pinceau/outputs/*')
     options.alias = options.alias ?? {}
     options.alias = {
       ...options.alias,

integrations/nuxt/server/pinceau.server.mjs

@@ -10,7 +10,7 @@ export default async function (nitro) {
 
     // HMR
     if ($pinceauSSR.options?.dev) {
-      const hmrScript = '<script type="module" data-vite-dev-id="$pinceau/hmr" src="/_nuxt/@id/$pinceau/hmr"></script>'
+      const hmrScript = '<script type="module" data-vite-dev-id="@pinceau/outputs/hmr" src="/_nuxt/@id/@pinceau/outputs/hmr"></script>'
       htmlContext.head.splice(2, 0, hmrScript)
     }
 

integrations/nuxt/src/module.ts

@@ -82,21 +82,8 @@ const module: any = defineNuxtModule<PinceauUserOptions>({
     nuxt.hook('prepare:types', async (opts) => {
       const tsConfig: typeof opts.tsConfig & { vueCompilerOptions?: any } = opts.tsConfig
       tsConfig.compilerOptions = tsConfig.compilerOptions || {}
-      tsConfig.compilerOptions.paths = tsConfig.compilerOptions.paths || {}
-
-      if (options.theme.buildDir) {
-        tsConfig.compilerOptions.paths['pinceau.css'] = [`${resolve(options.theme.buildDir, 'theme.css')}`]
-        tsConfig.compilerOptions.paths['$pinceau/utils'] = [`${resolve(options.theme.buildDir, 'utils.ts')}`]
-        tsConfig.compilerOptions.paths['$pinceau/theme'] = [`${resolve(options.theme.buildDir, 'theme.ts')}`]
-        tsConfig.compilerOptions.paths['$pinceau/vue-plugin'] = [`${resolve(options.theme.buildDir, 'vue-plugin.ts')}`]
-        if (options.theme.schema) { tsConfig.compilerOptions.paths['$pinceau/schema'] = [`${resolve(options.theme.buildDir, 'schema.ts')}`] }
-        if (options.theme.definitions) { tsConfig.compilerOptions.paths['$pinceau/definitions'] = [`${resolve(options.theme.buildDir, 'definitions.ts')}`] }
-      }
-
-      // Push Pinceau reference
-      opts.references = opts.references || []
-      opts.references.push({ path: '$pinceau' })
-      opts.references.push({ path: 'pinceau' })
+      tsConfig.compilerOptions.types = tsConfig.compilerOptions.types || []
+      tsConfig.compilerOptions.types.push('@pinceau/outputs')
 
       // Add Volar plugin
       tsConfig.vueCompilerOptions = tsConfig.vueCompilerOptions || {}

integrations/pinceau/build.config.ts

@@ -18,9 +18,7 @@ export default defineBuildConfig({
     emitCJS: true,
   },
   externals: [
-    '$pinceau',
-    '$pinceau/theme',
-    '$pinceau/utils',
+    '@pinceau/outputs',
     '@pinceau/core',
     '@pinceau/theme',
     '@pinceau/style',

integrations/react/build.config.ts

@@ -48,7 +48,7 @@ export default defineBuildConfig({
     'csstype',
     'ast-types',
     'acorn',
-    '$pinceau/react-plugin',
+    '@pinceau/outputs/react-plugin',
     '@types/react',
     '@types/react-dom',
     '@types/node',