LightningCSS does not work in dev mode

[predaytor]

Stackblitz (https://stackblitz.com/edit/remix-run-remix-vneo6e?file=app%2Froutes%2F_index.tsx)

Post-processing with LightningCSS does not work in dev mode. The production build works as expected.

const styles = stylex.create({
  x: {    
     color: 'lch(from pink calc(l + 10%) c h)',  
  },
});

css output:

color: lch(from pink calc(l + 10%) c h);

should be:

color: lch(from pink calc(l + 10%) c h);
color: lab(93.7873% 24.4367 3.75943);

Notice the defined CSS in the regular imported stylesheet (in our case the main import /styles/index.css), the post-processing is working properly.

[HorusGoul]

Could you try vite-plugin-stylex@0.9.0-next.0 to see if the plugin works better with Lightning CSS?

See the changelog just in case the breaking changes affect your project: https://github.com/HorusGoul/vite-plugin-stylex/blob/waitForRequestsIdle-refactor/packages/vite-plugin-stylex/CHANGELOG.md

[predaytor]

@HorusGoul same behavior, dev mode doesn't apply lightningcss post-processing.

[HorusGoul]

@predaytor Just released 0.9.0-next.1, this one works as expected in the Stackblitz you shared (StyleX generated style and the .primary styles have the same result)

I believe any future errors related to Lightning might come from either Vite or Lightning themselves, there's not a lot more I can do from this plugin :thinking:

[predaytor]

thx!