Getting the runtime error Invalid @ rule body when using dynamic styles in pseudo elements, such as:

const styles = stylex.create({
  repro: (var: string) => ({
    '::after': {
      color: var, // FAILS
    },
  }),
});

Note that we can still define pseudo elements, as long as we do not reference the dynamic variables:

const styles = stylex.create({
  repro: (var: string) => ({
    '::after': {
      color: "blue", // WORKS
    },
  }),
});

Steps to reproduce

1. In this repository, use the examples/example-vite-react project.
2. Add the following style:

const styles = stylex.create({
  repro: (color: string) => ({
    '::after': {
      color,
    },
  }),
});

3. npm run example:dev

Additional context

The error is being thrown by invoking lightningTransform on the processCollectedRulesToCSS function:

Inspecting the collected CSS that was being passed to processCollectedRulesToCSS, I noticed that the statements did not have the inherits property defined, which causes LightningCSS to throw ERROR: Invalid @ rule body:

@property --s7ux02 { syntax: "*"; inherits: true; } // WORKS

@property --s7ux03 { syntax: "*"; } // ERROR: Invalid @ rule body

Open in LightningCSS Playground

Proposed solution

Removing inherits: false was introduced in #978 to let variables be inherited on pseudo elements. Maybe we can just use inherits: true in these cases, instead of omitting the property.