Add tw-merge to manage overrided classes correctly

[andresz1]

Issue is when developers wants to override styles of Spark component using tailwind classNames instead of props (for some edge cases)

If a spark component name <Foo /> has a default className bg-primary, and the developer tries to override it like this:

<Foo className="bg-secondary" />

The component will then have both classes: bg-primary bg-secondary.

And the one that is defined last in the stylesheet generated by tailwind would be applied. So it's possible the override does not work.

Until we find a better way to do it, they must use the important TW modifier:

<Foo className="!bg-secondary" />

[Powerplex]

After playing with tw-merge, it is only compatible with runtime detection, so this is not what we want.

Here is another idea:

The tailwind config file of polaris could have two outputs:

1. one parsing the spark-ui-component, and adding a custom prefix to classes.
2. one parsing the rest of the codebase.

The Polaris app would then have 2 stylesheets, the last one imported would always have the priority.

So, imagine our Spark button has a default class for padding p-md, and on Polaris they want to override like that:

<Button className="p-none">Click me</Button>

Would probably result in <button type="button" class="spark-p-md p-none"

spark-p-md would come from the first stylesheet.
p-none from a second stylesheet => It would be naturally stronger for the browser.

MAIN PRO: Only uses natural browser behaviour to work.
CONS: two stylesheets mean larger total css output with some duplicated classes.

In the meantime, they should continue to override this way:

<Button className="!p-none">Click me</Button>

[acd02]

Another option would be to use standard CSS by creating a small, dedicated CSS module file next to the component one want to override the styles for, e.g.:

/* styles.module.css */

.override:is([data-spark-component]) { /* specificity === 0,2,0 which is higher than the TW utilities classes */
  background-color: theme(colors.secondary); 
}

Then, inside the component:

import { Button } from '@spark-ui/button'

import styles from './styles.module.css'

export function SomeComponent() {
  return (
    <>
      ...
      <Button className={styles.override}>some button</Button>
    </>
  )
}