LightningCSS @custom-media does not work

[predaytor]

Stackblitz (https://stackblitz.com/edit/remix-run-remix-bgjqjp?file=app%2Fstyles%2Findex.css)

@custom-media does not work either in dev mode nor production build.

Steps to reproduce:

1. Uncomment @media (--mx-1) condtion in styles:

/routes/_index.tsx:

const styles = stylex.create({  
  x: {
    color: {
      default: 'gray',
      // '@media (width < 1024px)': 'blue',
      '@media (--mx-1)': 'blue',
    },
  },
});

Output log:

12:48:34 PM [vite] Internal server error: Custom media query --mx-1 is not defined
  Plugin: vite:css
  File: vite-plugin:stylex.css:4:1
  2  |  .x1p7i66b{font-family:system-ui,sans-serif}
  3  |  .xwxc2jc{line-height:1.8}
  4  |  @media (--mx-1){.x19mpqw0.x19mpqw0{color:blue}}
     |   ^

Note that the custom css file included in root.tsx processes @custom-media as expected:

/styles/index.css:

@import './reset.css';

@custom-media --mx-1 (width <= 1024px);

.primary {
  // ...

  @media (--mx-1) {
    color: blue;
  }
}

So the problem may be related to the wrong order of importing the styles, e.g. stylex build css simply ignores the @custom-media described in the imported /styles/index.css.

I also added an example of how manual css import using ?url can be handled in remix (so we handle import order from user perspective), but this plugin does not support this feature for manual stylex css import. (addressed in this issue https://github.com/nonzzz/vite-plugin-stylex/issues/11).

import { LinksFunction } from '@remix-run/node';

import $styles from '~/styles/index.css?url';

export const links: LinksFunction = () => [
    // Preload CSS as a resource to avoid render blocking
    // avoid HMR issues in dev mode
    ...(!import.meta.env.DEV ? [{ rel: 'preload', href: $styles, as: 'style' }] : []),

    // These should match the css preloads above to avoid css as render blocking resource
    { rel: 'stylesheet', href: $styles },
];

The example using custom import from similar package vite-plugin-stylex:

/styles/index.css:

@import './core/custom-media.css';
@import './core/reset.css' layer(core);
@import './core/fonts.css' layer(core);

@stylex stylesheet;

[nonzzz]

This issue may same as #14

[predaytor]

Unfortunately, the custom media does not work.. same errors. But can confirm that other LightningCSS related issues have been resolved, very thanks!

Here's a new Stackblitz based on an remix-demo example from the repo.

❯ pnpm dev

> remix-demo@ dev /home/predaytor/remix-stylex
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
1:37:24 PM [vite] Pre-transform error: Custom media query --mx-1 is not defined
1:37:24 PM [vite] Error when evaluating SSR module /app/Card.tsx: failed to import "vite-plugin:stylex.css"
|- SyntaxError: Custom media query --mx-1 is not defined

❯ pnpm build

> remix-demo@ build /home/predaytor/remix-stylex
> remix vite:build

vite v5.2.8 building for production...
✓ 85 modules transformed.
x Build failed in 922ms
SyntaxError: [vite-plugin-stylex] Custom media query --mx-1 is not defined
    at napi_new_instance (file:///home/predaytor/remix-stylex/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/node_modules/napi-wasm/index.mjs:770:19)
    at wasm://wasm/02920906:wasm-function[99]:0x37a6e
    at wasm://wasm/02920906:wasm-function[76]:0x1d52e
    at Object.bundle (file:///home/predaytor/remix-stylex/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/node_modules/napi-wasm/index.mjs:262:19)
    at bundleAsync (file:///home/predaytor/remix-stylex/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/async.mjs:72:23)
    at Module.bundleAsync (file:///home/predaytor/remix-stylex/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/wasm-node.mjs:74:10)
    at compileLightningCSS (file:///home/predaytor/remix-stylex/node_modules/.pnpm/vite@5.2.8_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:33250:46) {
  fileName: '',
  loc: { line: 9, column: 1 },
  data: { type: 'CustomMediaNotDefined', name: '--mx-1' },
  code: 'PLUGIN_ERROR',
  plugin: 'vite-plugin-stylex',
  hook: 'renderChunk'
}
 ELIFECYCLE  Command failed with exit code 1.

The only change I made was to remove <LiveReload /> as it was already obsolete in Remix Vite. https://remix.run/docs/en/main/future/vite#hmr--hdr

[nonzzz]

@predaytor My mistake. A typo cause it. I'll release a new version to fix it.

[predaytor]

@nonzzz thank you!

[nonzzz]

Try it now. v0.5.1 has been released.