feat(custom-properties): Warn in development on invalid theme keys by lachlanjc · Pull Request #2080 · system-ui/theme-ui

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
hasparus merged 1 commit into
developfrom
lachlanjc-1728

lachlanjc commented Jan 16, 2022 •

edited by hasparus

Loading

Uh oh!

vercel Bot commented Jan 16, 2022 •

edited

Loading

Uh oh!

hasparus commented Jan 29, 2022

Uh oh!

hasparus commented Mar 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

lachlanjc commented Jan 16, 2022 • edited by hasparus Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Version

🚀 Enhancement

🐛 Bug Fix

👨‍💻 Minor changes

🏠 Internal

Authors: 3

Uh oh!

vercel Bot commented Jan 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hasparus commented Jan 29, 2022

Uh oh!

hasparus commented Mar 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lachlanjc commented Jan 16, 2022 •

edited by hasparus

Loading

vercel Bot commented Jan 16, 2022 •

edited

Loading