composer php - npm run build returns warnings when minifying css on latest Laravel with Flux and Tailwind project - Stack Overfl

admin管理员组

文章数量:1344313

the whole project was building without much problems but since one or two days (and most probably after composer & npm) update/upgrades) it will return the following:

npm run build

> build
> vite build

vite v6.2.5 building for production...
✓ 2 modules transformed.
Generated an empty chunk: "app".
rendering chunks (1)...warnings when minifying css:
▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:7:153265:
      7 │ ...or:var(--color-zinc-100)}:where(){width:calc(var(--spacing)*5);h...
        ╵                                    ^


public/build/manifest.json              0.27 kB │ gzip:  0.14 kB
public/build/assets/app--Cil65mr.css  190.86 kB │ gzip: 26.36 kB
public/build/assets/app-l0sNRNKZ.js     0.00 kB │ gzip:  0.02 kB
✓ built in 607ms

the whole project was building without much problems but since one or two days (and most probably after composer & npm) update/upgrades) it will return the following:

npm run build

> build
> vite build

vite v6.2.5 building for production...
✓ 2 modules transformed.
Generated an empty chunk: "app".
rendering chunks (1)...warnings when minifying css:
▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:7:153265:
      7 │ ...or:var(--color-zinc-100)}:where(){width:calc(var(--spacing)*5);h...
        ╵                                    ^


public/build/manifest.json              0.27 kB │ gzip:  0.14 kB
public/build/assets/app--Cil65mr.css  190.86 kB │ gzip: 26.36 kB
public/build/assets/app-l0sNRNKZ.js     0.00 kB │ gzip:  0.02 kB
✓ built in 607ms

a fresh project doesn't return that css-syntax-error - it does a "Generated an empty chunk: "app".", tho.

here's my package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite dev",
        "watch": "vite build --watch"
    },
    "dependencies": {
        "@tailwindcss/vite": "^4.1.1",
        "autoprefixer": "^10.4.21",
        "axios": "^1.8.4",
        "concurrently": "^9.1.2",
        "laravel-vite-plugin": "^1.2.0",
        "tailwindcss": "^4.1.1",
        "vite": "^6.2.5"
    },
    "optionalDependencies": {
        "@rollup/rollup-linux-x64-gnu": "4.39.0",
        "@tailwindcss/oxide-linux-x64-gnu": "^4.1.1",
        "lightningcss-linux-x64-gnu": "^1.29.3"
    }
}

Does anyone know how to fix this error? Any help is highly appriciated.

• npm
• composer-php
• tailwind-css-4
• laravel-12

Share Improve this question Follow asked yesterday Michael KocurekMichael Kocurek 10511 silver badge1212 bronze badges 2

• If this appeared after an update, try downgrading the version and testing which is the last working version. I believe the TailwindCSS update might be causing this issue among your packages. Which version did you upgrade from and to? What is the exact code that I can use to reproduce the error message? – rozsazoltan Commented yesterday
• 1 The setting shown in the error message :where(){width:calc(var(--spacing)*5);h... suggests that the issue was caused by using the size-5 class --> .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } - A reproduction is needed. – rozsazoltan Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

@rozsazoltan: your last comment solved the problem. However, I still can't figure out how you came to the conclusion that it has to be the size-5 class - which is was.

So what happened? I have recreated a flux component with some heavy customization - if you want to reproduce it, below you find the code that caused the error - and had [:where(&)]:size-5 in a elements class.

How to reproduce the problem: just place the following in your blade file and run npm run build

<svg class="shrink-0 [:where(&amp;)]:size-5 animate-spin" wire:loading="" wire:target="search" data-flux-icon="" xmlns="http://www.w3./2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

Thank you for pointing out that the issue has to be related to the size-5 class.

npm run build still prints Generated an empty chunk: "app". which I don't know why but the process for minifying the css works.

本文标签：