tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Prototype: `@apply` strict mode

Open thecrypticace opened this issue 1 year ago • 0 comments

There's a lot of oddities around @apply, it's implementation, what it supports and doesn't. Ultimately this produces a lot of unexpected behavior because people expect it to work one way or another. The goal of @apply has generally been to copy declarations from a utility class. With further tweaks to apply we made it act as if were a "replacement" for writing those classes in the HTML. This has a lot of behavioral and implementation issues though given what you can do with selectors in CSS.

Here we've prototyped a strict mode for Apply which more concretely defines what it can and cannot do. None of these are errors currently but we will warn you if you try to do something that can produced unexpected or complex behavior.

Our goals are:

  • We still need to be able to apply built in utilities (coming from core plugins)
  • Apply simple custom classes coming from the utilities and components layers (or general user CSS)
  • When applying a utility it MUST NOT have more than one class in it's selector.
  • When applying a utility it MUST NOT have more than selector in it's rule.
  • We ignore variants when determining what passes and fails these checks. We look at the base class only.

thecrypticace avatar Sep 01 '22 14:09 thecrypticace