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