Strange output generated by stylex with webpack

[adrian-novacescu]

Hi,

We started using stylex in our product and although it works great, the output of the css file looks strange.

.xdpqu6t:not(#\#){padding:8px var(--xk99hms)}
.xe3t0ma:not(#\#){padding:var(--x1gsase5) var(--x1cp0i28)}
.x9r1u3d:not(#\#):not(#\#){border-color:transparent}
.x6vskdb:not(#\#):not(#\#){border-color:var(--x4b0og2)}
.xixl9f9:not(#\#):not(#\#){border-radius:14px}
.xgqmno8:not(#\#):not(#\#){border-radius:16px}
.x11j6hjo:not(#\#):not(#\#){border-radius:var(--x149zaps)}
.x1jrafhy:not(#\#):not(#\#){border-radius:var(--x16ufu40)}
.x1uioq7m:not(#\#):not(#\#){border-radius:var(--x17sycxl)}
.x15tiq8k:not(#\#):not(#\#){border-radius:var(--x1m44fmx)}

I am using stylex": "0.4.1" since the storybook crashes with latest webpack version and latest version of stylex does not work with previous webpack.
However, I tried it with the latest version without storybook but the output looks the same.
Except from the weird format, everything works as expected. My styles are applied but it is really hard to debug it and also the size of the css is about 50% bigger due to that invalid id selector in the not pseudo-class.

I did a small node script that removes that after build and it works ok. However, in dev mode I still have them like this for each style.

Looking forward to your answer,
Adi

[adrian-novacescu]

I actually was able to update but I am still using @stylexjs/babel-plugin with version "0.4.1" since the last one crashes storybook. But the output file looks the same with "@stylexjs/stylex": "0.5.1"

[nucleartux]

What exactly is wrong with the output? If you are referring to #\#, it's a layers polyfill. You can read about it here or google it.
I suppose that when layers have wider support, the syntax will be changed to the normal @layer syntax. But here, we probably need to wait for comments from maintainers.

[adrian-novacescu]

Thanks. I heard about layers on this channel from other stylex users but I never used them.

[nmn]

Most bundler plugins allow you to configure it to use native CSS layers. We default to polyfill to maximize browser support.

[adrian-novacescu]

I checked for that option in the @stylexjs/webpack-plugin but I didn't find anything. Can you please give me a hint on where can I configure that? Since we are not using layers, we don't need the polyfill.

Thanks a lot for response and for all the work you do for the community.

[nmn]

Since we are not using layers, we don't need the polyfill.

The StyleX output depends on layers. You don't use it in your code. If you disable the polyfill, you'll just lose support for older browsers.

---

You can set the useCSSLayers option to false for the StyleX webpack plugin to disable the polyfill.

[adrian-novacescu]

Ok. Thanks a lot for your responses.