When building the stylesheet --reset from variables.css is included multiple times.
theme.css of each component has its own @apply --reset; hence the reason it is included just before the styles of each component in the stylesheet.
Since the name of the class is not different (in my case all of them have _313TK classname) and exists in the stylesheet multiple times, chrome recognises each as an override of the one before, and this one class shows up tens of time in the dev tools when looking at the styles of the an element, which is super annoying.
In the meantime I have written a script that removes all the duplicates based on a regex (\._313TK{[^\}]*}\._313TK[^\}]*}) but this really needs to be fixed especially since I notice chrome dev tools really struggling when I am looking through styles (look how tiny the scrollbar is in the screenshot).
When building the stylesheet
--resetfromvariables.cssis included multiple times.theme.cssof each component has its own@apply --reset;hence the reason it is included just before the styles of each component in the stylesheet.Since the name of the class is not different (in my case all of them have
_313TKclassname) and exists in the stylesheet multiple times, chrome recognises each as an override of the one before, and this one class shows up tens of time in the dev tools when looking at the styles of the an element, which is super annoying.In the meantime I have written a script that removes all the duplicates based on a regex (
\._313TK{[^\}]*}\._313TK[^\}]*}) but this really needs to be fixed especially since I notice chrome dev tools really struggling when I am looking through styles (look how tiny the scrollbar is in the screenshot).