CSS Minification Warning in FluxUI During npm build

[DaW-S]

Flux version

v2.0.1

Livewire version

v3.5.20

Tailwind version

v4.0.7

What is the problem?

Hey folks,

After upgrade to Flux version 2 I'm getting warning when I run npm run build.

vite v6.1.1 building for production...
✓ 53 modules transformed.
rendering chunks (1)...warnings when minifying css:
▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:2:145636:
      2 │ ...or:var(--color-zinc-300)}:where(){width:calc(var(--spacing)*5);h...
        ╵                                    ^```

### Code snippets

app.css
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@plugin '@tailwindcss/forms';

@theme {
  --font-sans: Inter, sans-serif;

  --color-custom-dark-green: #043b1d;
  --color-custom-medium-green: #56751b;
  --color-custom-light-green: #719430;

  --border-color-custom-dark-green: #043b1d;
  --border-color-custom-medium-green: #56751b;
  --border-color-custom-light-green: #719430;

  --color-accent: var(--color-slate-700);
  --color-accent-content: var(--color-slate-700);
  --color-accent-foreground: var(--color-white);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility race-description {
  @apply text-lg;

  & h1 {
    @apply text-3xl font-bold;
  }

  & h2 {
    @apply text-2xl font-semibold;
  }

  & h3 {
    @apply text-xl font-medium;
  }

  & p {
    @apply leading-normal;
  }

  & a {
    @apply text-blue-600 hover:underline hover:text-blue-700 hover:font-semibold;
  }

  & li[data-list='ordered'] {
    list-style-type: decimal;
    list-style-position: inside;
    @apply pl-2;
  }

  & li[data-list='bullet'] {
    list-style-type: disc;
    list-style-position: inside;
    @apply pl-2;
  }
}

How do you expect it to work?

Before upgrade to Tailwind 4 and Flux 2 did not get this warnings.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@DaW-S thanks for reporting! I've just run an npm run build and I'm not getting any errors. You sure the issue isn't related to your app and the Tailwind v4 upgrade? If it is Flux, can you share your Vite config, so we can see how you're doing your minification (if it's different to the default)?

[bzarzuela]

I experienced this error as well. I can't remember exactly what I did to resolve it, but I remember it being something related to the Flux upgrade guide. I remember thinking that I should've finished the upgrade guide first before trying to do the whole npm run build to check if everything was working well.

I'm not 100% sure at this point, but I think it was because I hadn't renamed @fluxStyles to @fluxAppearance yet on my project. Hope this helps, my general advice is to run through the whole upgrade guide before trying to compile your assets.

[DaW-S]

I'm not using dark mode in my app so I deleted @fluxStyles and I'm not using @fluxAppearance at all.

Here is my Vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Btw I've just noticed another think. When I don't have
@custom-variant dark (&:where(.dark, .dark *));
In my resources/app.css the app is running in dark mode. After I add it to app.css it is switched back to light mode.

Like I said I don't have @fluxAppearance in my layout template. But even with @custom-variant dark (&:where(.dark, .dark *)); in app.css and @fluxAppearance I'm still getting the same error during build.

Thanks for your help.

[bzarzuela]

One more thing that came to mind as I was troubleshooting an HMR issue.

Double-check your NPM dependencies if they are on the correct version. I do remember doing an npm update at one point when I saw unexpectedly low versions of dependencies. Turns out I was using node v21, upgraded to v22 then did an npm update again to bring in the updated dependencies.

Long shot, but may have been one of the things that eventually resolved this problem for me indirectly.

[joshhanley]

@DaW-S Tailwind by default uses media queries to detect your system theme, so either need to:

• add @custom-variant dark (&:where(.dark, .dark *)); to tell Tailwind to allow only manual toggling of dark mode using CSS selectors https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
• or you can disable it all together by adding @custom-variant dark (&:is()); which tells Tailwind to now allow any dark selectors

Flux's dark mode depends on Tailwind's dark mode CSS selectors, hence why we need @custom-variant dark (&:where(.dark, .dark *));.

Hope that makes sense.

Re the minification issue, your Vite config looks fine. It might be worth changing over to Tailwind's Vite plugin though (I'm guessing you're still using PostCSS), as it might fix the issue. See here for details https://tailwindcss.com/docs/installation/framework-guides/laravel/vite

You will need to remove your postcss.config.js and any postcss packages from your npm installs.

Can you see if that fixes the issue and let us know?