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

Fix the `cx()` function's class collection at runtime as it generated class instances rather than strings. #1697

Closed kylorhall-atlassian closed 3 months ago

kylorhall-atlassian commented 3 months ago

Alternative to https://github.com/atlassian-labs/compiled/pull/1696

Migrate from ac() which generates AtomicGroups classes to ax() which strictly generates strings (I think that's what this all does).

This is because passing <Component xcss={cx(style, style)}> around resulted in errors, 'cls.split is not a function' trying to iterate over non-strings.

Previously this generated classes collected into ac like:

[
  '_1bah1yb4',
  undefined,
  ['_16jlkb7n', undefined], // from `xcss={[…]}`, not accounted for in this PR, however, not real
  AtomicGroups { // from `xcss={cx(…)}`
    values: Map(2) { '_1bsb' => '_1bsb1osq', '_16jl' => '_16jlkb7n' }
  }
]

PR checklist

I have...

changeset-bot[bot] commented 3 months ago

🦋 Changeset detected

Latest commit: f0f18993965e669a26dc44eca33b434cb6585e11

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | --------------- | ----- | | @compiled/react | Patch |

Not sure what this means? Click here to learn what changesets are.

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/atlassian-labs/compiled/new/fix-cx-class-collection?filename=.changeset/blue-coins-sort.md&value=---%0A%22%40compiled%2Freact%22%3A%20patch%0A---%0A%0AFix%20the%20%60cx()%60%20function's%20class%20collection%20at%20runtime%20as%20it%20generated%20class%20instances%20rather%20than%20strings.%0A)

netlify[bot] commented 3 months ago

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

Name Link
Latest commit f0f18993965e669a26dc44eca33b434cb6585e11
Latest deploy log https://app.netlify.com/sites/compiled-css-in-js/deploys/6699bf8ffe440600087425c4