Generated CSS is always suffixed with :not(#\#)

[vinceau]

Describe the issue

I'm migrating a project to use StyleX, and I'm defining styles as per usual like so:

const styles = stylex.create({
  container: {
    marginBottom: "20px",
  },
  dateInfo: {
    marginRight: "auto",
    marginLeft: "5px",
    opacity: 0.6,
    fontSize: "15px",
  },
  fixedCardHeight: {
    height: "200px",
  },
  markdownContainer: {
    color: "#ccc",
    maxWidth: "700px",
  },
});

However, when I inspect the generated CSS, every selector is appended with a trailing :not(#\#).

.x1qk1tsj:not(#\#) {
	color: #ccc
}

.x1jvydc1:not(#\#) {
	font-size: 15px
}

.x197sbye:not(#\#) {
	opacity: .6
}

.x1m3v4wt:not(#\#):not(#\#) {
	height: 200px
}

.xieb3on:not(#\#):not(#\#) {
	margin-bottom: 20px
}

.xd8780z:not(#\#):not(#\#) {
	margin-left: 5px
}

.xack27t:not(#\#):not(#\#) {
	margin-right: auto
}

.xrgej4m:not(#\#):not(#\#) {
	max-width: 700px
}

The more components that I migrate to use StyleX, the longer the :not(#\#) chain is for some selectors, with some selectors having 3 or 4. e.g.

.x1n2onr6:not(#\#):not(#\#):not(#\#) {
	position: relative
}

.x1m3v4wt:not(#\#):not(#\#):not(#\#):not(#\#) {
	height: 200px
}

I initially thought it was some form of disambiguation, but surely the randomly generated CSS selectors should be sufficient for that.

Expected behavior

I would assume the expected generated CSS to just be like:

.xrgej4m {
	max-width: 700px
}

.x1cnzs8 {
	padding-top: 20px
}

.x1dmp6jm {
	width: 80px
}

Steps to reproduce

I'm using the following packages:

{
    "@stylexjs/webpack-plugin": "^0.4.1",
    "@stylexjs/stylex": "^0.4.1"
}

but I was initially using v0.3.0 which also had this issue.

with the Webpack configuration:

    new StylexPlugin({
      dev: isDevelopment,
      unstable_moduleResolution: {
        type: "commonJS",
        rootDir: webpackPaths.rootPath,
      },
      appendTo: "style.css",
    }),

Additional comments

Why does it do this and is it by design? It makes all the CSS selector names really long and also greatly increases the size of the resulting CSS file.

[Daniel15]

Looks like this was added to adjust the specificity of the CSS rule when @layer support (added in 0.4.1) is not being used: https://github.com/facebook/stylex/blame/7d9d3b61cbd5f2d649d84ca0f2531791107365f3/packages/babel-plugin/src/index.js#L398

I haven't seen this internally at Meta so I wonder if some of the logic is specific to the open-source version.

[vinceau]

Is that polyfill logic supposed to create really long :not(#\#) chains like so?

.x1m3v4wt:not(#\#):not(#\#):not(#\#):not(#\#) {
	height: 200px
}

and does it actually change in behaviour when compared with just a single one:

.x1m3v4wt:not(#\#) {
	height: 200px
}

[Daniel15]

does it actually change in behaviour when compared with just a single one

Each :not(#\#) increases the specificity of the rule, meaning rules that have more of them will override the rules that have fewer. Repeating the class name (e.g. .x1m3v4wt.x1m3v4wt) would do that too. I suspect stylex is doing this to ensure that the classes are consistently applied in the same order, but I'm not sure. I'll leave that up to the stylex devs to comment on - I'm just a user of stylex. 😄

[nmn]

@Daniel15 is correct with the explainations. Using :not(#\#) is a polyfill for CSS Layers. Each :not(#\#) bumps the specificity by one ID selector. Repeating classNames wouldn't work because they don't bump the specificity enough. (.foo.foo has the same specificity as .bar:hover)

You can configure the Webpack plugin with useCSSLayers: true to generate CSS layers instead. This is supported in all modern browsers, but your styles may be broken in older browsers as a result.