Fix typography token aliases in plugin-css #192
Conversation
🦋 Changeset detectedLatest commit: 9ee834e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Deploying with
|
| Latest commit: |
9ee834e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4428d854.cobalt-ui.pages.dev |
| Branch Preview URL: | https://fix-typography-tokens.cobalt-ui.pages.dev |
| @@ -45,6 +45,16 @@ describe('5. Group', () => { | |||
| }); | |||
|
|
|||
| describe('7. Alias', () => { | |||
| test('top-level', () => { | |||
There was a problem hiding this comment.
This was just paranoia, but I wanted to add a test that referencing an alias without any . in it worked. I just realized that’s untested. Fortunately that was unrelated to #191
| @@ -117,8 +117,12 @@ export default function pluginCSS(options?: Options): Plugin { | |||
| break; | |||
| } | |||
| case 'typography': { | |||
| for (const [k, v] of Object.entries(value)) { | |||
| tokenVals[generateName(`${token.id}-${k}`, token)] = v; | |||
| if (value && typeof value === 'object') { | |||
There was a problem hiding this comment.
Simple fix: typography tokens get “hoisted” (for lack of a better term) in plugin-css, but in some instances this has already been transformed to a CSS variable (a string).
| @@ -69,6 +69,9 @@ | |||
| "width": "1px", | |||
| "style": "solid" | |||
| } | |||
| }, | |||
| "default": { | |||
| "$value": "{border.solid}" | |||
There was a problem hiding this comment.
Also tested border and gradient tokens to make sure it wasn’t happening with other composite types
Changes
Fixes #191.
How to Review
Tests should pass!