Figure Out CSS-in-JS Dependencies
The codebase I’m now getting to know has a bunch of packages related to CSS-in-JS. I actually don’t remember which of these, or maybe none?!, that I’ve dealt with in React apps in my old job. I’ve heard a lot about these, but I’ve not got any relevant practical experience with any of them.
I’d heard mention from other developers working on the project, that they had changed libraries, and there’s still some refactoring to be done. But which, hm… what? I’m confused.
| Styled Components 💅 | This is the popular CSS-in-JS library written by @glenmaddern & @mxstbr (and others, but those are contributor names I know). |
| Emotion 👩🎤 | Another CSS-in-JS library similar to Styled Components, not quite as many repo stars but it’s been around for 2 years and also widely used. |
| Styled System 📦 | @jxnblk’s “collection of utility functions that add style props to your React components”, used with either Styled Components or Emotion |
| xstyled 🎀 | An alternative to Styled System made by @gregberg |
Excellent! ☝️ That’s the tl;dr table I could make after reading and making notes 👇
Styled Components 💅
styled-components lets you write actual CSS in your JavaScript
Hm. As opposed to what, exactly? Right, I guess this refers to either writing separate .css stylesheet, or writing weird ass custom camelCased marginBottom and similar.
- reactjs.org/docs/faq-styling
- and more on style under DOM elements
This unusual backtick syntax is a new JavaScript feature called a tagged template literal.
styled-components utilises tagged template literals to style your components. It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.
Read though Max Stiober’s post on Writing your styles in JS ≠ writing inline styles
Ok, so now I’m a bit more updated on the deal with the library I had heard most about before. But this isn’t the one we’re using. We’ve got a linter plugin carrying this name, but that’s all.
Emotion 👩🎤
a library designed for writing css styles with JavaScript
Two ways of using Emotion:
- The framework agnostic emotion package: npmjs.com/package/emotion
- The @emotion/core package for React: npmjs.com/package/@emotion/core
But, the docs say that the first “works in situations where configuration is restricted or not possible such as with Create React App”. And the latter is best with “a build environment that can be configured.” This project I’m working on is set up with core, so now I have questions about why the Emotion docs describe it this way. Which problems could arise?
Pre-release notes reveal that it will be renamed from @emotion/core to @emotion/react with v11.
cx is emotion’s version of the popular classnames library
- emotion#cx
- github.com/JedWatson/classnames that I also saw mentioned on the reactjs docs
Styled System 📦
To use Styled System, install a CSS-in-JS library such as Styled Components or Emotion.
Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties.
xstyled 🎀
-
@xstyled/system 👉 exposes core utilities, similar to styled-system, works with emotion ( or styled-components)
-
@xstyled/styled-components 👉 a wrapper around styled-components to enable the system directly in the CSS syntax
My project is set up to Use with Emotion, so the install instructions are to install:
| @xstyled/emotion | ✅ devDependency |
| @emotion/core | hm? 🧐 oh, looks like this went MIA some months back, that explains some errors I’ve been seeing, yay! |
| @emotion/styled | ✅ devDependency |
| emotion-theming | hm, I removed this earlier this week, I’ll put it back… 😜 |
Now I know what’s what. I understand that the intention is to use xstyled with Emotion. I’ve updated all the dependencies, added some that were missing, and I’m way less confused than this morning.