Version mismatch issue: Types have separate declarations of a private property '_opaque'

[cerpinn]

Describe the issue

When using react-strict-dom with TypeScript, using VarGroup with css raises this error.

Expected behavior

No type errors.

Steps to reproduce

Use the tokens.stylex.ts from RSD's example in a newly created TypeScript project, with fresh @stylexjs/stylex installation (this causes a version mismatch).

import type { VarGroup } from "@stylexjs/stylex";
import { css } from "react-strict-dom";

export const tokens: VarGroup<{
  squareColor: string;
  textColor: string;
}> = css.defineVars({
  squareColor: "red",
  textColor: {
    default: "darkred",
    "@media (prefers-color-scheme: dark)": "lightred",
  },
});

Test case

No response

Additional comments

Replacing import { css } from "react-strict-dom"; with import css from "@stylexjs/stylex"; fixes the issue of course. It's the import from different module (react-strict-dom instead of @stylexjs/stylex) that causes the error.

This is actually a version mismatch error. it looks like react-strict-dom is using stylex 0.6.0, but my stylex dependency is at 0.6.1. I think moving stylex to peer dependencies would be the right call here but maybe there's a reason it's a direct dependency. If it can't be moved to peer deps, then some sort of warning or note or compatibility table would be nice to remind the user to install the right versions.

Also, maybe unrelated question: Is the css export from react-strict-dom necessary? Couldn't it be made to just work with normal stylex imports?

Thank you.

[nmn]

Type 'StyleXVar<string>' is not assignable to type '_StyleXVar<string>'

This seems to be the core issue. Let me investigate.