Weird output

[hauxir]

Describe the issue

I'm using stylex with the webpack plugin. The outputted css looks very odd. It seems to apply a bunch of :not(##) psuedo selectors to all the rules.

example output: .xswv624:not(##):not(##){transition:background .1s ease,box-shadow .1s ease,color .1s ease}.x5gkzjs:not(##):not(##){transition:background-color .2s ease}.xbjiv84:not(##): not(##){transition:box-shadow .1s ease,border-color .1s ease}

Expected behavior

To not have those extra pseudo selectors

Steps to reproduce

1. use stylex with react and webpack
2. compile using the suggested options: new StylexPlugin({ filename: 'styles.[contenthash].css', // get webpack mode and set value for dev dev: false, // Use statically generated CSS files and not runtime injected CSS. // Even in development. runtimeInjection: false, // optional. default: 'x' classNamePrefix: 'x', // Required for CSS variable support unstable_moduleResolution: { // type: 'commonJS' | 'haste' // default: 'commonJS' type: 'commonJS', // The absolute path to the root directory of your project rootDir: __dirname, }, }),

Test case

No response

Additional comments

No response

[necolas]

Duplicate of https://github.com/facebook/stylex/issues/285

To not have those extra pseudo selectors

Those pseudo-selectors are intentional and a polyfill for @layers. If you want to use the native @layers API, set useCSSLayers:true in the bundler plugin configuration.

I'm more concerned about seeing generated declarations like this:

transition:background .1s ease,box-shadow .1s ease,color .1s ease

Typically we disallow short-form properties because they can bloat generated CSS by not allowing common long-form values to be reused, and they can contribute to confusing style clashes. cc @nmn

[derekjwilliams]

To clarify, for me, in my Next.js 14 project, In the next.config.js file, I have:

module.exports = stylexPlugin({
  useCSSLayers: true,
  rootDir: __dirname,
})(nextConfig)