How to control / ensure the order of the generated CSS ?

[MoOx]

I have the following simple styles

// typography.stylex.ts
const media_desktop = `@media (min-width: ${1024 / remPx}rem)`;

export const fontSize = css.defineVars({
  largeTitle: {
    default: `${34 / remPx}rem`,
    [media_desktop]: `${26 / remPx}rem`,
  },
});

Then in actual styles

// typography.ts

export const typography = css.create({
  largeTitle: {
    fontSize: fontSize.largeTitle,
  },

(I simplified but I have also lineHeight & fontWeight etc)

This works properly during development with next dev. The generated CSS is as I would expect and look to something like this:

.x17smjld,
:root {
  --largeTitle-x1ci8mfk: 2.125rem;
}

@media (min-width: 64rem) {
  .x17smjld,
  :root {
    --largeTitle-x1ci8mfk: 1.625rem;

  }
}

.fontSize-xvrakco {
  font-size: var(--largeTitle-x1ci8mfk);
}

Problem is: when building my app with next export for production (static app), the generated css is different, thus the render as well

@media (min-width: 64rem) {
  .x17smjld,
  :root {
    --largeTitle-x1ci8mfk: 1.625rem;

  }
}

.x17smjld,
:root {
  --largeTitle-x1ci8mfk: 2.125rem;
}

.fontSize-xvrakco {
  font-size: var(--largeTitle-x1ci8mfk);
}

I have simplified the output of course, but you can see that media query is before the default. So all my font size supposed to be different on mobile and desktop (different font size) aren't. The default font size takes precedence, and the mq is ignored.

I have compared my entire generated CSS and that's the only diff I have... Check out the full online diff here

https://www.diffchecker.com/h2Bimv5x/

next dev or export both use the same next config except one use turbopack and export rely on webpack, but the exact same babel loader are used (same function from the same file - as visible in current RSD Next setup docs).

Edit: I have the same problem with the following

export const colorsMap = {
  white: "#fefefe",
  dark: "#1e1e1e",
  // ...
}

const _lightColors = {
  back: colorsMap.white,
  // ...
}
const _darkColors = {
  back: colorsMap.dark,
  // ...
}

export const colors = css.defineVars({
  back: {
    default: _lightColors.back,
    [mqs.media_dark]: _darkColors.back,
  },
  // ...
});
// in addition to auto/system, we offer light & dark forced mode
export const lightTheme = css.createTheme(colors, _lightColors);
export const darkTheme = css.createTheme(colors, _darkColors);

Which in dev, works perfectly as expected, but when exported, give this kind of css

@media (prefers-color-scheme: dark) {
  .x1lmohd9,
  :root {
    --back-xu578jw: #1e1e1e;
    /* ... */
  }
}
.x1lmohd9,
:root {
  --back-xu578jw: #fefefe;
  /* ... */
}

So auto/system is in light mode all the time...

Edit 2: the weirdest part is that "sometimes", in dev, the css is the same way as in export/production (I tested with or without output: export). I guess I am missing something about how the CSS is generated.

---

Does anyone have a clue about what could cause this issue ?

[MoOx]

Alright.... So for colors, I was importing an mq like this

// mqs.stylex.ts

import { css } from "react-strict-dom";

export const mqs = css.defineConsts({
  media_dark: "@media (prefers-color-scheme: dark)",
  supports_okhsl: "@supports (color: oklch(0% 0 0))",
});

// colors.stylex.ts

import { mqs } from "@/shared/styles/tokens/mqs.stylex";

// then later in css.create
{
  default: "...",
  [mqs.media_dark]: "...",
}

Not importing the mq and having it directly in the file solved the entire problem... That's weird and unexpected.

[necolas]

This might be an issue with StyleX and worth reporting there. Meta has had a few issues internally where dev/prod CSS order is different too

[MoOx]

I am having various problems, kind of "more and more" this days. Not sure what part is really the culprit in my setup.

The thing I can easily see is that generated html/dom have some classes that are missing in the generated css in my nextjs setup.
Some classes are present and visible in the "sourcemap" version, but are missing in the actual css generated with next. Really confusing and annoying.

I have found some issue in stylex repo about nextjs issues, but all are closed, apparently for good reasons.
So I feel alone in this, but at the same time, my setup is clearly "standard nextjs + RSD".
Sometimes killing next dev + restarting fix the issue, and sometimes it's not. But it's very hard to reproduce with shareable setup since it seems random.
I am eager to open an issue to debug this but I don't know where to start. I don't know if that's an issue related to the setup (RSD + next server components + client components ?) or not.

I have a repo that I cannot share publicly where an inconsistency is visible in production (Vercel) and locally, but I am pretty sure if I spend some times to extract some part, the bug will go away.

[necolas]

Do the issues happen on app startup or only after editing files? I'm wondering if the missing CSS could be due to the CSS file not regenerating in some circumstances

[MoOx]

Most of the time it is during dev, I think I never got this at startup but sometimes I found myself to do weird things to avoid this (eg: just create a new style entry).
Currently I have this issue with a given commit that is happening with or without .next cache, local dev or prod (vercel).