[unplugin] Invalid @ rule body when using dynamic styles in pseudo elements

[sergiocarneiro]

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:

stylex/packages/@stylexjs/unplugin/src/index.js

Lines 55 to 66 in cfe4cdd

	function processCollectedRulesToCSS(rules, options) {
	if (!rules || rules.length === 0) return '';
	const collectedCSS = stylexBabelPlugin.processStylexRules(rules, {
	useLayers: !!options.useCSSLayers,
	enableLTRRTLComments: options?.enableLTRRTLComments,
	});
	const { code } = lightningTransform({
	targets: browserslistToTargets(browserslist('>= 1%')),
	...options.lightningcssOptions,
	filename: 'stylex.css',
	code: Buffer.from(collectedCSS),
	});

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.

[matclayton]

We just had the exact same issue and it took us a long time to locate the source of the issue.

[skovhus]

@nmn we just hit this... Is the proposed solution okay with you?