puik-theme 2.8.1: invalid media query `@media (max-width:var(--screen-xs))` is silently ignored by browsers

[mattgoud]

Summary

@prestashopcorp/puik-theme@2.8.1 ships an invalid @media rule that uses a CSS custom property in the media condition. CSS does not allow var() inside media query range features, so browsers discard the entire rule — the intended responsive font-size for extra-small screens never applies. It also surfaces as a build-time warning in any consumer using Lightning CSS / esbuild (e.g. Vite + @tailwindcss/vite).

Affected files

Both the standalone tokens file and the full bundle contain it:

• dist/theme.css
• dist/index.css

The exact rule:

@media (max-width:var(--screen-xs )){body{font-size:var(--text-sm)}}

(note also the stray space inside var(--screen-xs ))

Why it's a bug

Per the CSS spec, media feature values must be concrete <length>/<ratio>/etc. — custom properties (var()) are not permitted in media query conditions. As a result:

• Browsers ignore the whole @media block → the body { font-size: var(--text-sm) } rule for screens ≤ --screen-xs (320px) is never applied.

• Build tools warn about it. With Vite 6 + @tailwindcss/vite the production build prints:

  Found 1 warning while optimizing generated CSS:
  @media (max-width:var(--screen-xs )) {
                   ^-- Invalid media query
  

Steps to reproduce

1. Install @prestashopcorp/puik-theme@2.8.1.
2. @import "@prestashopcorp/puik-theme"; in a Tailwind v4 / Vite project.
3. Run vite build → "Invalid media query" warning.
4. In a browser, the font-size override below 320px never takes effect.

Suggested fix

Emit a literal length instead of the custom property (and drop the stray space), e.g.:

@media (max-width: 320px) { body { font-size: var(--text-sm) } }

If the breakpoint must stay token-driven, resolve --screen-xs to its value at build time rather than referencing var() in the media condition.

Environment

• @prestashopcorp/puik-theme: 2.8.1
• Consumer: Vue 3 + Vite 6.4 + @tailwindcss/vite 4 (Tailwind v4)