0.4 releases

[hasparus]

I'm gonna use this discussion to take notes on issues mentioning 0.4 stable release, so we can close them when it's ready, and spam @jxnblk to release new RC versions :D

Issues waiting for 0.4 stable

• Theme typescript defs #995

  [...] Do you think 0.4 is close?

• No types included in packages #1067
• Responsive style, different behavior between Develop and Production #1106 (closed)

[hasparus]

@jxnblk All packages have types now (components has a .d.ts, but it's okay), and @lachlanjc has solved tons of issues today. Could you make a new RC release?

[jxnblk]

Sorry for the delay (and not sure which message to reply to). Latest changes should be published as 0.4.0-rc.3 now

[lachlanjc]

This would be awesome. #1024 is confusing folks as well, would be great to have that published

[tlgimenes]

Hello people! I just wanted to add a note here about my concerns regarding performance in 0.4 version.

Currently I have a gatsby project running theme-ui / gatsby-plugin-theme-ui 0.3. In this project I'm shadowing the index.ts file of gatsby-plugin-theme-ui. The code inside this file is something like:

import merge from 'deepmerge'
import baseTheme from '@my-company/theme'

export default merge(baseTheme, { ... 'my-custom-theme' })

This website had a HUGE Total Blocking Time (TBT) in lighthouse (~300ms). I've manage to drastically reduce it's TBT (~150ms) by only changing the shadowed code to remove the deepmerge, i.e.

export default { ...manualy-merged-theme }

Reading the 0.4 code, I've seen the same pattern in here.

Did you guys have the same issue with performance that I had with this code ?

PS: Sorry if this is the wrong channel to report this possible issue

[jxnblk]

See #980

[tlgimenes]

thanks @jxnblk ! I'll follow from there

[hasparus]

Hey @jxnblk, I don't want to rush you, but could you take a look at #1137 and #1138, and possibly release 0.4.0-rc.4?

There's a bug in 0.4.0-rc.3 which is fixed by #1137.
There's also a nice fix to the docs by Lachlan in #1115.

[jxnblk]

Alright, should be published as 0.4.0-rc.5 (Lerna bumped the version automatically)

[hasparus]

For other RC users and for posterity: There might be some errors after you update to 0.4.0-rc.5.

---

I had these:

1. No skipLibCheck and TS version lower than 3.8. Solution: Update TypeScript.

node_modules/@theme-ui/core/dist/index.d.ts:4:1 - error TS1128: Declaration or statement expected.

export type { CSSObject, CSSOthersObject, CSSProperties, CSSPseudoSelectorProps, ColorMode, ColorModesScale, Label, ResponsiveStyleValue, Scale, StylePropertyValue, TLengthStyledSystem, Theme, ThemeDerivedStyles, ThemeStyles, ThemeUICSSObject, ThemeUICSSProperties, ThemeUIExtendedCSSProperties, ThemeUIStyleObject, VariantProperty, } from '@theme-ui/css';

2. useColorMode is now typed and it doesn't accept a generic parameter.

error TS2558: Expected 0 type arguments, but got 1. Solution: Get rid of the parameter.

84 const [colorModeName, setColorMode] = useColorMode();

If you had types for @theme-ui/color-modes (previously untyped) defined locally as

declare module "@theme-ui/color-modes" {
  export function useColorMode<T>(): [T, (val: T | ((mode: T) => T)) => void];
}

They are now defined in @theme-ui/color-modes as

export declare const useColorMode: () => [string | undefined, (mode: string) => void];

I think we could improve this definition.
Edit: PR in #1174

3. string is not assignable to a union type.

Types of property 'visibility' are incompatible.
                Type 'string' is not assignable to type '"hidden" | "visible" | "inherit" | ThemeUICSSObject | ThemeDerivedStyles | "-moz-initial" | "initial" | "revert" | "unset" | "collapse" | ("hidden" | ... 8 more ... | undefined)[] | ((theme: Theme) => "hidden" | ... 8 more ... | undefined) | undefined'.ts(2322)

Some CSS properties (e.g. visibility) are strictly typed, and TypeScript can't infer the correct type if the object in which they're declared is not annotated.

Solution: Annotate your style objects. Not only you'll fix the errors, you'll get intellisense inside of the object.

import { ThemeUICSSObject } from "theme-ui";

const styles: ThemeUICSSObject = {
  visibility: 'hidden'
};

error

no error

This might be actually a good addition to typescript.mdx in the docs. It's not Theme UI specific, but it's quite common and confusing.

[hasparus]

Hi @jxnblk!

I've made a previous branch and cherry-picked a fix to @emotion/core/package.json import for Webpack 5.
We can release it as 0.3.2.

I'll cherry-pick some more bugfixes in few moments, so people can get them faster without a breaking change.

[hasparus]

Okay, commits I added to previous:

• Merge pull request Add theme colors support to columnRuleColor #1085 from lachlanjc/patch-5
  • Add theme colors support to columnRuleColor, closes Can't use colors in theme directly for columnRuleColor property #1084
• Merge pull request fix(components): add primary as default variant for Badge component #1109 from lachlanjc/patch-6
  • fix(components): add primary as default variant for Badge component
• Merge pull request fix(components): add primary as default variant for Alert component #1102 from sohrab-/fix/alert-variant

[hasparus]

I should have probably named the branch stable to match npm tag, but I looked at it from perspective of current master.

@lachlanjc would you have a moment to take a look at previous branc and check if it's okay? Do you think there any more PRs that would be good to add there?