Incorrect substitutions with @apply

[brianhelba]

I'm trying to use daisyUI to style some HTML which I do not have the ability to edit directly. Accordingly, I'm building CSS selectors to match the existing structure of the HTML and adding daisyUI styles with @apply.

I'm encountering problems when attempting to @apply the .input class, but I suspect the issue is more general.

Given the input CSS:

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

/* Any ".myfield" element should be treated as ".input" 
   Place this outside a @layer to ensure it's always built. */
.myfield {
    @apply input;
}

The tailwindcss CLI emits output CSS containing:

.myfield {
  flex-shrink: 1;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 2;
  line-height: 1.5rem;
  border-width: 1px;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 0;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  border-radius: var(--rounded-btn, 0.5rem);
}

.myfield-group > .input {
  isolation: isolate;
}

.myfield-group > *,  
  .myfield-group > .input {
  border-radius: 0px;
}

.myfield[list]::-webkit-calendar-picker-indicator {
  line-height: 1em;
}

.myfield:focus {
  outline: 2px solid hsla(var(--bc) / 0.2);
  outline-offset: 2px;
}

.myfield-disabled,  
  .myfield[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  --tw-text-opacity: 0.2;
}

.myfield-disabled::-moz-placeholder, .myfield[disabled]::-moz-placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}

.myfield-disabled::placeholder,  
  .myfield[disabled]::placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}

Note, the .myfield rule is exactly what's desired, but the additional rules (like .myfield-group > .input and .myfield-disabled, .myfield[disabled]) should not be created, as these class names do not actually exist anywhere.

There might actually be two different bugs here:

• Things like the daisyUI source rule .input-group { > .input } are being emitted as .myfield-group > .input. I cannot figure out why this is happening.
• Things like the daisyUI source rule .input { &-disabled, &[disabled] } are being emitted as .myfield-disabled, .myfield[disabled]. This definitely seems like a bug, but it makes sense that the @apply rule might be substituting the .input rule for .myfield before PostCSS Nested transforms the &-disabled sub-rule.

---

My example uses a rule for .myfield, but my actual use case also has rules for selectors like input[type='text'], which outputs the rule input[type='text']-group, which is not even valid CSS. I used the .myfield example because it's easier to understand the substitutions taking place.

---

I've verified that this failure occurs both with the Tailwind CLI build process and with a PostCSS + Parcel build process (which is what I'm actually using). For rules that generate invalid CSS, the Tailwind CLI completes successfully, while the PostCSS + Parcel is not even able to build. For the example here, the builds both complete, since they're still valid CSS.

Here's a repo to reproduce this: https://github.com/brianhelba/daisy-apply-bug

[brianhelba]

It appears that this was totally fixed by the upstream change: tailwindlabs/tailwindcss#9107

When that's released, this issue should be resolved for daisyUI (which makes heavy use of multiple-class selectors).