search

atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.99k stars 67 forks source link

Order Media Queries #1567

Closed liamqma closed 11 months ago

liamqma commented 11 months ago

Compiled uses Atomic CSS, so the order of CSS rules is not based on the definition in the codebase. This means

const style = css({
   "@media (min-width: 10px)": {
      color: "red"
   },
   "@media (min-width: 20px)": {
      color: "green"
   }
})

in the :point_up:, the order of these two pieces of CSS rules are not guaranteed. Can we order the Media Query CSS, so they are always mobile first?

Implementation detail: Create a postcss plugin to sort media queries.

liamqma commented 11 months ago

@JakeLane @dddlr @itsdouges @zerosicx

liamqma commented 11 months ago

I realised that this approach only works if stylesheet extraction is enabled, as it needs to sort the entire sheet at once. When stylesheet extraction is disabled, Compiled individually collects the sheets (from Components), and put them in the <Head>. Note this is done on client-side.

itsdouges commented 11 months ago

Mm I think style groups are still ordered when ran in runtime mode. Let me look.

Edit: https://github.com/atlassian-labs/compiled/blob/master/packages/react/src/runtime/sheet.ts

liamqma commented 11 months ago

Mm I think style groups are still ordered when ran in runtime mode. Let me look.

Yea, but I think ordering the breakpoints on client-side is going to be quite a runtime cost.

itsdouges commented 11 months ago

True.

liamqma commented 11 months ago

I can think of two options:

Option 1: Ask the users of Compiled to avoid overlapping breaking points

const style = css({
   "@media (min-width: 10px and max-width: 19px)": {
      color: "red"
   },
   "@media (min-width: 20px)": {
      color: "green"
   }
})

Option 2: Sort the media query by break points somehow.

I will take a look how Stylex does it.