Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862

Merged
merged 4 commits into from
Jul 27, 2021
Merged

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862

merged 4 commits into from
Jul 27, 2021

Conversation

hasparus
Copy link
Member

@hasparus hasparus commented Jul 13, 2021 •
edited
Loading

Based on #1856.

Release Notes

  • Added TypeScript Constrained identity functions makeTheme, makeStyles and makeColorsScale which can be imported from @theme-ui/css/utils.
  • Used aformentioned functions to properly define types of presets. Exported themes are now assignable to Theme but their types narrowly describe their exact values.
📦 Published PR as canary version: 0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/color@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/components@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/core@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/css@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/custom-properties@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/editor@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install gatsby-plugin-theme-ui@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install gatsby-theme-style-guide@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install gatsby-theme-ui-layout@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/match-media@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/mdx@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/parse-props@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-base@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-bootstrap@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-bulma@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-dark@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-deep@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-funk@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-future@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-polaris@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-roboto@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-sketchy@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-swiss@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-system@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-tailwind@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/preset-tosh@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/presets@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/prism@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/sidenav@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/style-guide@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/tachyons@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/tailwind@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/theme-provider@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install theme-ui@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
npm install @theme-ui/typography@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
# or 
yarn add @theme-ui/color-modes@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/color@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/components@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/core@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/css@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/custom-properties@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/editor@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add gatsby-plugin-theme-ui@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add gatsby-theme-style-guide@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add gatsby-theme-ui-layout@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/match-media@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/mdx@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/parse-props@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-base@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-bootstrap@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-bulma@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-dark@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-deep@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-funk@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-future@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-polaris@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-roboto@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-sketchy@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-swiss@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-system@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-tailwind@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/preset-tosh@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/presets@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/prism@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/sidenav@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/style-guide@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/tachyons@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/tailwind@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/theme-provider@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add theme-ui@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0
yarn add @theme-ui/typography@0.11.0-canary.1862.0fb581dc03f7a88fd9e6c94d2beabb7189bfc738.0

Version

Published prerelease version: v0.11.0-develop.2

Changelog

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Torne Wuff (@tornewuff)

❤️ Jordie Bodlay (@jordie23)

Release Notes

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types (#1862)

  • Added TypeScript Constrained identity functions makeTheme, makeStyles and makeColorsScale which can be imported from @theme-ui/css/utils.
  • Used aformentioned functions to properly define types of presets. Exported themes are now assignable to Theme but their types narrowly describe their exact values.

🚀 Enhancement

  • @theme-ui/color, @theme-ui/css, @theme-ui/preset-base, @theme-ui/preset-bootstrap, @theme-ui/preset-bulma, @theme-ui/preset-dark, @theme-ui/preset-deep, @theme-ui/preset-funk, @theme-ui/preset-future, @theme-ui/preset-polaris, @theme-ui/preset-roboto, @theme-ui/preset-sketchy, @theme-ui/preset-swiss, @theme-ui/preset-system, @theme-ui/preset-tailwind, @theme-ui/preset-tosh, @theme-ui/presets
  • @theme-ui/color-modes, @theme-ui/core, @theme-ui/editor, @theme-ui/theme-provider, theme-ui
    • fix(color-modes): combine colors in nested providers #1838 (@hasparus)

🐛 Bug Fix

  • Update global-styles.mdx #1858 (@jordie23)
  • @theme-ui/core, @theme-ui/css
  • @theme-ui/color-modes, @theme-ui/components, @theme-ui/core, @theme-ui/editor, gatsby-theme-style-guide, gatsby-theme-ui-layout, @theme-ui/match-media, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/sidenav, @theme-ui/style-guide, @theme-ui/theme-provider, theme-ui

🏠 Internal

Authors: 3

@vercel
Copy link

vercel bot commented Jul 13, 2021 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/66kAS3wwxg3hY8YpLhTbJYmdAAwA
✅ Preview: https://theme-ui-git-preset-types-with-cif-systemui.vercel.app

@hasparus hasparus force-pushed the preset-types-with-cif branch from e7bb26d to 5872143 Compare July 19, 2021 21:44
@hasparus hasparus requested review from flo-sch and fcisio July 19, 2021 22:06
@hasparus hasparus added minor Increment the minor version when merged types labels Jul 19, 2021
@hasparus
Copy link
Member Author

Hey @tornewuff, would you maybe have a moment to give it a look and see if it addresses your problems?

flo-sch
flo-sch approved these changes Jul 25, 2021
View reviewed changes
packages/css/src/utils.ts
* Constrained identity function used to constrain user's theme type to Theme
* while preserving its exact type.
*/
export const makeTheme = <T extends Theme>(theme: T): T => theme
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks awesome, is it internal API or intended to be used from the outside?

(Wondering if consumers could use it to build custom themes with or without presets?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I try to prefix exported internal APIs with __ or even __internal and mark add @internal jsdoc comment. This one is user-facing. I've been defining it in my projects for a long time.

tornewuff and others added 4 commits July 27, 2021 08:18
@tornewuff @hasparus
Define correct types in most presets.
bdc07e7 
Exported values in presets should have the correct types so they can be
used properly when imported. Define types for all the relatively-easy
cases, and fix various outdated property references.
@tornewuff @hasparus
Add tests and use const instead
9bf7062
@tornewuff @hasparus
Define as actual tests to satisfy jest
d195a96
@hasparus
feat(css): add makeTheme constrained identity function
54af5ba 
Defined presets in a typesafe way.

You can read more on CIFs at:
https://kentcdodds.com/blog/how-to-write-a-constrained-identity-function-in-typescript
@hasparus hasparus force-pushed the preset-types-with-cif branch from 5872143 to 54af5ba Compare July 27, 2021 06:20
@hasparus hasparus merged commit 5a378bd into develop Jul 27, 2021
@hasparus hasparus deleted the preset-types-with-cif branch July 27, 2021 06:31
@hasparus hasparus added the prerelease This change is available in a prerelease. label Jul 27, 2021
@hasparus
Copy link
Member Author

🚀 PR was released in v0.11.0 🚀

@hasparus hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Aug 25, 2021
@lachlanjc lachlanjc mentioned this pull request Oct 27, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@flo-sch flo-sch flo-sch approved these changes

@lachlanjc lachlanjc lachlanjc approved these changes

@fcisio fcisio fcisio approved these changes

Assignees
No one assigned
Labels
minor Increment the minor version when merged released This issue/pull request has been released. types
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@hasparus @flo-sch @lachlanjc @fcisio @tornewuff