@apply arguments

[rebelwolfson]

Good time of day, everyone!
I beg my pardon in case there is the same issue already, but brief search gave me nothing similar.
So, I've recently encountered the issue, when I have css-variables name collision. Let's consider the following (simplified) situation:

.my-custom-class-one {
  @apply scale-x-[--x] scale-y-[--y]
}

.my-custom-class-two {
  @apply translate-x-[--x] translate-y-[--y]
}

And the following jsx:

<div
  class="my-custom-class-one my-custom-class-two"
  style={{
    '--x': 1.3,
    '--y': 1.5,
  }}
/>

So, problems here are following:

1. One of classes will be incorrect (translation could be valid only for metric value, scale could not be correct for px metric, for example)
2. One could not specify variables for custom classes independently.

There are, obviously, workarounds, like having css vars be named differently or override TW utility classes in place. But these are all just avoiding the problem, because custom classes feel like some kind of functions of CSS. They encapsulates some semantic visuals, like, i.e. my-kit-button or my-kit-active... Thus, developer should not be obliged to know hidden implementation of these functions.

It could be exceptionally great to have an ability to have some solution to this problem. For example, one could specify arguments to such class:

.my-custom-class-@x-@y {
  @apply scale-x-[--@x] scale-y-[--@y];  
}

And then use it in the following way:

<div
  class="my-custom-class-[scalex]-[scaley]"
  style={{
    '--scalex': 1.3,
    '--scaley': 1.5,
  }}
/>

Or something like this... Obviously this is not only about css vars, but all the custom values. May be it is also worth to consider some default values for arguments in order to reduce boilerplate.

Again, I am sorry for rising this, in case it is already considered or have some obvious solution... And, as usual, thank you for such a great tool, it is a joy to work with it!