Consider non-grouped styles as base

[hennessyevan]

In Stitches, we put "base" styles in the object like so

const RedBox = styled('div', {
  backgroundColor: '$red'
})

In macaron, following vanilla-extract, we use the base keyword

const RedBox = styled('div', {
  base: {
    backgroundColor: '$red'
  }
})

I'm not sure what the benefit of using base is here, perhaps there is some good reason but could we possibly support both syntaxes? It would surely make it just a little easier for our team to migrate from stitches to macaron.

[Mokshit06]

Hey, so the main reason for having base here is that it allows you to use pre-defined styles/classes as the base styles for some element, so you can do

const RedBox = styled('div', {
    base: "some-class-name",
})

We could support both syntaxes though

[hennessyevan]

Oh that's cool 👍

When we get to it, I'll see whether we might just do a codemod and if we do, I'll contribute that codemod here of course