Sprinkles-like API

[endigma]

Using VE directly allows usage of Sprinkles which dramatically reduces friction of usage, is this planned or possible to use with macaron?

[Mokshit06]

What are the main use cases that you see of sprinkles that macaron doesn't provide right now?

[endigma]

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"

[kee-oth]

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!

[Mokshit06]

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 .css.ts files, and this would work with macaron's build plugin. Just install @vanilla-extract/sprinkles and then when calling functions like defineProperties or createSprinkles wrap them inside macaron$ exported from @macaron-css/core like:-

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