Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/macaron-css/macaron
Compiled-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity
https://github.com/macaron-css/macaron
css css-in-js react solid stitches vanilla-extract
Last synced: 3 months ago
JSON representation
Compiled-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity
- Host: GitHub
- URL: https://github.com/macaron-css/macaron
- Owner: macaron-css
- License: mit
- Created: 2022-05-31T05:24:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-03T08:58:58.000Z (12 months ago)
- Last Synced: 2024-02-25T02:00:38.106Z (4 months ago)
- Topics: css, css-in-js, react, solid, stitches, vanilla-extract
- Language: TypeScript
- Homepage: https://macaron.js.org/
- Size: 1.09 MB
- Stars: 703
- Watchers: 8
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- popular-dependents-lists - macaron-css/macaron - 🌟 594 (Qwik / macaron-css/macaron)
- awesome-stars - macaron-css/macaron - Compiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity (TypeScript)
README
CSS-in-JS with zero runtime, type safety and colocation
## Features
- Zero runtime bundles with build time style extraction.
- Colocation of styles and components.
- First class Typescript support.
- Supports both styled-components API and vanilla styling API.
- [Stitches](https://stitches.dev/)-like variants API.
- Out of box support for React, Solid and Qwik.
- Integrations for [esbuild](https://esbuild.github.io/) and [Vite](https://vitejs.dev/).
## Documentation
For full documentation, visit [https://macaron.js.org](https://macaron.js.org)
## Example
### Styled API
```jsx
// or import it from @macaron-css/solid
import { styled } from '@macaron-css/react';
const Button = styled('button', {
base: {
borderRadius: 6,
},
variants: {
color: {
neutral: { background: 'whitesmoke' },
brand: { background: 'blueviolet' },
accent: { background: 'slateblue' },
},
size: {
small: { padding: 12 },
medium: { padding: 16 },
large: { padding: 24 },
},
rounded: {
true: { borderRadius: 999 },
},
},
compoundVariants: [
{
variants: {
color: 'neutral',
size: 'large',
},
style: {
background: 'ghostwhite',
},
},
],
defaultVariants: {
color: 'accent',
size: 'medium',
},
});
// Use it like a regular solidjs/react component
function App() {
return (
Click me!
);
}
```
### Styling API
The styling API is the same api is vanilla-extract, but allows styles to be defined in the same file, improving the DX.
Check out [vanilla-extract docs](https://vanilla-extract.style/documentation/api/style/) for the API reference.
These functions can also be called directly inside expressions to provide a `css` prop-like API with zero-runtime cost:-
```js
import { style } from '@macaron-css/core';
function App() {
return (
Click me
);
}
```
## Playground
You can try about these above examples at https://macaron.js.org/playground and see how macaron figures out which expressions have to be extracted and what your code would look like after being transpiled
## How it works
[https://macaron.js.org/docs/working/](https://macaron.js.org/docs/working/)
## Acknowledgements
- [Vanilla Extract](https://vanilla-extract.style)
Thanks to the vanilla-extract team for their work on VE, which macaron uses for evaluating files.
- [Dax Raad](https://twitter.com/thdxr)
Thanks to Dax for helping me with this and thoroughly testing it outß, helping me find numerous bugs and improving macaron.