Add helious/emotion-mirror link to Libraries #2983
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What:
I felt like I made a thing that is worth sharing to the Emotion community! I'd like to add https://github.com/helious/emotion-mirror to the Libraries links so others can get runtime linting via https://stylelint.io/ for their CSS-in-JS components. It's nice to get warnings when you have malformed CSS or want to set up a way to enforce some CSS standards for a repo.
Why:
The team I currently worked on were talking about leveraging template strings or opting for object syntax when using
styled
; we like how the template strings feel like writing CSS, but we also liked that security that we were setting valid CSS props with the object syntax. Alas, I saw that both approaches really miss out on validating the styles that are actually generated when using CSS-in-JS, leading to potential bugs from malformed CSS.How:
So I set out on a journey to implement some sort of linting on CSS-in-JS's generated CSS. Opted to make this a plugin that could treeshake out and only run while code is in development. Wrapped
styled
withstylelint
's bundled version so it could run in the browser. Grabs the output and runs it throughstylelint
when a styled component renders and present any warnings in the browser's console.Checklist:
Would love anyone to test this out besides myself! Would love to see others gain value out of this. :)