Prop "as" of styled components can be a component about macaron HOT 4 CLOSED

Macaron is missing some docs for styles, but since it extends the API of vanilla-extract you can check out their docs for recipes here https://vanilla-extract.style/documentation/packages/recipes/#recipe. recipe returns a function which you can call with variant values, for eg button({ color: "dark" }) would return the class names for this variant group. This is the same as the class produced by <Button color="dark" />

It is exported by macaron though, so you can just do

import { recipe } from '@macaron-css/core';

from macaron.

I honestly don't see a great reason to add this. Polymorphic types like this make Typescript quite a lot slower and also are harder to ensure the correctness of. If you see yourself often using the as prop, maybe convert the styled("button", styles) to recipe(styles) and use it as <WhateverComponent className={buttonStyle(...)} />?

from macaron.

@Mokshit06 If there's an alternative way that you propose on doing this, I'm all good for it 👍. That said, I can't find any docs on recipe.

from macaron.

Thanks, that helps 😄

from macaron.