core: implement makeResetStyles

[layershifter]

There is no goal to change Griffel to follow another approach, but there are edge cases where Atomic CSS does not show the best performance.

Once an element has many HTML class names each pointing to different CSS rules, Blink based browsers (Chrome, Edge) have linear performance degradation based on an amount of classes.

Class names	1	10	50	100	200	500	1000
Elapsed (ms)	53	57	74	89	127	207	372
Over baseline (ms)	0	4	21	36	74	154	319
Match attempts	10000	10000	10000	10000	10000	10000	10000
Elapsed time per match	N/A	0.0004	0.0021	0.0036	0.0074	0.0154	0.0319

Measured in Edge 105 & Surface Go 2 on battery power.

---

Cases when elements have 100 classes and more are rare, but you can easily get there with nested selectors what we recommend to avoid:

makeStyles({
  button: {
    "& .abc": {
      ...shorthands.padding("4px"),
      ...shorthands.margin("4px"),
      ...shorthands.border("4px", "solid", "red")
    },
    "& .fde": {
      ...shorthands.padding("4px"),
      ...shorthands.margin("4px"),
      ...shorthands.border("4px", "solid", "red")
    }
  }
});

For example, the snippet above generates 40 classes. The similar problem is mentioned in styleq: Supporting high-performance layouts

For example, a component library may optimize the "reset" styles for its core components by flattening those styles, and then inserting those rules into the CSS style sheet before all the atomic CSS. That way atomic CSS will always override the reset rules, and the layout performance of the core components will be significantly improved.

https://www.npmjs.com/package/styleq#supporting-high-performance-layouts

Basically, the goal to implement a way to generate such rules. We don't want to bake this into makeStyles, so the decision is to create makeResetStyles.