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

hasparus · 2021-07-13T10:56:24Z

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
- Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862 (@tornewuff @hasparus)
@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
- add types for css prop back #1866 (@hasparus)
@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
- 0.10 chores #1842 (@hasparus)

🏠 Internal

theme-ui
- Setup Cypress #1845 (@hasparus)

Authors: 3

Jordie Bodlay (@jordie23)
Piotr Monwid-Olechnowicz (@hasparus)
Torne Wuff (@tornewuff)

vercel · 2021-07-13T10:56:26Z

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 · 2021-07-19T22:10:19Z

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

flo-sch · 2021-07-25T16:12:11Z

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


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?)

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.

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.

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 · 2021-08-25T14:57:21Z

🚀 PR was released in v0.11.0 🚀

vercel bot had a problem deploying to Preview July 13, 2021 10:56 Failure

lachlanjc approved these changes Jul 13, 2021

View reviewed changes

hasparus force-pushed the preset-types-with-cif branch from e7bb26d to 5872143 Compare July 19, 2021 21:44

vercel bot deployed to Preview July 19, 2021 21:44 View deployment

hasparus requested review from flo-sch and fcisio July 19, 2021 22:06

hasparus added minor Increment the minor version when merged types labels Jul 19, 2021

lachlanjc approved these changes Jul 25, 2021

View reviewed changes

flo-sch approved these changes Jul 25, 2021

View reviewed changes

fcisio approved these changes Jul 26, 2021

View reviewed changes

flo-sch approved these changes Jul 26, 2021

View reviewed changes

tornewuff and others added 4 commits July 27, 2021 08:18

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.

Add tests and use const instead

9bf7062

Define as actual tests to satisfy jest

d195a96

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 force-pushed the preset-types-with-cif branch from 5872143 to 54af5ba Compare July 27, 2021 06:20

vercel bot deployed to Preview July 27, 2021 06:20 View deployment

hasparus merged commit 5a378bd into develop Jul 27, 2021

hasparus deleted the preset-types-with-cif branch July 27, 2021 06:31

hasparus added the prerelease This change is available in a prerelease. label Jul 27, 2021

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 mentioned this pull request Oct 27, 2021

Tailwind preset is not compatible with Theme TypeScript type #1139

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

hasparus commented Jul 13, 2021 •

edited

Loading

vercel bot commented Jul 13, 2021 •

edited

Loading

hasparus commented Jul 19, 2021

flo-sch Jul 25, 2021

hasparus Jul 27, 2021

hasparus commented Aug 25, 2021

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

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

Conversation

hasparus commented Jul 13, 2021 • edited Loading

Release Notes

Version

Release Notes

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

🚀 Enhancement

🐛 Bug Fix

🏠 Internal

Authors: 3

vercel bot commented Jul 13, 2021 • edited Loading

hasparus commented Jul 19, 2021

flo-sch Jul 25, 2021

Choose a reason for hiding this comment

hasparus Jul 27, 2021

Choose a reason for hiding this comment

hasparus commented Aug 25, 2021

hasparus commented Jul 13, 2021 •

edited

Loading

vercel bot commented Jul 13, 2021 •

edited

Loading