Pinceau 
Make your
<script>lighter and your<style>smarter.
-
🦾 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
-
🪄 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
```bash pnpm install @pinceau/vue ``` ```ts // vite.config.ts import Pinceau from '@pinceau/vue/plugin' export default defineConfig({ plugins: [ Pinceau(), ...yourPlugins ], }) ``` Example: [`examples/vite-vue/vite.config.ts`](./examples/vite-vue/vite.config.ts)
Svelte
```bash pnpm install @pinceau/svelte ``` ```ts // vite.config.ts import Pinceau from '@pinceau/svelte/plugin' export default defineConfig({ plugins: [ Pinceau(), ...yourPlugins ], }) ``` Example: [`examples/vite-svelte/vite.config.ts`](./examples/vite-svelte/vite.config.ts)
React
```bash pnpm install @pinceau/react ``` ```ts // vite.config.ts import Pinceau from '@pinceau/react/plugin' export default defineConfig({ plugins: [ Pinceau(), ...yourPlugins ], }) ``` Example: [`examples/vite-react/vite.config.ts`](./examples/vite-react/vite.config.ts)
Use our theme or create yours
Use our default theme, [🎨 Pigments](./packages/pigments): ```ts // vite.config.ts export default defineConfig({ plugins: [ Pinceau({ theme: { layers: ['@pinceau/pigments'] } }) ] }) ``` Or build your in `theme.config.ts`: ```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`](./playground/theme/theme.config.ts)
💖 Credits
This package takes a lot of inspiration from these amazing projects:
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