Vanilla extract check if component styling is declared globally

130 Views Asked by At

I would like to know if there is a way to check if a component styling tries to write the same styling as is defined in globalStyle,

So if I have styling defined for a svg in the global.css

import { globalStyle } from '@vanilla-extract/css';

globalStyle('svg', {
  width: '23%',
  height: '53%',
  display: 'inline-block'
});

But in a svg component where I am accidently trying to set the same styling in a class

export const componentClass: string = style({
  width: '23%',
  height: '53%',
  display: 'inline-block'
});

And the css class is used in the component:

export function SvgComponent(): JSX.Element {
  return (
    <svg className={componentClass}>
      <rect width="400" height="100"/>
    </svg>
  );
}

Is there a way to check the whole project for overlapping style declarations like this?

I have tried googling around the vanilla extract globalStyle and searching if such thing is possible, but without any luck

0

There are 0 best solutions below