We have a blocking frontend build issue that needs immediate attention.
Summary (short):
npm run build:prod) produces Tailwind/PostCSS warnings and outputs invalid CSS.npm run build:dev script in package.json. The closest development build command is npm run build.Exact npm scripts from package.json:
npm run build:prod → Production build (Tailwind + PostCSS + Webpack) npm run build → Runs build:css + build:js in dev mode npm run build:css → Runs Tailwind + PostCSS npm run build:css:watch → Tailwind watch mode npm run build:js → Webpack dev build npm run lint → ESLint
Problem Observed: Tailwind/PostCSS outputs 103 warnings like:
.kt-menu-item.active > .kt-menu-link.& ^-- Expected identifier in class selector, got Delim('&')
Selectors affected:
Invalid media query also found:
@media (max-width: var(--screen-lg)) ^-- Invalid media query
Impact: • CSS output is malformed • UI menu active / toggle states may break visually • Production & development builds cannot be reliably used
Action Required:
.& suffix in CSS).Suggested Fix Example:
Incorrect: .kt-menu-item.active > .kt-menu-link.& { }
Correct (probably): .kt-menu-item.active > .kt-menu-link { }
Steps to reproduce:
npm installnpm run build:prodThe above issues affect the following items:
Platform: MacOS, Ubuntu & Fedora Desktops
Please fix and notify once resolved so I can re-test.
Thanks.
Hi,
We will include this fix in the upcoming Metronic version v9.3.5 soon.
Thanks