how to define custom properties that do not inherit?

[chbybnwr]

something that compiles to this

@property --foo {
  syntax: "*";
  inherits: false;
}

[Arthur031221]

Put the @property registration in the app's global CSS entrypoint, then use --foo from StyleX. In the released StyleX 0.19.1 compiler, stylex.create emits a declaration and a var(--foo) reference as ordinary CSS; registering the property is a separate global CSS rule.

I installed @stylexjs/stylex and @stylexjs/babel-plugin 0.19.1 and compiled the StyleX rules. I also parsed the registration with PostCSS:

$ node compile-and-parse-stylex.js
StyleX CSS: .x1wdw563{--foo:red}
StyleX CSS: .xsi5bgv{color:var(--foo)}
global CSS: @property --foo { syntax: "*"; inherits: false; }

Add this to a global stylesheet that your app already loads:

@property --foo { syntax: "*"; inherits: false; }

Then set or consume --foo in StyleX styles. Keep the registration outside stylex.create; it is a stylesheet at-rule, not a style declaration.