Vite + React SPA: No styles rendered, missing docs?

[busticated]

hey there :wave:

thanks for pulling this together. i ran into weirdness trying to get things wired up in a simple demo project (basically this - react, react-router-dom, and vite).

i see that classnames - e.g. x6cbk37, x10l5d7b, etc - are being generated and assigned to my component but the main stylesheet (.css) file is not being appended / loaded. do i need to add an import or something? the docs:

For a basic SPA setup, you only need to add the plugin to your Vite config:

...imply that i do not.

edit: upon closer inspection, i see an empty style element 🤷‍♂️:

<style type="text/css" data-stylex="true"></style>

edit, edit: it works when building for production e.g. vite build && vite preview 🤔

<link rel="stylesheet" crossorigin="" href="/bits/index-jNj-DRTq.css">

thanks again 👍

[HorusGoul]

Hey! Can you upload a reproduction example?

[busticated]

@HorusGoul i can. in the meantime, it might be easier to point me at a known-working example. i see you have some for framework usage (remix, etc) but not a simple SPA. is there one out there you are aware of?

edit: nvm i think this is what i was looking for. not sure how i missed it 🤦‍♂️

my setup is basically the same. i’ll try yours when i get back in front of a computer 👍

[hendry91]

May I know are you able to use vite build --watch? when I use --watch, if I made changes and save, I will hit [vite-plugin-stylex] rule is not iterable.

[busticated]

@HorusGoul i tried to run the example project but ran into all sorts of errors. are you able to provide instructions on how to run them? i tried installing w/ pnpm and running w/ pnpm run dev from the root and from the apps/vite-demo directory but nothing worked (ex: Failed to resolve entry for package "vite-plugin-stylex". The package may have incorrect main/module/exports specified in its package.json, Missing script: "dev", sh: vite: command not found, etc).

[HorusGoul]

@busticated

1. pnpm install on the root of the monorepo
2. pnpm turbo run build on the root of the monorepo
3. cd apps/vite-demo to enter the folder of the Vite + React SPA demo
4. pnpm dev

This should work (steps followed in CI before running all tests).

[busticated]

@HorusGoul thanks - that got me up and running. your example vite-demo app works as expected out of the box. however, when you use a media query (as shown here), dev mode breaks as i described in my original post.

repro steps:

1. clone down and install the repo locally using your instructions
2. apply this diff locally

diff --git a/apps/vite-demo/src/theme.stylex.ts b/apps/vite-demo/src/theme.stylex.ts
index 0fc1af8..19a6a07 100644
--- a/apps/vite-demo/src/theme.stylex.ts
+++ b/apps/vite-demo/src/theme.stylex.ts
@@ -1,5 +1,10 @@
 import * as stylex from "@stylexjs/stylex";

+const DARK = '@media (prefers-color-scheme: dark)';
+
 export const tokens = stylex.defineVars({
-  primaryTextColor: "#000",
+  primaryTextColor: {
+    default: 'black',
+    [DARK]: 'white'
+  },
 });

3. run the dev server: pnpm dev
4. point your browser at http://localhost:5173/

you will see a DOM like:

note that the data-testid="card" element has stylex classnames assigned but those classnames do not correspond to any actual style definitions and thus the element is visually unstyled.

hope it helps - thanks again for working on this 🙏 👍

[HorusGoul]

@busticated

Oops, it seems like an issue with StyleX 0.3.0!

I tried your steps in main and in the #30 PR, 0.4.1 fixes the problem. We'll need to wait for it to get merged, OR, you can upgrade to 0.4.1 and override the @stylexjs/babel-plugin version to 0.4.1 as well (won't work for Remix or Qwik), see this comment: https://github.com/HorusGoul/vite-plugin-stylex/issues/29#issuecomment-1877476118

Thanks for the repro, it was very helpful :smile:

[busticated]

@HorusGoul nice! sounds good - thanks again for chasing this down 🙏 👍

[lecstor]

May I know are you able to use vite build --watch? when I use --watch, if I made changes and save, I will hit [vite-plugin-stylex] rule is not iterable.

@hendry91 did you ever work out what was causing this? I'm seeing it now with latest versions of everything but can find any reference to "rule is not iterable" anywhere..