Tailwindcss: variants dropping parts of the selector

[kabalage]

I'm working on a plugin that would allow setting the shadow color and alpha depending on the closest parent container. For now I'll use Tailwind's class names as I'm not sure yet how I'll name mine. The concept is this:

.shadow-md {
  box-shadow:
    0 4px 6px -1px hsla(var(--shadow-hue), var(--shadow-saturation), var(--shadow-lightness), var(--shadow-alpha-1)),
    0 2px 4px -1px hsla(var(--shadow-hue), var(--shadow-saturation), var(--shadow-lightness), var(--shadow-alpha-2));
}

.bg-gray-600 > * {
  --shadow-hue: 220;
  --shadow-saturation: 26%;
  --shadow-lightness: 14%;
  --shadow-alpha-1: 0.3;
  --shadow-alpha-2: 0.18;
}

The child combinator > is required because the element for which we define the background needs to cast a shadow defined in a parent.

Unfortunately this does not work when generating variants, because only className is used in variants. I could of course redefine all built in variants and do a custom parsing of selector but that does not feel right. Would appending the part that comes after the class name to the generated variant selectors break anything? What are your thoughts on this?

Keep up the good work, I like this framework a lot! :metal:

[adamwathan]

Hey! Can you share a simplified version of the plugin code for me to better understand?

[benface]

Hey @adamwathan I have the same issue in one of my plugins (hence my thumbs up on this issue), so I can give you a simplified example. Actually no need for a plugin, we can reproduce it with just CSS and @variants. Let's say we have a plugin that adds gap-* utilities, where a gap sets negative margin on the element that has the class, as well as positive margin on children of that element. The CSS would look like this:

.gap-1 {
  margin: -0.125rem;
}
.gap-1 > * {
  margin: 0.125rem;
}

Now if you wrap this in @variants hover {} and compile with Tailwind, you get:

.hover\:gap-1:hover {
  margin: -0.125rem;
}
.hover\:gap-1:hover {
  margin: 0.125rem;
}

...and this is what I would expect:

.hover\:gap-1:hover {
  margin: -0.125rem;
}
.hover\:gap-1:hover > * {
  margin: 0.125rem;
}

[adamwathan]

Ah okay, this might be fixed by coincidence when I tag the next release, will test.
On Jul 10, 2019, 5:16 PM -0400, Benoît Rouleau [e-mail], wrote:

Hey @adamwathan I have the same issue in one of my plugins (hence my thumbs up on this issue), so I can give you a simplified example. Actually no need for a plugin, we can reproduce it with just CSS and @variants. Let's say we have a plugin that adds gap-* utilities, where a gap sets negative margin on the element that has the class, as well as positive margin on children of that element. The CSS would look like this:
.gap-1 {
margin: -0.125rem;
}
.gap-1 > * {
margin: 0.125rem;
}
Now if you wrap this in @variants hover {} and compile with Tailwind, you get:
.hover\:gap-1:hover {
margin: -0.125rem;
}
.hover\:gap-1:hover {
margin: 0.125rem;
}
...and this is what I would expect:
.hover\:gap-1:hover {
margin: -0.125rem;
}
.hover\:gap-1:hover > * {
margin: 0.125rem;
}
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[kabalage]

Thank you @benface for stepping in, I'm sorry I wasn't clear enough. Looking forward to the next release, thank you @adamwathan for your time!

[adamwathan]

Just tested, works on master :) I'll see about getting a release out this week.

[adamwathan]

Should be fixed in v1.0.5:

https://github.com/tailwindcss/tailwindcss/releases/tag/v1.0.5