@apply does not work with multiple css definitions of the same selector

[RobinMalfait]

Describe the problem:

When you use @apply, and the rules contain multiple definitions for the same classes/key. For example:

.aspect-w-1 {
  position: relative;
}

.aspect-w-1 {
  --tw-aspect-w: 1;
}

Then only the contents of the last one is applied. I am assuming that this is because our lookup table has the key of aspect-w-1 and it just overrides it with the new data.

This behaviour results in issues where you can't @apply aspect ratio related classes: tailwindlabs/tailwindcss-aspect-ratio#2

Link to a minimal reproduction:

Opened a PR here: #3362 however the tests are passing and they work as expected. It seems that there is a difference between applying from user config or applying from external plugins. I am a bit confused about what is going on exactly.

In the mean time, here is a reproduction on the playground: https://play.tailwindcss.com/LMtlgPrsqU

[RobinMalfait]

When I manually add the aspect-ratio plugin styles in a test, I do get the expected behavior:

Input:

    .aspect-w-16 {
      position: relative;
      padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    }

    .aspect-w-16 > * {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .aspect-w-16 {
      --tw-aspect-w: 16;
    }

    .aspect-h-9 {
      --tw-aspect-h: 9;
    }

    .sixteen-by-nine {
      @apply aspect-w-16 aspect-h-9;
    }

Output:

    .aspect-w-16 {
      position: relative;
      padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    }

    .aspect-w-16 > * {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .aspect-w-16 {
      --tw-aspect-w: 16;
    }

    .aspect-h-9 {
      --tw-aspect-h: 9;
    }

    .sixteen-by-nine {
      position: relative;
      padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    }

    .sixteen-by-nine > * {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .sixteen-by-nine {
      --tw-aspect-w: 16;
      --tw-aspect-h: 9;
    }

---

However, when I reproduce it using the actual plugin (you can also see that behaviour in the playground: https://play.tailwindcss.com/LMtlgPrsqU) it results in the following:

Input:

@tailwind base;
@tailwind components;
@tailwind utilities;

.sixteen-by-nine {
  @apply aspect-w-16 aspect-h-9;
}

Output:

/* ... other tailwind styles */
/* ... the aspect ratio classes from the plugin are located here */

.sixteen-by-nine {
  --tw-aspect-w: 16;
  --tw-aspect-h: 9;
}

/* ... other tailwind styles */

This is the only result in the whole output.css file for sixteen-by-nine.
Purging is not configured, so it is not related to that either.

[thiras]

I confirm the bug. Is the fix in the roadmap of the next release?