Support multiple @apply calls within a single rule

[pheuter]

@layer components {
  .btn-primary {
    @apply flex justify-center py-2 px-4 border border-transparent rounded-full text-base font-semibold bg-overnight-1 text-gray-1;
    @apply hover:text-white hover:shadow-md;
    @apply active:bg-overnight-5 active:text-gray-1;
    @apply disabled:text-gray-4 disabled:bg-transparent disabled:border-gray-4 disabled:opacity-50 disabled:cursor-default disabled:shadow-none;
    @apply focus:outline-none;
    @apply transition duration-100 ease-in;
  }
}

While the above custom component used to work fine, tailwindcss-jit doesn't seem to like multiple @apply statements for a single component, and will end up generating css with classes from only the last @apply call, which in the example above is simply the transition information.

Obviously not a showstopper, but would be nice to be able to spread out larger components across multiple @apply calls without fitting everything on a single line.

[nikuscs]

Yeah, iv noticed this as well, i usually love to organize my applies by their category. Ex: Dark Mode, LG, SM etc.

[pheuter]

Have found a workaround in the meantime:

.cs-btn-primary {
  @apply flex justify-center py-2 px-4 border border-transparent rounded-full text-base font-semibold bg-overnight-1 text-gray-1
    hover:text-white hover:shadow-md
    active:bg-overnight-5 active:text-gray-1
    disabled:text-gray-4 disabled:bg-transparent disabled:border-gray-4 disabled:opacity-50 disabled:cursor-default disabled:shadow-none
    focus:outline-none
    transition duration-100 ease-in;
}

[adamwathan]

Good catch! I've updated the title to something that's clearer for me as a maintainer and will add this to our todo list 👍🏻

[barnabasmolnar]

Hmm, what's pretty interesting here is that when I extend this component with another apply item (say @apply mx-4), then jest aptly complains that

margin-left: 1rem;
margin-right: 1rem;

are missing from the css file. When I add it, the test passes.

To me, this would suggest that the actual rule generation works as expected, so whatever goes wrong must do so after the fact. 🤔

[adamwathan]

Should be ~fixed in #141 and released now in v0.1.7! There are still a few things we need to iron out with @apply in general, mostly related to combining @apply with other declarations in the same rule but that's captured in #35 👍