lukejacksonn / oceanwind

Compiles tailwind shorthand into css at runtime. Succeeded by Twind.
https://twind.dev
264 stars 12 forks source link

add directive grouping #41

Open sastan opened 3 years ago

sastan commented 3 years ago

oceanwind has introduced the awesome idea of variant grouping (sm:(...) hover:(...)).

In beamwind we've added directive grouping as well.

Directives with the same prefix can be grouped using parenthesis. Beamwind will expand the nested directives; applying the prefix to each directive in the group before translation. For example:

ow`text(center bold gray-500)`)
// => text-center text-bold text-gray-500

ow`divide(y-2 blue-500 opacity(75 md:50))`
// => divide-y-2 divide-blue-500 divide-opacity-75 md:divide-opacity-50

ow`w(1/2 sm:1/3 lg:1/6) p-sm`
// => w-1/2 sm:w-1/3 lg:w-1/6 p-sm

Some directives like ring need to be applied as is. For that case you can use the special & directive which is replaced with the current prefix:

ow`ring(& ping-700 offset(4 ping-200))`)
// => ring ring-ping-700 ring-offset-4 ring-offset-on-ping-200

I think it would be good if both libraries would support the same string syntax. I try to tackle this on the weekend. But as oceanwind has a different parsing approach it may take some time. I'll report my findings ...