Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

🖌️ Make your <script> lighter and your <style> smarter

License

NotificationsYou must be signed in to change notification settings

Tahul/pinceau

Repository files navigation

Pinceau Cover

PinceauNPM version

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

🕹️ Try it online •📖 Documentation

  • 🦾 Typed Styling API inspired from the tools you alreadylove

    • constComponent=$styled.a<Props>({ ...componentStyle})constclassName=styled({ ...scopedCss})css({ ...globalCss})

  • 🎨 Multi-layersDesign Tokens compatible theme configuration

  • ⚡ Plug & play support for anyVite-based framework

    Vue,React,Svelte,Nuxt,Astro

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

    • Smart output engine that usesstatic CSS orCSSOM 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 noJS/CSS style duplication

  • ✅300+ tests covering every core packages and integrations

  • 🍦VSCode extension forDX Sugar

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

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

⚙️ Install

Vue
pnpm install @pinceau/vue
// vite.config.tsimportPinceaufrom'@pinceau/vue/plugin'exportdefaultdefineConfig({plugins:[Pinceau(),    ...yourPlugins],})

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

Svelte
pnpm install @pinceau/svelte
// vite.config.tsimportPinceaufrom'@pinceau/svelte/plugin'exportdefaultdefineConfig({plugins:[Pinceau(),    ...yourPlugins],})

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

React
pnpm install @pinceau/react
// vite.config.tsimportPinceaufrom'@pinceau/react/plugin'exportdefaultdefineConfig({plugins:[Pinceau(),    ...yourPlugins],})

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

Use our theme or create yours

Use our default theme,🎨 Pigments:

// vite.config.tsexportdefaultdefineConfig({plugins:[Pinceau({theme:{layers:['@pinceau/pigments']}})]})

Or build your intheme.config.ts:

// theme.config.tsimport{defineTheme}from'@pinceau/theme'exportdefaultdefineTheme({// Media queriesmedia:{mobile:'(min-width: 320px)',tablet:'(min-width: 768px)',desktop:'(min-width: 1280px)'},// Some Design tokenscolor:{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 propertiesutils:{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:

Stitches •vanilla-extract •unocss •style-dictionary

License

MIT License © 2022-PRESENTYaël GUILLOUX

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

About

🖌️ Make your <script> lighter and your <style> smarter

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors14

[8]ページ先頭
©2009-2025 Movatter.jp