-
-
Notifications
You must be signed in to change notification settings - Fork 145
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add better support for various modifiers #120
Conversation
Also removes the need for the starting space on element selector modifiers. fixes styled-components#64
Augments the modifier syntax to allow nested component rules such as ``` const Child = styled.div` color: blue; `; const Parent = styled.div` display: flex; ${Child} { flex: 1; } `; fixes styled-components#64
Heya! This would be very helpful for a project I'm working on at the moment - any word of when it'll get merged & published? R.e. 2) - agree that the array isn't the prettiest. Given that styled-components has already taken the approach of template literals, could we not do something similar? expect(wrapper.find(Text)).toHaveStyleRule('color', 'purple', {
modifier: select`> ${Link} span`,
}); Even if all select does is swap that string to be the array from the current implementation? I suppose taking it a step further, you could get it to generate that whole object: expect(wrapper.find(Text)).toHaveStyleRule('color', 'purple', select`> ${Link} span`); Either way, being able to get that array version merged in would be awesome! Thanks :) |
Thank you very much for this PR, @Joelkang. I also agree the array syntax is not optimal in terms of DX, would you mind experimenting with the tagged template literal solution suggested by @chrissinclair (thanks!)? We should be able to reuse css helper, like: css`> ${Text} span`.join('')
// => > .sc-gZMcBi span Please let me know if you need any help. |
@MicheleBertoli herp derp I dont know why it didnt occur to me to use the |
🙌thank you very much @Joelkang |
* feat(modifiers): add support for sass-style selectors Also removes the need for the starting space on element selector modifiers. fixes styled-components#64 * feat(toHaveStyleRule): add support for component modifiers Augments the modifier syntax to allow nested component rules such as ``` const Child = styled.div` color: blue; `; const Parent = styled.div` display: flex; ${Child} { flex: 1; } `; fixes styled-components#64 * fix(hasStyleRule) use SC css instead for component modifiers * docs(toHaveStyleRule): add docs for testing nested styled components
There are 2 commits in this PR as discussed in this issue #64
I'm open to discussion about the 2nd one, since that's a pretty ugly looking array. Im not sure how else to support nested components without requiring testers to know about the
styledComponentId
property. If we're otherwise ok with this modification, I can go ahead and update the docs as well.An alternative I've been thinking of could be something like:
I haven't really thought in much detail how deeper nested components can be handled in this way (it might just be available out of the box depending on the implementation)