[v4][cli] The --minify and --optimize options remove CSS from output

[MariusVatasoiu]

I have the following tailwind file and I get two different results when I use or not the --minify or --optimize flags.

@import "tailwindcss";

@custom-variant dark {
  &:where(.dark, .dark *) {
    @slot;
  }
  @container style(--dark-mode) {
    @slot;
  }
}

For this HTML:

<div class="dark:hidden">Hello</div>

Without the --minify or --optimize flags, I get:

@layer utilities {
  .dark\:hidden {
    &:where(.dark, .dark *) {
      display: none;
    }
    @container style(--dark-mode) {
      display: none;
    }
  }
}

With --minify or --optimize flags, I get:

.dark\:hidden:where(.dark,  .dark *){
  display:none;
}

The @container style(--dark-mode){...} part is removed, even though I need it for shadow DOM. If I remove &:where(.dark, .dark *) {...}, then I lose support for Light DOM in Firefox and older Chrome and Safari versions.

The issue seems to be in the optimize mechanism, since minify means minify + optimize.

[RobinMalfait]

Hey!

This might be a Lightning CSS bug.

I first thought that your input CSS is invalid. A container query using style(…) should contain a valid condition and --dark-mode on its own is not. If you provide it the value you want to compare it to.

But according to the spec the value could be omitted and evaluates to true.

As a workaround until the bug is fixed upstream, one thing you can do is change the original implementation with a value.

  @import "tailwindcss";

  @custom-variant dark {
    &:where(.dark, .dark *) {
      @slot;
    }
-   @container style(--dark-mode) {
+   @container style(--dark-mode: 1) {
      @slot;
    }
  }

The value will depend on what you set the value to.

Will keep this open a little longer and will open an issue on Lightning CSS's issue tracker.

[MariusVatasoiu]

You are right, using @container style(--dark-mode: 1) works as expected.

It's funny because I've omitted the value knowing it can be omitted.

Thanks a lot for your help!