custom-properties: extend ThemeProvider to insert CSS Custom Props

[iampava]

• Changed from default export to named exports
• Added withCustomProperties to extend ThemeProvidr and insert the CSS Props in DOM.
• Updated README

More info about the reasons here: #979.

[iampava]

Tests are faling. Checked out on master and ran yarn install && yarn test and still failing there.

[jxnblk]

Thanks! A few quick thoughts before I review this:

1. We shouldn't remove the default export, since that would mean a breaking change.
2. Why did you decide to use a higher order component? I would guess that we could handle this as a normal React component
3. Tests aren't failing on master, so I'd guess it might be related to the changes you made in the lock file, if that helps unblock you

[iampava]

Hey, thanks for the input.

1. Reverted back to it. I was leaning towards a breaking change to keep the API consistent (all named exports) but this works as well. (PS: changed the version in package.json. Should I do this or not?)

2. Added another feature'ish - the ability to select the class on the wrapper. I went with a HOC so that, if you have multiple providers inside the same app, you don't have to duplicate the prefix and className every time.

<CustomPropsThemeProvider theme={ subTheme } prefix="myApp" className="myApp-theme-provider" />

What do you think? It's not a huge copy-paste so I'd be fine with removing the HOC

3. Yes, you're right. The tests weren't failing, the coverage was. Wrote some tests for the new function, but couldn't find a way to test that the CSS props have been declared on the element.

Tried all sorts of stuff, but every time calls like div.style.getPropertyValue('--color-primary') were empty string. I'm not too good on testing so if you've ever stumbled upon this, maybe you could provide some hints/docs.

[iampava]

Up!

[iampava]

Hey @jxnblk, @hasparus. Can we merge this?

[atanasster]

Looks great, thanks for the contribution

[vercel]

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/i5gkol31r
✅ Preview: Failed