The goal is too refactor Button to use makeResetStyles as an example for reference.

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.

Check microsoft/griffel#225 for more details. Documentation is also available there, https://griffel.js.org/react/api/make-reset-styles.

What will change?

Components will apply default state (base state) via a monolithic classname, so Button (and others) will emit a single classname when they are used without props.

Style overrides will be still applied via makeStyles with Atomic CSS.

What will improve?

As components will emit less classes ➡️ better layouting performance.

How it will look?

const useBaseClassName = makeResetStyles({
  display: 'flex',
  margin: 0,
})

const useClasses = makeStyles({
  sizeLarge: {
    ...shorthands.margin('8px')
  }
})