style collision with chunk splitting

[taozhou-glean]

we have been using vanilla-extract for quite some time and recently started facing some issues due to chunk splitting, which leads to style overrides.

A very simple example here:

// some shared styles
export const redText = style({
  color: red
})

// component A - chunk A
import { style } from '@vanilla-extract/css'
import * as commonStyles from “core/theme/common.css”

export const greenText = style([
  commonStyles.redText,
  {
    color: green
  }
])

// component B - chunk B
import { style } from '@vanilla-extract/css'
import * as commonStyles from “core/theme/common.css”

export const blueText = style([
  commonStyles.redText,
  {
    color: blue
  }
])

chunk A and chunk B both have the commonStyles.redText class, and all styles will have the same specificity (0,0, 1, 0), so the final applied style now depend on the order in which the chunks are loaded:

// chunk A
.redText { color: red }
.greenText { color: green }

// chunk B
.redText { color: red }
.blueText { color: blue }

// now `.redText` will override `.greenText` on `color` as it comes later, same happens if `B` loads before A, it will override `.blueText`

I am wondering if there is good suggestion to avoid such cases, what we are exploring right now is scoping every component, so instead of single class, we can wrap them with a component scope class, to make sure the component style wins over the common styles, but not sure if that's the best way forward.