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

Refactor strict API types #1636

Closed itsdouges closed 7 months ago

itsdouges commented 7 months ago

This pull request refactors the types in and around the createStrictAPI() to fix a few bugs and underlying architectural issues. To prevent scope creeping the PR I haven't implemented nested styles for the strict API (e.g. hover inside an after pseudo) which may cause for another refactor. We can tackle that at a later date.

This is to be merged before https://github.com/atlassian-labs/compiled/pull/1634 which then will build ontop of this one.

Background

Previously defining the schema came with a lot of redundant work. For every pseudo that you wanted to explicitly type you would have to define it, and then all of the base types again, like so:

interface Schema {
  background: 'var(--bg)';
  color: 'var(--color)';
  '&:hover': {
    background: 'var(--bg)';
    color: 'var(--color-hovered)';
  }
}

createStrictAPI<Schema>();

If you missed a value / didn't type every pseudo it would fallback to the CSSProperties value (from csstype). This was mostly unexpected. So for example right now :hover has been typed, but nothing else has. So it wouldn't benefit from the schema types.

With this refactor it now always falls back to the top level types if not defined, meaning it's more expected and safe for everyone and you only need to type the values you want to explicitly support.

interface Schema {
  background: 'var(--bg)';
  color: 'var(--color)';
  '&:hover': {
-    background: 'var(--bg)';
    color: 'var(--color-hovered)';
  }
}

createStrictAPI<Schema>();

Dive into the pull request and check out my annotations for more information.

Extra notes

changeset-bot[bot] commented 7 months ago

🦋 Changeset detected

Latest commit: 810c7002ece6aa53837f2571c6bdc8c94bdd794b

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

This PR includes changesets to release 7 packages | Name | Type | | --------------------------------------------------------- | ----- | | @compiled/react | Minor | | @compiled/parcel-optimizer-test-app | Patch | | @compiled/parcel-transformer-test-app | Patch | | @compiled/parcel-transformer-test-compress-class-name-app | Patch | | @compiled/parcel-transformer-test-custom-resolve-app | Patch | | @compiled/parcel-transformer-test-custom-resolver-app | Patch | | @compiled/parcel-transformer-test-extract-app | 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