Re: ⚠️ Build system broken — Prod & Dev builds failing / Invalid CSS selectors
We have a blocking frontend build issue that needs immediate attention.
Summary (short):
- Production build (
npm run build:prod) produces Tailwind/PostCSS warnings and outputs invalid CSS. - There is no
npm run build:devscript in package.json. The closest development build command isnpm run build. - Build output includes malformed CSS selectors and an invalid media query, affecting UI.
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:
- .kt-menu-link.&
- .kt-menu-label.&
- .kt-menu-toggle.& States affected: active, here, show
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:
- Fix invalid selectors (remove the
.&suffix in CSS). - Correct media query (CSS variables cannot be used directly inside media queries).
- After fixing, rerun:
- npm run build:prod
- npm run build
Suggested Fix Example:
Incorrect: .kt-menu-item.active > .kt-menu-link.& { }
Correct (probably): .kt-menu-item.active > .kt-menu-link { }
Steps to reproduce:
- Run
npm install - Run
npm run build:prod - Review Tailwind/PostCSS output errors
The above issues affect the following items:
- metronic-tailwind-html-demos
- metronic-tailwind-html-starter-kit
- metronic-tailwind-nextjs-landings
- metronic-tailwind-react-concepts
- metronic-tailwind-react-demos
- metronic-tailwind-react-starter-kit
Platform: MacOS, Ubuntu & Fedora Desktops
Please fix and notify once resolved so I can re-test.
Thanks.
Replies (1)
Hi,
We will include this fix in the upcoming Metronic version v9.3.5 soon.
Thanks