What is the best practice for using nested at-rules while defining variables?

[taphill]

I'm trying define variables in stylex and do the equivalent of this in css.

:root {
  --gray-1: #fcfcfd;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --gray-1: oklch(99.1% 0.0015 277.7);
    }
  }
}

I can't do this since you're not able to combine two different types of at-rules with an and

const SUPPORTS_P3 =
  "@supports (color: color(display-p3 1 1 1)) and @media (color-gamut: p3)";

const hexColors = {
  gray1: "#fcfcfd",
};

const oklchColors = {
  gray1: "oklch(99.1% 0.0015 277.7)",
};

export const colors = stylex.defineVars({
  gray1: { default: hexColors.gray1, [SUPPORTS_P3]: oklchColors.gray1 },
});

After some tweaking this is what I ended up doing which seems to work as expected, but I'm wondering if there is a better way?

const SUPPORTS_COLOR_P3 = "@supports (color: color(display-p3 1 1 1))";
const MEDIA_COLOR_P3 = "@media (color-gamut: p3)";

const hexColors = {
  gray1: "#fcfcfd",
};

const oklchColors = {
  gray1: "oklch(99.1% 0.0015 277.7)",
};

export const colors = stylex.defineVars({
  gray1: {
    default: hexColors.gray1,
    [SUPPORTS_COLOR_P3]: {
      default: null,
      [MEDIA_COLOR_P3]: {
        default: oklchColors.gray1,
      },
    },
  },
});

[nmn]

After some tweaking this is what I ended up doing which seems to work as expected, but I'm wondering if there is a better way?

What you ended up with is the suggested way to do what you want to do. It is a bit verbose but it is the only way to ensure the styles are fully consistent and account for random edge-cases.

We are continually investigating ways to provide cleaner syntax, but our highest priority at first is to make the styles work as expected with our current syntax. Future syntax will follow after we feel confident we're not leaving any edge-cases where the styles are not completely predictable.

In the meantime, please use the pattern you have arrived at.

---

In this specific case, have you considered not using the @supports query at all and just relying on @media (color-gamut: p3). Clearly no browser that doesn't support p3 colors would match that media query anyway?

[taphill]

Thank you for the explanation @nmn! That makes sense, I just wanted to ensure I wasn't overcomplicating things.

In this specific case, have you considered not using the @supports query at all and just relying on @media (color-gamut: p3). Clearly no browser that doesn't support p3 colors would match that media query anyway?

So, if I understand correctly, only older browsers would not support color display-p3, in which case those browsers would not have implemented the color-gamut media query either. In that case, you make a very valid point.