css styles that have the same properties in variations can cause styling problems？

[SGAMERyu]

example

css({
 variants: {
    size: {
      sm: {
        '.lu-badge__dot': {
          minWidth: `{size.badge.sm}`,
          height: `{size.badge.sm}`
        }
      },
      default: {
        '.lu-badge__dot': {
           minWidth: 'default',
          height: 'default'
        }
      },
      options: {
        default: 'default'
      }
    },
    dot: {
      true: {
        '.lu-badge__dot': {
          minWidth: '{size.badge.dotSize}',
          height: '{size.badge.dotSize}',
          fontSize: '0px',
        }
      },
      options: {
        default: false
      }
    }
  }
})

generate css style is

{
     min-width: var(--size-badge-default);
     height: var(--size-badge-default);
}

Perhaps we can refer to @layer's mechanism to solve this problem
@layer doc is here https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

[Tahul]

Could you go deeper and explain how using @layer would help in fixing this issue?

Targeting the same selector and same attribute with two different rules will obviously lead to precedence issues.

How would you see priority be applied here?