We have recently tried to upgrade to v7 and styled-components v5 and this has resulted in some of our tests that use the toHaveStyleRule function to fail. The issue seems to be that we use babel-plugin-styled-components and our files are written in snake case, this leads to displayName like the following input-wrapper__InputWrapper for a file like input-wrapper.jsx with a component of InputWrapper. Styled-components then appends this to the componentId of sc-slq835-0 which results in a className of input-wrapper__InputWrapper-sc-slq835-0.
The current regex used for classNames is ^(\w+(-|_))?sc- this would correctly identify wrapper__InputWrapper-sc-slq835-0 but fails on our className due to the snakecase.
I propose we change this regex to check more generically for any string starting with sc- or containing -sc-, for example: (_|-)*sc-.+
Hello everyone!
We have recently tried to upgrade to v7 and styled-components v5 and this has resulted in some of our tests that use the
toHaveStyleRulefunction to fail. The issue seems to be that we usebabel-plugin-styled-componentsand our files are written in snake case, this leads to displayName like the followinginput-wrapper__InputWrapperfor a file likeinput-wrapper.jsxwith a component ofInputWrapper. Styled-components then appends this to the componentId ofsc-slq835-0which results in a className ofinput-wrapper__InputWrapper-sc-slq835-0.The current regex used for classNames is
^(\w+(-|_))?sc-this would correctly identifywrapper__InputWrapper-sc-slq835-0but fails on our className due to the snakecase.I propose we change this regex to check more generically for any string starting with
sc-or containing-sc-, for example:(_|-)*sc-.+