{"id":22489513,"url":"https://github.com/Tahul/pinceau","last_synced_at":"2025-08-02T21:33:01.712Z","repository":{"id":59269278,"uuid":"530317054","full_name":"Tahul/pinceau","owner":"Tahul","description":"🖌️ Make your \u003cscript\u003e lighter and your \u003cstyle\u003e smarter","archived":false,"fork":false,"pushed_at":"2024-11-05T16:27:52.000Z","size":16226,"stargazers_count":687,"open_issues_count":45,"forks_count":20,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-03T02:43:44.543Z","etag":null,"topics":["css-in-ts","design-tokens","developer-experience","vue","zero-runtime"],"latest_commit_sha":null,"homepage":"https://pinceau.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tahul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Tahul"]}},"created_at":"2022-08-29T17:11:30.000Z","updated_at":"2025-06-15T21:05:23.000Z","dependencies_parsed_at":"2022-09-15T05:01:31.207Z","dependency_job_id":"4deaea57-dac7-433d-a891-88278355d939","html_url":"https://github.com/Tahul/pinceau","commit_stats":{"total_commits":615,"total_committers":7,"mean_commits":87.85714285714286,"dds":"0.027642276422764178","last_synced_commit":"1fb52a3812796f717dbc26db9ca0ff82f81f8a03"},"previous_names":[],"tags_count":258,"template":false,"template_full_name":"unplugin/unplugin-starter","purl":"pkg:github/Tahul/pinceau","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fpinceau","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fpinceau/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fpinceau/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fpinceau/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tahul","download_url":"https://codeload.github.com/Tahul/pinceau/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fpinceau/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268456843,"owners_count":24253296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-ts","design-tokens","developer-experience","vue","zero-runtime"],"created_at":"2024-12-06T17:20:00.612Z","updated_at":"2025-08-02T21:33:00.540Z","avatar_url":"https://github.com/Tahul.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Tahul"],"categories":["TypeScript"],"sub_categories":[],"readme":"![Pinceau Cover](./.github/banner.png)\n\n# Pinceau [![NPM version](https://img.shields.io/npm/v/pinceau?color=a1b858\u0026label=)](https://www.npmjs.com/package/@pinceau/core)\n\n\u003e Make your `\u003cscript\u003e` lighter and your `\u003cstyle\u003e` smarter.\n\n\u003e [🕹️ Try it online](https://play.pinceau.dev) • [📖 Documentation](https://pinceau.dev)\n\n- 🦾 Typed Styling API inspired from the tools you already [_love_](https://stitches.dev)\n\n  - ```typescript\n    const Component = $styled.a\u003cProps\u003e({ ...componentStyle })\n    const className = styled({ ...scopedCss })\n    css({ ...globalCss })\n    ```\n\n- 🎨 Multi-layers [Design Tokens compatible](https://github.com/design-tokens/community-group) theme configuration\n\n- ⚡ Plug \u0026 play support for any [Vite](https://vitejs.dev)-based framework\n  \u003e [Vue](./integrations/vue), [React](./integrations/vue), [Svelte](./integrations/vue), [Nuxt](./integrations/nuxt), [Astro](./integrations/astro)\n\n- 🪄 Comes with everything you need to build a robust design system\n  - 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\n  - Style colocation\n  - Style composition\n  - Responsive variants API\n  - Theming and local tokens\n  - Runtime theme swapping\n\n- 🧱 Fully modulable, let you disable every feature you do not need but needs no configuration to start\n\n- 🌐 SSR-ready with optimized hydration and no _JS/CSS_ style duplication\n\n- ✅ **300+** tests covering every core packages and integrations\n\n- 🍦 [VSCode extension](https://marketplace.visualstudio.com/items?itemName=yaelguilloux.pinceau-vscode) for **DX Sugar**\n\n\u003e 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)\n\n\u003e Pinceau v1 is currently in **⚠️ beta**, feel free to report any feedback you may have in [issues](https://github.com/Tahul/pinceau/issues).\n\n## ⚙️ Install\n\n\u003cdetails\u003e\n\u003csummary\u003eVue\u003c/summary\u003e\u003cbr\u003e\n\n```bash\npnpm install @pinceau/vue\n```\n\n```ts\n// vite.config.ts\nimport Pinceau from '@pinceau/vue/plugin'\n\nexport default defineConfig({\n  plugins: [\n    Pinceau(),\n    ...yourPlugins\n  ],\n})\n```\n\nExample: [`examples/vite-vue/vite.config.ts`](./examples/vite-vue/vite.config.ts)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSvelte\u003c/summary\u003e\u003cbr\u003e\n\n```bash\npnpm install @pinceau/svelte\n```\n\n```ts\n// vite.config.ts\nimport Pinceau from '@pinceau/svelte/plugin'\n\nexport default defineConfig({\n  plugins: [\n    Pinceau(),\n    ...yourPlugins\n  ],\n})\n```\n\nExample: [`examples/vite-svelte/vite.config.ts`](./examples/vite-svelte/vite.config.ts)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eReact\u003c/summary\u003e\u003cbr\u003e\n\n```bash\npnpm install @pinceau/react\n```\n\n```ts\n// vite.config.ts\nimport Pinceau from '@pinceau/react/plugin'\n\nexport default defineConfig({\n  plugins: [\n    Pinceau(),\n    ...yourPlugins\n  ],\n})\n```\n\nExample: [`examples/vite-react/vite.config.ts`](./examples/vite-react/vite.config.ts)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eUse our theme or create yours\u003c/summary\u003e\u003cbr\u003e\n\nUse our default theme, [🎨 Pigments](./packages/pigments):\n\n```ts\n// vite.config.ts\nexport default defineConfig({\n  plugins: [\n    Pinceau({\n      theme: {\n        layers: ['@pinceau/pigments']\n      }\n    })\n  ]\n})\n```\n\nOr build your in `theme.config.ts`:\n\n```ts\n// theme.config.ts\nimport { defineTheme } from '@pinceau/theme'\n\nexport default defineTheme({\n  // Media queries\n  media: {\n    mobile: '(min-width: 320px)',\n    tablet: '(min-width: 768px)',\n    desktop: '(min-width: 1280px)'\n  },\n\n\n  // Some Design tokens\n  color: {\n    red: {\n      1: '#FCDFDA',\n      2: '#F48E7C',\n      3: '#ED4D31',\n      4: '#A0240E',\n      5: '#390D05',\n    },\n    green: {\n      1: '#CDF4E5',\n      2: '#9AE9CB',\n      3: '#36D397',\n      4: '#1B7D58',\n      5: '#072117',\n    }\n  },\n  space: {\n    1: '0.25rem',\n    2: '0.5rem',\n    3: '0.75rem',\n    4: '1rem'\n  }\n\n  // Utils properties\n  utils: {\n    px: (value: PropertyValue\u003c'padding'\u003e) =\u003e ({ paddingLeft: value, paddingRight: value }),\n    py: (value: PropertyValue\u003c'padding'\u003e) =\u003e ({ paddingTop: value, paddingBottom: value })\n  }\n})\n```\n\nExample: [`examples/theme/theme.config.ts`](./playground/theme/theme.config.ts)\n\n\u003c/details\u003e\n\n## 💖 Credits\n\nThis package takes a lot of inspiration from these amazing projects:\n\n\u003e [Stitches](https://stitches.dev) • [vanilla-extract](https://vanilla-extract.style/) • [unocss](https://github.com/unocss/unocss) • [style-dictionary](https://github.com/amzn/style-dictionary)\n\n## License\n\n[MIT](./LICENSE) License \u0026copy; 2022-PRESENT [Yaël GUILLOUX](https://github.com/Tahul)\n\n---\n\n\u003e _“All you need to paint is a few tools, a little instruction, and a vision in your mind.”_ • Bob Ross\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTahul%2Fpinceau","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTahul%2Fpinceau","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTahul%2Fpinceau/lists"}