facebook / react-strict-dom

React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets
MIT License
3.03k stars 154 forks source link

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

Open alitnk opened 4 weeks ago

alitnk commented 4 weeks ago

Describe the issue

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

image

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 commented 2 weeks ago

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

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