👔 suit-up
css-in-js with template strings. For React.
Benefits
- Scoped selectors
- Automatic vendor prefixing
- Support global CSS
- All CSS features included
- Share constants between js and styles
- Only load the styles that a component have used
- Easily themeable
Example
// it works with CSS Modules syntax for globalsconst style = ` :global .container { color: red; display: flex; align-items: center; justify-content: center; height: 100vh; }` // local composes works too!const buttonStyle = ` .base { border: none; border-radius: 4px; cursor: pointer; padding: 10px 20px; } .default { composes: base; background-color: lightgray; color: black; } .primary { composes: base; background-color: blue; color: white; }` let { return <button className=primary ? stylesprimary : stylesdefault ...rest > children </button> } Button = Button @ { return <div className='container'> <span>Red Text</span> <Button>Default Button</Button> <Button primary>Primary Button</Button> </div> }
Theme Example
const buttonStyle = ` .base { border: none; border-radius: px; cursor: pointer; padding: px px; } .default { composes: base; background-color: ; color: ; } .primary { composes: base; background-color: ; color: ; }` let { return <button className=primary ? stylesprimary : stylesdefault ...rest > children </button> } Button = Button const someTheme = colors: default: 'lightgray' primary: 'darkblue' text: 'black' invertedText: 'white' sizes: borderRadius: 4 verticalPadding: 10 horizontalPadding: 20 { return <ThemeProvider theme=someTheme> <div> <Button>Default Button</Button> <Button primary>Primary Button</Button> </div> </ThemeProvider> }
Acknowledgements
This is HIGHLY inspired by some amazing work: