Emotion: [Question] how are CSS rules ordered?

[chenyong]

I have two variables in my code:

<div className={cx(layout.columnCenter, styleCard)}>

styleCard is supposed to overwrite the previous one, which specifies justify-content: center;/

However, as I run the code through Webpack and extracted CSS out, I found it not working as supposed:

.css-columnCenter-1sfk9u6 { main.d3a61782.css:3013

.css-styleCard-5bid07 { main.d3a61782.css:2935

styleCard appears in line 2935, which is before columnCenter in 3013... as a result, justify-content did not change.

How do you ensure orders of rules in emotion?

[chenyong]

by looking at the attribute,

class="css-columnCenter-1sfk9u6 css-styleCard-5bid07"

it seems there's no order in those styles, just the later one overwrites the former one, which is not how hashmap merging works, just how class names works. well...

more... https://stackoverflow.com/questions/1321692/how-to-specify-the-order-of-css-classes

[mitchellhamilton]

Composition/style merging is not supported with extractStatic. This will work as expected without extractStatic

[chenyong]

what's the suggested way of deploying projects with emotion? if not `extractStatic.

[mitchellhamilton]

I'm not sure I understand the question. Disable extractStatic in your babel config and the CSS will be in your JS.

[chenyong]

People prefers to extract CSS into standalone files, then CSS can be loaded separately, no need to wait for all js download. It means page loads faster visually. I'm not convinced it's best choice to keep CSS in JS currently, although an option... Does emotion recommend people keeping CSS in JS, in production?

[tkh44]

Does emotion recommend people keeping CSS in JS, in production?

Yes

I would always recommend using the tools provided in emotion-server, but they are not required.

[chenyong]

Never heard of emotion-server. Have you written any posts introducing it?

[tkh44]

I haven't, but you can find the docs here https://github.com/emotion-js/emotion/blob/master/docs/ssr.md

[chenyong]

Suddenly realized that I wasn't looking for server side rendering. Our app is a single page app that runs on client side. I want CSS to load fast. And I thought parsing CSS file is theoretically faster than creating style elements.

[tkh44]

insertRule is very, very fast.

https://codesandbox.io/s/rm44vm2j3p

If you are using React, the styles are created the instant the component is rendered. I would put global styles and your reset in regular css files and then use css-in-js for your components.

The real difference comes from parsing js vs parsing css files.

[chenyong]

That's nice. I would rely those arguments to convince my colleagues.

The results look not stable, number vary. I can't tell it's very fast, just not slow...