CSS custom media not working in development mode

[azat-io]

I created a demo repo:
https://github.com/azat-io/lightningcss-custom-media

Look it up please.

If you run the command pnpm start, @custom-media will not work.
But if you build the project with pnpm build, everything will work correctly.

[devongovett]

Unfortunately, the Vite plugin can only process one file at a time so @custom-media defined in a separate file cannot work. Vite would need to switch to using the Lightning CSS bundler in order for us to make this work. Please see vitejs/vite#11029

[azat-io]

@devongovett This code also not works in development mode:

@custom-media --screen-tablet (width >= 860px);

body {
  background: blue
}

@media (--screen-tablet) {
  body {
    background: red;
  }
}

[devongovett]

Seems to work in the playground.

Make sure that you are setting a browserslist though, or nothing will be compiled. Even though no browser supports@custom-media currently, we need to compile only based on targets for forward compatibility.

[azat-io]

@devongovett I set browserslist but nothing changed.

I updated my repo: https://github.com/azat-io/lightningcss-custom-media

Could you try to run this project?

1. pnpm install
2. pnpm start

I expect a red screen but it's blue.