Specifity with media queries

[edamascus]

In the Deterministic resolution section, it is mentioned that in StyleX "The last style applied always wins.". Does this also work for declarations within media queries?

For example, if I have the following code:

const md = '@media (min-width: 769px)';

const styles = stylex.create({
  base: {
    padding: {
      default: 20,
      [md]: 40,
    },
  },
  extended: {
    paddingBlockEnd: 120,
  },
});

When applying the styles to the element as follows:

<div {...stylex.props(styles.base, styles.extended)}>

I expected the paddingBlockEnd: 120 to always win because it is the last applied style. However, the paddingBlockEnd that wins in [md] is 40 and the 120 only wins in default.

When I include the same media queries as follows, the paddingBlockEnd: 120 wins in both cases:

const styles = stylex.create({
  base: {
    padding: {
      default: 20,
      [md]: 40,
    },
  },
  extended: {
    paddingBlockEnd: {
      default: 120,
      [md]: 120,
    },
  },
});

[nmn]

I expected the paddingBlockEnd: 120 to always win

This is the expected bahavior.

However, the paddingBlockEnd that wins in [md] is 40 and the 120 only wins in default.

This seems like a bug. Let me investigate.

[nmn]

QQs:

1. What version of StyleX are you using?
2. Are you seeing the bug during development or also for production builds?

[nmn]

I just tried to reproduce this issue and it's working as expected. You're like on v0.3.0 and seeing this issue during development. The issue is specific to the runtimeInjection of styles in 0.3.0 AFAIK.

[edamascus]

I am on version 0.3.0 as I had issues when updating the project to the latest version.

I tested the production build and I can confirm that this is working as expected. The issue only appears in development.

[nmn]

Thanks for the confirmation.

I'm working to create a 0.5.0 beta within a few days which should fix the Vite problem.