Pinceau

A zero-runtime CSS-in-TS framework made for Vue
GitHub
681
Created 2 years ago, last commit 10 months ago
14 contributors
750 commits
Stars added on GitHub, month by month
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Last 12 months
+0.2
/day
Package on NPM
pinceau
1.0.0-beta.29
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
README

Pinceau Cover

Pinceau NPM version

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

🕹️ Try it online📖 Documentation

  • 🦾 Typed Styling API inspired from the tools you already love

    • const Component = $styled.a<Props>({ ...componentStyle })
      const className = styled({ ...scopedCss })
      css({ ...globalCss })
  • 🎨 Multi-layers Design Tokens compatible theme configuration

  • ⚡ Plug & play support for any Vite-based framework

    Vue, React, Svelte, Nuxt, Astro

  • 🪄 Comes with everything you need to build a robust design system

    • Smart output engine that uses static CSS or CSSOM when you need it
    • Style colocation
    • Style composition
    • Responsive variants API
    • Theming and local tokens
    • Runtime theme swapping
  • 🧱 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

  • 🍦 VSCode extension for DX Sugar

Planned support for: Qwik, SolidJS, Preact, Lit, yours ?

Pinceau v1 is currently in ⚠️ beta, feel free to report any feedback you may have in issues.

⚙️ Install

Vue
pnpm install @pinceau/vue
// vite.config.ts
import Pinceau from '@pinceau/vue/plugin'

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

Example: examples/vite-vue/vite.config.ts

Svelte
pnpm install @pinceau/svelte
// vite.config.ts
import Pinceau from '@pinceau/svelte/plugin'

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

Example: examples/vite-svelte/vite.config.ts

React
pnpm install @pinceau/react
// vite.config.ts
import Pinceau from '@pinceau/react/plugin'

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

Example: examples/vite-react/vite.config.ts

Use our theme or create yours

Use our default theme, 🎨 Pigments:

// vite.config.ts
export default defineConfig({
  plugins: [
    Pinceau({
      theme: {
        layers: ['@pinceau/pigments']
      }
    })
  ]
})

Or build your in theme.config.ts:

// theme.config.ts
import { defineTheme } from '@pinceau/theme'

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: examples/theme/theme.config.ts

💖 Credits

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

Stitchesvanilla-extractunocssstyle-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