feat(palette): automatically load palette when present ; add option &…

… tests

README.md

@@ -6,28 +6,38 @@
 
 > [🕹️ Try it online](https://play.pinceau.dev) • [📖 Documentation](https://pinceau.dev)
 
-- 🪄 Fully-typed styling API inspired from the tools you already [_love_](https://stitches.dev)
-  - `$styled.el()`, `styled()` and `css()`
+- 🦾 Typed Styling API inspired from the tools you already [_love_](https://stitches.dev)
 
-- 🎨 Multi-layers [Design Tokens compatible](https://github.com/design-tokens/community-group) theming
+  - ```typescript
+    const Component = $styled.a<Props>({ ...componentStyle })
+    const className = styled({ ...scopedCss })
+    css({ ...globalCss })
+    ```
 
-- ⚡ Plug & play support for any [Vite](https://vitejs.dev)-based framework:
-  - [Vue](./integrations/vue), [React](./integrations/vue), [Svelte](./integrations/vue), [Nuxt](./integrations/nuxt), [Astro](./integrations/astro)
-  - Planned support for: [Qwik](https://qwik.builder.io), [SolidJS](https://www.solidjs.com), [Preact](https://preactjs.com), [Lit](https://lit.dev), [_yours ?_](https://github.com/Tahul/pinceau/issues)
+- 🎨 Multi-layers [Design Tokens compatible](https://github.com/design-tokens/community-group) theme configuration
 
-- 💅 Comes with everything you need to build a robust design system:
+- ⚡ Plug & play support for any [Vite](https://vitejs.dev)-based framework
+  > [Vue](./integrations/vue), [React](./integrations/vue), [Svelte](./integrations/vue), [Nuxt](./integrations/nuxt), [Astro](./integrations/astro)
+
+- 🪄 Comes with everything you need to build a robust design system
   - Smart output engine that uses [static CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) or [CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) when you need it
   - Style colocation
   - Style composition
   - Responsive variants API
-  - Theming tokens
+  - Theming and local tokens
   - Runtime theme swapping
 
-- 🌐 SSR-ready with optimized hydration and no _JS/CSS_ theme duplication
+- 🧱 Fully modulable, let you disable every feature you do not need but needs no configuration to start
+
+- 🌐 SSR-ready with optimized hydration and no _JS/CSS_ style duplication
 
 - ✅ **300+** tests covering every core packages and integrations
 
-- 🍦 [Pinceau VSCode extension](https://marketplace.visualstudio.com/items?itemName=yaelguilloux.pinceau-vscode) for **DX Sugar**
+- 🍦 [VSCode extension](https://marketplace.visualstudio.com/items?itemName=yaelguilloux.pinceau-vscode) for **DX Sugar**
+
+> Planned support for: [Qwik](https://qwik.builder.io), [SolidJS](https://www.solidjs.com), [Preact](https://preactjs.com), [Lit](https://lit.dev), [_yours ?_](https://github.com/Tahul/pinceau/issues)
+
+> Pinceau v1 is currently in **⚠️ beta**, feel free to report any feedback you may have in [issues](https://github.com/Tahul/pinceau/issues).
 
 ## ⚙️ Install
 

docs/content/3.advanced/0.vite-plugin-options.md

@@ -111,7 +111,7 @@ That is useful if you want to listen to the Pinceau outputs.
 ### `buildDir`
 
 - `string|undefined`{lang="ts"}
-- `'node_modules/.vite/pinceau'`{lang="ts"}
+- `'node_modules/.pinceau'`{lang="ts"}
 
 The directory where your theme outputs will be written.
 

examples/vite-react/package.json

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

examples/vite-react/src/App.tsx

@@ -36,7 +36,7 @@ function App() {
   return (
     <div>
       <header>
-        <TestComponent color="magenta" size="lg">
+        <TestComponent color="red" size="lg">
           ???
         </TestComponent>
 

examples/vite-react/vite.config.ts

@@ -3,28 +3,16 @@ import { defineConfig } from 'vite'
 import React from '@vitejs/plugin-react'
 import Pinceau from '@pinceau/react/plugin'
 
-const root = resolve('../../')
-
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     Pinceau(
       {
-        vue: false,
-        debug: 2,
         style: {
           excludes: [
             resolve('../../packages'),
           ],
-        },
-        theme: {
-          buildDir: resolve('./node_modules/.pinceau/'),
-          layers: [
-            {
-              path: resolve('../../packages/palette/'),
-            },
-          ],
-        },
+        }
       },
     ),
     React(),

examples/vite-svelte/package.json

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

examples/vite-svelte/vite.config.ts

@@ -19,20 +19,11 @@ export default defineConfig({
   },
   plugins: [
     Pinceau({
-      debug: 2,
       style: {
         excludes: [
           resolve('../../packages'),
         ],
-      },
-      theme: {
-        buildDir: resolve('./node_modules/.pinceau/'),
-        layers: [
-          {
-            path: resolve('../../packages/palette/'),
-          },
-        ],
-      },
+      }
     }),
     svelte(),
   ],

examples/vite-vue/vite.config.ts

@@ -20,18 +20,11 @@ export default defineConfig({
   plugins: [
     Vue(),
     Pinceau({
-      debug: 2,
       style: {
         excludes: [
           resolve('../../packages'),
         ],
-      },
-      theme: {
-        buildDir: resolve('./node_modules/.pinceau'),
-        layers: [
-          '@pinceau/palette'
-        ],
-      },
+      }
     }),
     !process.env.VITEST_WORKER_ID
       ? Inspect({

integrations/react/src/runtime/computed-styles.ts

@@ -8,6 +8,8 @@ export function useComputedStyles(fns?: [string, ComputedStyleDefinition][], pro
 
   const [className, setClassName] = useState<string>()
 
+  console.log(fns)
+
   const newClassName = runtimeSheet.getRule(
     computedStylesToDeclaration(
       (fns || []).map(([varName, fn]) => [varName, fn(props || {})] as [string, ReturnType<ComputedStyleDefinition>]),

integrations/react/src/runtime/pinceau-component.ts

@@ -2,7 +2,9 @@ import { createElement } from 'react'
 import type { ComputedStyleDefinition, SupportedHTMLElements, Variants } from '@pinceau/style'
 import { usePinceauRuntime } from './pinceau-runtime'
 
-export function usePinceauComponent<T extends {}>(staticClass?: string | undefined, computedStyles?: [string, ComputedStyleDefinition][], variants?: Variants, type?: SupportedHTMLElements) {
+export function usePinceauComponent<T extends {}>(type?: SupportedHTMLElements, staticClass?: string | undefined, computedStyles?: [string, ComputedStyleDefinition][], variants?: Variants) {
+  let localAttrs = {}
+
   const component = (
     props: T,
   ) => {
@@ -13,6 +15,7 @@ export function usePinceauComponent<T extends {}>(staticClass?: string | undefin
       {
         ...props,
         className: pinceauClasses,
+        ...(localAttrs || {}),
       },
     )
   }
@@ -22,5 +25,7 @@ export function usePinceauComponent<T extends {}>(staticClass?: string | undefin
     return component
   }
 
+  component.withAttrs = attrs => (localAttrs = attrs)
+
   return component
 }

integrations/react/src/utils/unplugin.ts

@@ -34,10 +34,6 @@ export const PinceauReactPlugin: UnpluginInstance<undefined> = createUnplugin(()
 
     transformInclude: id => transformInclude(id, ctx),
 
-    transform: async (code, id) => {
-      const result = await transform(code, id, suite, ctx)
-
-      return result
-    },
+    transform: async (code, id) => await transform(code, id, suite, ctx),
   }
 })

integrations/vscode/src/index.ts

@@ -61,9 +61,9 @@ export function activate(context: vscode.ExtensionContext) {
     synchronize: {
       fileEvents: [
         vscode.workspace.createFileSystemWatcher('**/*/.nuxt/pinceau/index.ts'),
-        vscode.workspace.createFileSystemWatcher('**/*/node_modules/.vite/pinceau/index.ts'),
+        vscode.workspace.createFileSystemWatcher('**/*/node_modules/.pinceau/index.ts'),
         vscode.workspace.createFileSystemWatcher('**/*/.nuxt/pinceau/definitions.ts'),
-        vscode.workspace.createFileSystemWatcher('**/*/node_modules/.vite/pinceau/definitions.ts'),
+        vscode.workspace.createFileSystemWatcher('**/*/node_modules/.pinceau/definitions.ts'),
       ],
     },
   }

packages/core/src/utils/merger.ts

@@ -5,7 +5,7 @@ import { createDefu } from 'defu'
  */
 export const merger = createDefu((obj, key, value) => {
   if (Array.isArray(obj[key]) && Array.isArray(value)) {
-    (obj as any)[key] = value // Array.from(new Set([...obj[key], ...value]))
+    (obj as any)[key] = value
     return true
   }
 })

packages/core/src/utils/options.ts

@@ -19,6 +19,7 @@ export function getDefaultOptions(): { [key in keyof PinceauUserOptions]: any }
     definitions: true,
     schema: true,
     imports: true,
+    palette: true,
   }
 
   const style: PinceauUserOptions['style'] = {

packages/integration/package.json

@@ -30,7 +30,8 @@
     "@pinceau/runtime": "workspace:*",
     "@pinceau/stringify": "workspace:*",
     "@pinceau/style": "workspace:*",
-    "@pinceau/theme": "workspace:*"
+    "@pinceau/theme": "workspace:*",
+    "@pinceau/palette": "workspace:*"
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*"

packages/palette/package.json

@@ -33,15 +33,6 @@
   },
   "devDependencies": {
     "@pinceau/configs": "workspace:*",
-    "@pinceau/core": "workspace:*",
-    "@pinceau/runtime": "workspace:*",
-    "@pinceau/style": "workspace:*",
-    "@pinceau/theme": "workspace:*",
-    "@pinceau/vue": "workspace:*",
-    "@pinceau/svelte": "workspace:*",
-    "@pinceau/react": "workspace:*",
-    "@pinceau/astro": "workspace:*",
-    "pinceau": "workspace:*",
     "vite": "^4.4.11"
   }
 }

packages/palette/vite.config.full.ts

@@ -2,12 +2,12 @@ import path from 'node:path'
 import fs from 'node:fs'
 import { createResolver } from '@nuxt/kit'
 import { defineConfig } from 'vite'
-import Pinceau from 'pinceau/plugin'
-import { getPinceauContext } from '@pinceau/core/utils'
-import { createReactPlugin } from '@pinceau/react/utils'
-import { createVuePlugin } from '@pinceau/vue/utils'
-import { createSveltePlugin } from '@pinceau/svelte/utils'
-import type { PinceauContext } from '@pinceau/core'
+import Pinceau from '../../integrations/pinceau/src/plugin'
+import { getPinceauContext } from '../../packages/core/src/utils'
+import { createReactPlugin } from '../../integrations/react/src/utils'
+import { createVuePlugin } from '../../integrations/vue/src/utils'
+import { createSveltePlugin } from '../../integrations/svelte/src/utils'
+import type { PinceauContext } from '../../packages/core/src'
 
 let ctx: PinceauContext
 

packages/palette/vite.config.react.ts

@@ -1,7 +1,7 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
-import Pinceau from 'pinceau/plugin'
-import { PinceauReactPlugin } from '@pinceau/react/utils'
+import Pinceau from '../../integrations/pinceau/src/plugin'
+import { PinceauReactPlugin } from '../../integrations/react/src/utils'
 
 export default defineConfig({
   plugins: [

packages/palette/vite.config.svelte.ts

@@ -1,7 +1,7 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
-import Pinceau from 'pinceau/plugin'
-import { PinceauSveltePlugin } from '@pinceau/svelte/utils'
+import Pinceau from '../../integrations/pinceau/src/plugin'
+import { PinceauSveltePlugin } from '../../integrations/svelte/src/utils'
 
 export default defineConfig({
   plugins: [

packages/palette/vite.config.vue.ts

@@ -1,7 +1,7 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
-import Pinceau from 'pinceau/plugin'
-import { PinceauVuePlugin } from '@pinceau/vue/utils'
+import Pinceau from '../../integrations/pinceau/src/plugin'
+import { PinceauVuePlugin } from '../../integrations/vue/src/utils'
 
 export default defineConfig({
   plugins: [

packages/theme/src/index.ts

@@ -22,6 +22,9 @@ declare module '@pinceau/core' {
   }
 
   interface PinceauExtendedContext {
+    /**
+     * $theme() function for build context.
+     */
     $theme: ThemeFunction
 
     /**

packages/theme/src/types/config.ts

@@ -72,7 +72,7 @@ export interface ReservedConfigKeys {
  * Theme generation output.
  */
 export interface ThemeGenerationOutput {
-  buildDir: string | undefined
+  buildDir: string | false | undefined
   theme: Theme<PinceauTheme>
   outputs: VirtualOutputs
 }

packages/theme/src/types/options.ts

@@ -67,7 +67,7 @@ export interface PinceauThemeOptions {
    *
    * If set to `false`, generation will not output anything on filesystem.
    */
-  buildDir: string | undefined
+  buildDir: string | undefined | false
 
   /**
    * Imports the default CSS reset in the project.
@@ -114,4 +114,9 @@ export interface PinceauThemeOptions {
    * Support for definitions.ts ; improving experience for Pinceau IntelliSense.
    */
   definitions: boolean
+
+  /**
+   * Inject `@pinceau/palette` automatically
+   */
+  palette: boolean
 }