CSS variables under non-media query conditions

[wereHamster]

I can use this pattern to re-define css variables under certain media query conditions:

export const colors = stylex.defineVars({
  primaryText: {
    default: 'black',
    ['@media (prefers-color-scheme: dark)']: 'white'
  },
});

however this does not seem to work if I try to use a condition like :root[data-theme='dark']. The generated code is almost correct, but not quite:

@layer priority1 {
  :root, .1flc6p9 {
    --1icxntc: url("data:image/png;base64,...");
  }

  :root[data-theme="dark"] {
    & :root, & .1flc6p9 {
      --1icxntc: url("data:image/png;base64,...");
    }
  }
}

There's the extra :root that prevents that CSS from working correctly. Is there any particular reason why the plugin generates that particular shape of CSS?

[wereHamster]

Furthermore, if I try to use such a condition in a regular stylex.create() expression, eg:

const styles = stylex.create({
  root: {
    color: "red",

    ":root[data-theme='dark']": {
      color: "blue"
    },
  },

Then this plugin generates code like this:

@layer priority1 {
  .1nrtymr {
   color: red;
  }

  .xk6xt4:root[data-theme="dark"] {
    color: blue;
  }
}

[Dwlad90]

Hi @wereHamster,
I checked your examples with the official StyleX library and both options were not working for me. Maybe you can check if your example with original babel plugin works correctly.

Also, for a more detailed analysis, I would like to receive a link to a minimal reproduction of the problem.

[wereHamster]

https://github.com/wereHamster/stylex-root-condition

• npx rollup -c rollup.config.js
• npx serve

I expect the text to be blue, because the html element has a data-theme="dark" attribute, but its red. The code is using the SWC StyleX plugin, but you can change a few lines in rollup.config.js to switch to the official plugin. Both behave the same.

[Dwlad90]

I see that you have opened a similar discussion in the official repository as well. After the StyleX team finds a solution to this problem, I will also add it to this plugin.