Styles as Components - Styled-Components/Stitches-like syntax

[clovis-rosa]

Hey all 👋!
Not sure what are the future road map plans, but is it possible to implement something like Styles-Components/Stitches styles as components syntax?
A few days ago I found this early project macaron that is basically(as they say) "powered by vanilla-extract" that does exactly that.
Could all this effort be put together? Thanks!

Macaron repo: https://github.com/Mokshit06/macaron

Macaron styled API

// or import it from @macaron-css/react
import { styled } from '@macaron-css/solid';

const StyledButton = 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 (
    <StyledButton color="accent" size="small" rounded>
      Click me!
    </StyledButton>
  );
}