feat(custom-properties): Warn in development on invalid theme keys #2080

lachlanjc · 2022-01-16T23:13:19Z

Closes #1728 by warning (in non-production environments) when invalid CSS custom properties are being generated, including a test.

I wrote a simplified validator based on the spec that checks for the right characters but does not check for "cannot start with a digit, two hyphens, or a hyphen followed by a digit", but figured this should cover the bulk of cases.

📦 Published PR as canary version: 0.14.0--canary.2080.bedf631c6c5280d5dc457bd4e2c38896a99bde38.0

✨ Test out this PR locally via:

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

Version

Published prerelease version: v0.14.0-develop.7

Changelog

🎉 This release contains work from a new contributor! 🎉

Thank you, Brage (@braaar), for all your work!

🚀 Enhancement

feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
@theme-ui/custom-properties
- feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
@theme-ui/color-modes
- feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
theme-ui
- feat(theme-ui): Add sx prop to BaseStyles component #2081 (@lachlanjc)

🐛 Bug Fix

Finish editing note #2079 (@lachlanjc)
fix(docs): Update recommendations in Keyframes doc #2079 (@lachlanjc)
@theme-ui/sidenav
- fix(sidenav): Build with latest theme-ui version #2084 (@lachlanjc)
@theme-ui/components
- components: Fix visual collapsing bug with Switch component #2067 (@lachlanjc)

👨‍💻 Minor changes

docs(examples/next): fix case insensitive import (@hasparus)

🏠 Internal

docs(jsx): add some more detail to #with-swc section in jsx-pragma docs #2094 (@hasparus @lachlanjc)
e2e: Upgrade dependencies #2098 (@lachlanjc)
Set up CodeSandbox CI #2085 (@lachlanjc)
examples: Remove CodeSandbox starter example #2086 (@lachlanjc)
docs: Document default theme values #2087 (@lachlanjc)
docs: add dependencies to "getting started" #2071 (@braaar)
@theme-ui/sidenav
- sidenav: Fix props leaking to DOM on Pagination component #2057 (@lachlanjc)

Authors: 3

Brage (@braaar)
Lachlan Campbell (@lachlanjc)
Piotr Monwid-Olechnowicz (@hasparus)

vercel · 2022-01-16T23:13:22Z

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/BziEqPzVS1tTB9XJeoAiv8fq5dwV
✅ Preview: https://theme-ui-git-lachlanjc-1728-systemui.vercel.app

hasparus · 2022-01-29T22:43:16Z

Nice one!

hasparus · 2022-03-21T12:54:33Z

🚀 PR was released in v0.14.0 🚀

feat(custom-properties): Warn in development on invalid theme keys

cf18e1c

lachlanjc added the enhancement New feature or request label Jan 16, 2022

lachlanjc requested a review from hasparus January 16, 2022 23:13

hasparus merged commit 705463b into develop Jan 29, 2022

hasparus deleted the lachlanjc-1728 branch January 29, 2022 22:43

hasparus added the prerelease This change is available in a prerelease. label Jan 29, 2022

hasparus mentioned this pull request Jan 30, 2022

feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

Merged

This was referenced Feb 13, 2022

chore(deps): bump follow-redirects from 1.14.7 to 1.14.8 #2132

Merged

fix(style-guide): use inherited fontSize for ColorPalette color labels #2135

Merged

This was referenced Feb 20, 2022

chore(deps): bump next from 12.0.9 to 12.1.0 in /examples/next #2136

Merged

fix(gatsby-plugin-theme-ui,docs): Dependency Updates #2138

Merged

chore(deps): bump prismjs from 1.26.0 to 1.27.0 #2141

Merged

This was referenced Mar 1, 2022

chore(deps): bump @emotion/styled from 11.6.0 to 11.8.1 #2155

Merged

chore(deps-dev): bump @babel/register from 7.16.0 to 7.17.0 #2152

Merged

This was referenced Mar 16, 2022

chore(deps): bump lodash-es from 4.17.15 to 4.17.21 #2167

Merged

fix(docs): make layout more consistent #2168

Merged

fix(color-modes): properly use print mode even if its name is initialColorModeName #2090

Merged

hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(custom-properties): Warn in development on invalid theme keys #2080

feat(custom-properties): Warn in development on invalid theme keys #2080

lachlanjc commented Jan 16, 2022 •

edited by hasparus

vercel bot commented Jan 16, 2022 •

edited

hasparus commented Jan 29, 2022

hasparus commented Mar 21, 2022

feat(custom-properties): Warn in development on invalid theme keys #2080

feat(custom-properties): Warn in development on invalid theme keys #2080

Conversation

lachlanjc commented Jan 16, 2022 • edited by hasparus

Version

🚀 Enhancement

🐛 Bug Fix

👨‍💻 Minor changes

🏠 Internal

Authors: 3

vercel bot commented Jan 16, 2022 • edited

hasparus commented Jan 29, 2022

hasparus commented Mar 21, 2022

lachlanjc commented Jan 16, 2022 •

edited by hasparus

vercel bot commented Jan 16, 2022 •

edited