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 types for css prop back #1866

Merged
merged 1 commit into from
Jul 27, 2021
Merged

add types for css prop back #1866

merged 1 commit into from
Jul 27, 2021

Conversation

hasparus
Copy link
Member

@hasparus hasparus commented Jul 19, 2021 •
edited
Loading

Closes #1833.

  • I added css prop to sx prop types, as Theme UI's jsx function calls Emotion's jsx function, and we have this documented in our docs.
  • Prettier trolled me a bit. I mean, I'm not sure why css/index.ts wasn't formatted this way in the first place. I don't really like this diff, but I don't want to fight it.
📦 Published PR as canary version: 0.11.0-canary.1866.095ab5bd1ea54f6d6ce32a3d3fd85aa24f96ab27.0

✨ Test out this PR locally via:

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

Version

Published prerelease version: v0.11.0-develop.1

Changelog

🎉 This release contains work from a new contributor! 🎉

Thank you, Jordie Bodlay (@jordie23), for all your work!

🚀 Enhancement

  • @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: 2

@hasparus hasparus requested a review from lachlanjc as a code owner July 19, 2021 17:45
@vercel
Copy link

vercel bot commented Jul 19, 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/3akFBjrHZ69FaayuoXZLujH8Rf9E
✅ Preview: https://theme-ui-git-css-prop-systemui.vercel.app

@hasparus hasparus requested review from fcisio and flo-sch July 19, 2021 17:59
@hasparus hasparus added the patch Increment the patch version when merged label Jul 19, 2021
@lachlanjc
Copy link
Member

This all looks great. Why do we want to expose the css prop though, instead of just sx?

@hasparus
Copy link
Member Author

hasparus commented Jul 27, 2021 •
edited
Loading

This all looks great. Why do we want to expose the css prop though, instead of just sx?

@lachlanjc We promised it in the docs, and I believe people are using it to work around the fact that sx doesn't accept an array. Previously, when both sx and css was defined globally, we didn't have to remember about css because Emotion defined it, but now, when the types are based on the JSX pragma configured you get sx OR css.

@hasparus hasparus merged commit a7e27f6 into develop Jul 27, 2021
@hasparus hasparus deleted the css-prop branch July 27, 2021 06:15
@hasparus hasparus added the prerelease This change is available in a prerelease. label Jul 27, 2021
@hasparus hasparus mentioned this pull request Jul 27, 2021
Merged
@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fcisio fcisio fcisio approved these changes

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

@lachlanjc lachlanjc Awaiting requested review from lachlanjc lachlanjc is a code owner

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

Successfully merging this pull request may close these issues.

Types not available for css prop with @jsxImportSource theme-ui
4 participants
@hasparus @lachlanjc @flo-sch @fcisio