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