Inconsistency between variant and class

[Sil Veltman]

Describe the bug

When setting a theme with a classname (my-theme) it is applied to the component itself and all children.
When using a theme variant (my-theme:my-property) it only applies to the children, not the element itself.

Tailwindplay example: https://play.tailwindcss.com/3eCwjPyaf7

I think this is very inconsistent. Right now uit works like this:

.my-theme .my-theme\:my-property {
    padding-top: 0.375rem/* 6px */;
    padding-bottom: 0.375rem/* 6px */;
}

But I think it should be like this:

.my-theme .my-theme\:my-property,
.my-theme.my-theme\:my-property {
    padding-top: 0.375rem/* 6px */;
    padding-bottom: 0.375rem/* 6px */;
}

Or like this:

.my-theme .my-theme\:my-property {
    padding-top: 0.375rem/* 6px */;
    padding-bottom: 0.375rem/* 6px */;
}
.my-theme.my-theme\:my-property {
    padding-top: 0.375rem/* 6px */;
    padding-bottom: 0.375rem/* 6px */;
}

This last last one can be done in the following way (which is actually a frist-class tailwind feature, mentioned here: tailwindlabs/tailwindcss#8799 (comment)):

  addVariant("my-theme", [".my-theme &", "&.my-theme"])

Your minimal, reproducible example

https://play.tailwindcss.com/3eCwjPyaf7

Steps to reproduce

open tailwindplay

Expected behavior

Consistency in the 2 possible ways of applying a theme: with class or with variant

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

mac, brave

tailwindcss-themer version

3.0.1

Additional context

No response

[Ryan Clements]

Lmk if this fixes your issue. Sorry it took a while to get to this (things have been crazy on my end).

[github-actions]

🎉 This issue has been resolved in version 3.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀