-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sprinkles-like API #21
Comments
What are the main use cases that you see of sprinkles that macaron doesn't provide right now? |
Ease of use, sprinkles doesn't use normal CSS properties, it's more like tailwind. You're intended to create many sprinkles and mix them together for "Atomic CSS" |
I actually came to the Macaron GitHub issues today to request a feature similar to Sprinkles and found this ticket! Timely! I actually didn't know what Sprinkles was but I wanted something like it. I'm basically looking for a CSS-in-JS level of ergonomics but with extracted, atomic CSS like Tailwind offers. I like the extracted, atomic CSS because it deduplicates any CSS properties you used and creates super tiny CSS files. Making it unnecessary to worry about things like "above the fold CSS" vs the rest of the CSS. I was hoping Stitches would get there eventually (at least with extracted CSS) but Stitches seems to be slowing down right now and rumors have started that it's considered "feature complete". So I've come to Macaron in hopes to find what I'm looking for! |
I'm not sure if I'm comfortable with expanding the scope of macaron's core lib to include atomic css, though it should be very easy to use sprinkles with macaron's compiler to get colocated styles. With this setup you can define the sprinkles in any file, and not be restricted to import { macaron$ } from "@macaron-css/core"
import {
defineProperties,
createSprinkles
} from '@vanilla-extract/sprinkles';
const responsiveProperties = macaron$(() => defineProperties({
conditions: {},
// etc..
}))
export const sprinkles = macaron$(() => createSprinkles(
responsiveProperties,
)); After this you can use these like you normally would use sprinkles. Macaron will extract all the css of sprinkles styles |
Using VE directly allows usage of Sprinkles which dramatically reduces friction of usage, is this planned or possible to use with macaron?
The text was updated successfully, but these errors were encountered: