Variant grouping

[lukejacksonn]

Directives with the same variants can now be nested using parenthesis. Oceanwind will expand the nested directives; applying the variant to each nested directive before translation. For example:

ow`
  sm:hover:(
    bg-black
    text-white
  )
  md:(bg-white hover:text-black)
`;

Gets expanded into:

sm:hover:bg-black sm:hover:text-white md:bg-white md:hover:text-black

It is possible to nest groupings too, for example:

ow`
  sm:(
    bg-black
    text-white
    hover:(bg-white text-black)
  )
`;

Two things to note here is that the outermost variant should always be a responsive variant (just like in tailwind hover:sm: is not supported) and that nesting responsive variants doesn't make sense either, for example sm:md: is not supported.

Syntax inspired by a comment in this article https://dev.to/swyx/why-tailwind-css-2o8f by @sw-yx.

[swyxio]

lol, nice one!