EXAMPLE: Sort shorthand vs. longhand declarations — breaking change behind config

[kylorhall-atlassian]

What is this change?

Adds sorting of shorthand vs. longhand to ensure longhand deterministically will override shorthand.

⚠️ This could result in regressions as this will no longer work, so it's behind config, but this may mean this change should never go through (if we added border to this sorting):

const styles = css({ borderTop: '1px solid blue' });
const noBorderStyles = css({ border: 'none' });

export default ({ noBorder }) => <div
  css={[styles, noBorder && noBorderStyles]}
/>

Why are we making this change?

This is because quite commonly this code may be applied in either direction meaning sometimes font-weight: bold is applied and sometimes it's not, depending on the order that the stylesheet was generated in.

const styles = css({ font: '12px / 24px' });
const boldStyles = css({ fontWeight: 'bold' });

export default ({ isBold }) => <div
  css={[styles, isBold && boldStyles]}
/>

Example in a Storybook:

How are we making this change?

Where we already sort atomic styles, we now sort shorthand vs. longhand in that same area.

---

PR checklist

• Validate this works consistently as it's unclear if this sortAtomicStyleSheet iterates over all declarations or just one by one…
• Added an applicable test suite
• Expand the list of shorthand properties, right now this is just outline and font, there are many more!
• Investigate if there's further tests to update
• Update the documentation in website/ with this new config

[changeset-bot]

⚠️ No Changeset found

Latest commit: 89df158

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for compiled-css-in-js canceled.

Name	Link
🔨 Latest commit	89df158
🔍 Latest deploy log	https://app.netlify.com/sites/compiled-css-in-js/deploys/66d69daab2750900080884e8

[kylorhall-atlassian]

If this is required, all "bucket sorting" needs to be drastically rewritten to be nested.

Right now it's flat:

.abc { border: none }
.abc:link { border: none }
.abc:visited { border: none }
/* … */
.abc:active { border: none }
@media (/* … */) { .abc { border: none } }

But this doesn't support @media (…) being sorted internally or .abc:focus { … } being sorted against each other.

This would need deeper nested bucketing:

.abc { border: none }
.abc{ border-top: none }
.abc:link { border: none }
.abc:link { border-top: none }
@media (/* … */) {
  .abc { border: none }
  .abc { border-top: none }
  .abc:active { border: none }
  .abc:active { border-top: none }
}

And I'm not exactly sure if that's even feasible for @media queries either…