Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tahul/pinceau
🖌️ Make your <script> lighter and your <style> smarter
https://github.com/tahul/pinceau
css-in-ts design-tokens developer-experience vue zero-runtime
Last synced: 1 day ago
JSON representation
🖌️ Make your <script> lighter and your <style> smarter
- Host: GitHub
- URL: https://github.com/tahul/pinceau
- Owner: Tahul
- License: mit
- Created: 2022-08-29T17:11:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-05T16:27:52.000Z (3 months ago)
- Last Synced: 2025-01-18T06:00:09.003Z (8 days ago)
- Topics: css-in-ts, design-tokens, developer-experience, vue, zero-runtime
- Language: TypeScript
- Homepage: https://pinceau.dev
- Size: 15.5 MB
- Stars: 683
- Watchers: 4
- Forks: 20
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Pinceau [](https://www.npmjs.com/package/@pinceau/core)
> Make your `` lighter and your `<style>` smarter.
> [🕹️ Try it online](https://play.pinceau.dev) • [📖 Documentation](https://pinceau.dev)
- 🦾 Typed Styling API inspired from the tools you already [_love_](https://stitches.dev)
- ```typescript
const Component = $styled.a<Props>({ ...componentStyle })
const className = styled({ ...scopedCss })
css({ ...globalCss })
```
- 🎨 Multi-layers [Design Tokens compatible](https://github.com/design-tokens/community-group) theme configuration
- ⚡ 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 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](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
<details>
<summary>Vue</summary><br>
```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)
</details>
<details>
<summary>Svelte</summary><br>
```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)
</details>
<details>
<summary>React</summary><br>
```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)
</details>
<details>
<summary>Use our theme or create yours</summary><br>
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)
</details>
## 💖 Credits
This package takes a lot of inspiration from these amazing projects:
> [Stitches](https://stitches.dev) • [vanilla-extract](https://vanilla-extract.style/) • [unocss](https://github.com/unocss/unocss) • [style-dictionary](https://github.com/amzn/style-dictionary)
## License
[MIT](./LICENSE) License © 2022-PRESENT [Yaël GUILLOUX](https://github.com/Tahul)
---
> _“All you need to paint is a few tools, a little instruction, and a vision in your mind.”_ • Bob Ross