No Type Errors for invalid style value

[pckilgore]

const x: CSSProperties = {
  flexWrap: "nnowrap",
};

Results in an expected typeError but

const xStylex = stylex.create({
  test: {
    flexWrap: "nnowrap",
  },
});

Compiles without a problem.

Is there some special config I need to have for typescript?

Quite unexpected given:

[necolas]

Unfortunately the stylex compiler doesn't enforce this yet, so you won't get build errors, but it's on the roadmap to be fixed. However you should get type errors from TS or Flow

[nmn]

The specific issue here is that StyleX accepts arbitrary strings for accept CSS variables and Flow doesn't support template string types. The ESLint plugin should be catching invalid values and the Babel plugin will too soon.

[pckilgore]

Ahh, ok so I wasn't expecting the linter to be an essential component to obtain documented features here. I get errors from eslint now with the later example.

You might want to elevate that in the docs. It was a really bad first impression of what I thought was a key feature compared to alternatives.

[necolas]

Maybe the return value of defineVars could be opaque so that we could accurately type values where there is a fixed set. Internally to Meta there are legacy string vars but that could be special cased in the types at Meta. But we agree that it's not good that neither the type system nor the compiler currently surface issues like invalid values and invalid selectors.

[nmn]

@necolas defineVars already creates opaque types and what you described is already the path I'm following!

I have a PR up to allow "literal" variables that should help migrate away from string vars everywhere.

[aspizu]

will the compiler refuse to compile for invalid values, because that would stop us from using new css features, like the eslint plugin currently screams at me for using stuff like positionTryOptions: "flip-block"

[nmn]

We will have some way to ignore certain values.