Pinceau

Make your <script> lighter and your <style> smarter.

🎨 play.pinceau.dev • 🧑‍🎨 Documentation

• Ships 0kb of JavaScript to the client
• Design tokens compatible configuration
• Fully-typed styling API
• Opt-in runtime engine
• Developer Experience that feels like a native Vue feature
• Plug & play with Nuxt 3 and Vite
• Ready for Nuxt Studio
• Pinceau VSCode extension for DX Sugar

⚙️ Install

npm i pinceau

Nuxt

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    'pinceau/nuxt',
  ],
  pinceau: {
    ...PinceauOptions
  }
})

Example: playground/

This module only works with Nuxt 3.

Vite

// vite.config.ts
import Pinceau from 'pinceau/vite'

export default defineConfig({
  plugins: [
    Pinceau(PinceauOptions),
  ],
})

Example: playground/_vite.config.ts

Create your theme

// tokens.config.ts
import { defineTheme } from 'pinceau'

export default defineTheme({
  // Media queries
  media: {
    mobile: '(min-width: 320px)',
    tablet: '(min-width: 768px)',
    desktop: '(min-width: 1280px)'
  },


  // Some Design tokens
  color: {
    red: {
      1: '#FCDFDA',
      2: '#F48E7C',
      3: '#ED4D31',
      4: '#A0240E',
      5: '#390D05',
    },
    green: {
      1: '#CDF4E5',
      2: '#9AE9CB',
      3: '#36D397',
      4: '#1B7D58',
      5: '#072117',
    }
  },
  space: {
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem'
  }

  // Utils properties
  utils: {
    px: (value: PropertyValue<'padding'>) => ({ paddingLeft: value, paddingRight: value }),
    py: (value: PropertyValue<'padding'>) => ({ paddingTop: value, paddingBottom: value })
  }
})

Example: playground/theme/tokens.config.ts

Learn more about Pinceau in the documentation].

💖 Credits

Thanks to these amazing people that helped me along the way:

• Sébastien Chopin
• NuxtLabs
• Daniel Roe
• Anthony Fu
• Johnson Chu
• @patak
• Serhii Bedrytskyi

This package takes a lot of inspiration from these amazing projects:

• Stitches
• vanilla-extract
• unocss
• style-dictionary

License

MIT License © 2022-PRESENT Yaël GUILLOUX

“All you need to paint is a few tools, a little instruction, and a vision in your mind.” • Bob Ross