Cannot build using ?url imports

[predaytor]

The Vite ?url import (vitejs/vite#15259) is used to manually include the asset URL without a side-effect import.

Running pnpm dev is fine, but the production build failed.

Stackblitz (https://stackblitz.com/edit/remix-run-remix-mqrbqi?file=app%2Froot.tsx)

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

export const links: LinksFunction = () => [
	// Preload CSS as a resource to avoid render blocking
	{ rel: 'preload', href: styles, as: 'style' },

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

Console output:

❯ pnpm build

> @ build /home/projects/remix-run-remix-mqrbqi
> remix vite:build

vite v5.2.2 building for production...
✓ 83 modules transformed.
warnings when minifying css:
Unknown at rule: @stylex
x Build failed in 1.13s
Error [RollupError]: [vite-plugin-stylex] [plugin vite-plugin-stylex] Could not find related JS chunk for CSS file assets/index-BuzpK1ML.css.
    at getRollupError (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/parseAst.js:527:41)
    at Module.error (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/parseAst.js:523:42)
    at Object.error (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:19403:33)
    at Object.generateBundle (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/vite-plugin-stylex@0.8.0_@stylexjs+stylex@0.5.1_vite@5.2.2/node_modules/vite-plugin-stylex/dist/index.mjs:225:30)
    at async Bundle.generate (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:17967:9)
    at async eval (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:20504:27)
    at async catchUnfinishedHookActions (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:19932:16)
    at async Module.build (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/vite@5.2.2_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:67299:22)
    at async viteBuild (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.2/node_modules/@remix-run/dev/dist/vite/build.js:212:5)
    at async build (/home/projects/remix-run-remix-mqrbqi/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.2/node_modules/@remix-run/dev/dist/vite/build.js:236:3) {
  code: 'PLUGIN_ERROR',
  plugin: 'vite-plugin-stylex',
  hook: 'generateBundle',
  [Symbol(augmented)]: true
}
 ELIFECYCLE  Command failed with exit code 1.

[predaytor]

Also when using this strategy to import css - HMR does not work. Using side-effect import works fine.

[HorusGoul]

This might be solved in 0.8.1 (https://github.com/HorusGoul/vite-plugin-stylex/releases/tag/vite-plugin-stylex%400.8.1) for Remix. I don't have a big enough project in Remix to try, but I added a bunch of tests to test both the build and dev environments. It should work.

Also when using this strategy to import css - HMR does not work. Using side-effect import works fine.

Wasn't able to reproduce this issue, both in tests and 🤔

---

I'll close for now, let me know if that worked!

[predaytor]

Can confirm ?url import is working properly. But the HMR problem remains. I will open another issue when I find out the bug (maybe it's related to remix). Thx!

[predaytor]

Found a problem, it is related to the use of preload link:

on initial dev startup:

<link rel="preload" href="/app/styles/index.css" as="style">

after hmr update:

<link rel="preload" href="http://localhost:3000/app/styles/index.css?t=1711437214384" as="style">

So that's definitely a problem with remix.

In the meantime, we can disable preloading for dev mode:

export const links: LinksFunction = () => [
	...(!import.meta.env.DEV ? [{ rel: 'preload', href: $styles, as: 'style' }] : []),
];