Apply mutilple at-rules to the same element.

[wfwf1997]

You can also try the following codes in this sandbox:
https://codesandbox.io/p/sandbox/vigorous-firefly-mnrppk

I'm trying to apply several at-rules with different conditions to the same elements:

@media (min-width: 60px) {
  .my-container {
    width: 60px;
  }
}

@media (min-width: 400px) {
  .my-container {
    width: 400px;
  }
}

It is a quite common practice to make the element responsive. So I tried to make styles with griffel:

(To make things easier to notice, I used background color instead of width in the sample.)

const useStyles = makeStyles({
  container: {
    height: "24px",
    "@media (min-width: 60px)": {
      backgroundColor: "red",
    },
    "@media (min-width: 400px)": {
      backgroundColor: "blue",
    },
  },
});

But the it doesn't work and the container is always in red! So I looked into the style buckets:

<style media="(min-width: 400px)" data-make-styles-bucket="m"></style>
<style media="(min-width: 60px)" data-make-styles-bucket="m"></style>

Aha! The bucket for rule (min-width: 400px) appears before that for (min-width: 60px). So the rules in (min-width: 400px) get lower priority and will be overriden by rules in (min-width: 60px) when both conditions match. It is not what I expect.

Then I tried makeResetStyles. Since it will make one single rule, the order of the rule is kept and this time it works. But makeResetStyles may not be suitable for my real case. I need to output class names with different at-rules based on different inputs. I have to call all the useResetStyles for every combination, and only return the one I needs. A hook shall not be called conditionally if I am not mistaken. And I can't take the advantage of reusable atomic at-rules.

This is what would become if I used makeResetStyles:

(input) => {
  const classname1 = useResetStyles1();
  const classname2 = useResetStyles2();
  const classname3 = useResetStyles3();

  switch (input) {
    case 1:
      return classname1;
    case 2:
      return classname2;
    case 3:
      return classname3;
  }
}

I wonder what's the best practice in this case? And are atomic at-rules safe to use? Do we need to add a warning in the document?

[layershifter]

@wfwf1997 order of media queries should be deterministic to have deterministic results, the default comparison is intentionally not smartest as we don't want to enforce our opinions.

However, you can configure how style elements will ordered, https://griffel.js.org/react/api/create-dom-renderer#comparemediaqueries

[wfwf1997]

Since our project is large and contributed by several teams, I may only insert a local scoped RendererProvider in the code that my group own to minimize the impact. I'm curious about what will happen if there are several DOM renderers which have different sorting function for media queries but point to the same target document? Will the slots come into a mess?

[layershifter]

@wfwf1997 currently - nothing good as <style> tags created by different renderers will collide currently. There is a plan to make renderers & their style elements more independent (#453) and it have been prioritized for next quarter.