getting theme values, with type-safety!

[smockle]

get is a function that takes a dot-delimited path and returns a theme value from the theme object.

Previously, non-existent paths could be passed to get, resulting in misapplied styles that could only be caught at runtime (i.e. when previewing a page in the browser).

This PR updates get to be type-safe:

• Red squiggles appear (compile-time errors) when a non-existent path is used
• Nested keys are suggested when . is typed
• Theme values can be previewed on hover

Screenshots

Path autocomplete

Theme value previews

Before type-safety

After type-safety

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1c32c7a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[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/primer/primer-components/E3VRkqkxYFnvXJTt8brQ59HgtYPo
✅ Preview: Failed

[Deployment for 1c32c7a failed]

[smockle]

Vercel deployments are failing, but I don’t have access to see the reason why. cc @colebemis @emplums

[colebemis]

@smockle This is awesome! 🎉

Looks the bundle size increased pretty substantially though (+90%).

Is there a way to get this to work with preval? We were using preval originally to avoid adding dependencies (e.g. polished) that are only need to build the theme object.

[smockle]

From @colebemis in #1128 (comment):

Looks the bundle size increased pretty substantially though (+90%).

Is there a way to get this to work with preval? We were using preval originally to avoid adding dependencies (e.g. polished) that are only need to build the theme object.

Copying this from one of my recent stand-up messages, since it’ll be a while before I can return to this PR:

I have several ideas for addressing @colebemis’ comment on the type-safe get PR re: bundle size:

• Adding a second tsconfig.json + build step to compile the theme separately and then consume the result JS + .d.ts in the main project.
• Eliminating unneeded dependencies (e.g. lodash’s isObject is 2 lines of code) to reduce transitive dependencies.
• Or, restoring the JS + preval pipeline but adding a handwritten .d.ts (least preferred option, because I think it’d get out-of-sync).
• Or, peruse Let's discuss TypeScript support. kentcdodds/babel-plugin-macros#94 “Let’s discuss TypeScript support” again for recommended solutions.

[github-actions]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.