Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix duration 0 missing units #341

Merged
merged 2 commits into from
Nov 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/stupid-seahorses-lie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
Copy link
Collaborator Author

@drwpow drwpow Nov 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

stupid-seahorses-lie is the best name I have ever gotten

"@terrazzo/token-tools": patch
"@terrazzo/plugin-css": patch
---

Fix 0 durations missing units in CSS
1 change: 1 addition & 0 deletions biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
},
"suspicious": {
"noConsoleLog": "error",
"noFallthroughSwitchClause": "error",
"noExplicitAny": "warn"
}
}
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@
"@biomejs/biome": "^1.9.4",
"@changesets/changelog-github": "^0.5.0",
"@changesets/cli": "^2.27.9",
"@types/node": "^22.8.0",
"execa": "^9.4.1",
"@types/node": "^22.9.0",
"execa": "^9.5.1",
"prettier": "^3.3.3",
"strip-ansi": "^7.1.0",
"stylelint": "^16.10.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-order": "^6.0.4",
"turbo": "^2.2.3",
"typescript": "^5.6.3",
"vitest": "^2.1.3"
"vitest": "^2.1.4"
}
}
2 changes: 1 addition & 1 deletion packages/parser/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"test:ts": "tsc --noEmit"
},
"dependencies": {
"@humanwhocodes/momoa": "^3.3.0",
"@humanwhocodes/momoa": "^3.3.3",
"@terrazzo/token-tools": "workspace:^",
"@types/babel__code-frame": "^7.0.6",
"@types/culori": "^2.1.1",
Expand Down
72 changes: 36 additions & 36 deletions packages/plugin-css/test/fixtures/type-transition/want.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,142 +17,142 @@
--ds-timing-slow: 1s;
--ds-transition-circ-in-instant: var(--ds-transition-circ-in-instant-duration) var(--ds-transition-circ-in-instant-delay) var(--ds-transition-circ-in-instant-timing-function);
--ds-transition-circ-in-instant-duration: var(--ds-timing-instant);
--ds-transition-circ-in-instant-delay: 0;
--ds-transition-circ-in-instant-delay: 0ms;
--ds-transition-circ-in-instant-timing-function: var(--ds-ease-circ-in);
--ds-transition-circ-in-quick: var(--ds-transition-circ-in-quick-duration) var(--ds-transition-circ-in-quick-delay) var(--ds-transition-circ-in-quick-timing-function);
--ds-transition-circ-in-quick-duration: var(--ds-timing-quick);
--ds-transition-circ-in-quick-delay: 0;
--ds-transition-circ-in-quick-delay: 0ms;
--ds-transition-circ-in-quick-timing-function: var(--ds-ease-circ-in);
--ds-transition-circ-in-moderate: var(--ds-transition-circ-in-moderate-duration) var(--ds-transition-circ-in-moderate-delay) var(--ds-transition-circ-in-moderate-timing-function);
--ds-transition-circ-in-moderate-duration: var(--ds-timing-moderate);
--ds-transition-circ-in-moderate-delay: 0;
--ds-transition-circ-in-moderate-delay: 0ms;
--ds-transition-circ-in-moderate-timing-function: var(--ds-ease-circ-in);
--ds-transition-circ-in-deliberate: var(--ds-transition-circ-in-deliberate-duration) var(--ds-transition-circ-in-deliberate-delay) var(--ds-transition-circ-in-deliberate-timing-function);
--ds-transition-circ-in-deliberate-duration: var(--ds-timing-deliberate);
--ds-transition-circ-in-deliberate-delay: 0;
--ds-transition-circ-in-deliberate-delay: 0ms;
--ds-transition-circ-in-deliberate-timing-function: var(--ds-ease-circ-in);
--ds-transition-circ-in-slow: var(--ds-transition-circ-in-slow-duration) var(--ds-transition-circ-in-slow-delay) var(--ds-transition-circ-in-slow-timing-function);
--ds-transition-circ-in-slow-duration: var(--ds-timing-slow);
--ds-transition-circ-in-slow-delay: 0;
--ds-transition-circ-in-slow-delay: 0ms;
--ds-transition-circ-in-slow-timing-function: var(--ds-ease-circ-in);
--ds-transition-circ-in-out-instant: var(--ds-transition-circ-in-out-instant-duration) var(--ds-transition-circ-in-out-instant-delay) var(--ds-transition-circ-in-out-instant-timing-function);
--ds-transition-circ-in-out-instant-duration: var(--ds-timing-instant);
--ds-transition-circ-in-out-instant-delay: 0;
--ds-transition-circ-in-out-instant-delay: 0ms;
--ds-transition-circ-in-out-instant-timing-function: var(--ds-ease-circ-in-out);
--ds-transition-circ-in-out-quick: var(--ds-transition-circ-in-out-quick-duration) var(--ds-transition-circ-in-out-quick-delay) var(--ds-transition-circ-in-out-quick-timing-function);
--ds-transition-circ-in-out-quick-duration: var(--ds-timing-quick);
--ds-transition-circ-in-out-quick-delay: 0;
--ds-transition-circ-in-out-quick-delay: 0ms;
--ds-transition-circ-in-out-quick-timing-function: var(--ds-ease-circ-in-out);
--ds-transition-circ-in-out-moderate: var(--ds-transition-circ-in-out-moderate-duration) var(--ds-transition-circ-in-out-moderate-delay) var(--ds-transition-circ-in-out-moderate-timing-function);
--ds-transition-circ-in-out-moderate-duration: var(--ds-timing-moderate);
--ds-transition-circ-in-out-moderate-delay: 0;
--ds-transition-circ-in-out-moderate-delay: 0ms;
--ds-transition-circ-in-out-moderate-timing-function: var(--ds-ease-circ-in-out);
--ds-transition-circ-in-out-deliberate: var(--ds-transition-circ-in-out-deliberate-duration) var(--ds-transition-circ-in-out-deliberate-delay) var(--ds-transition-circ-in-out-deliberate-timing-function);
--ds-transition-circ-in-out-deliberate-duration: var(--ds-timing-deliberate);
--ds-transition-circ-in-out-deliberate-delay: 0;
--ds-transition-circ-in-out-deliberate-delay: 0ms;
--ds-transition-circ-in-out-deliberate-timing-function: var(--ds-ease-circ-in-out);
--ds-transition-circ-in-out-slow: var(--ds-transition-circ-in-out-slow-duration) var(--ds-transition-circ-in-out-slow-delay) var(--ds-transition-circ-in-out-slow-timing-function);
--ds-transition-circ-in-out-slow-duration: var(--ds-timing-slow);
--ds-transition-circ-in-out-slow-delay: 0;
--ds-transition-circ-in-out-slow-delay: 0ms;
--ds-transition-circ-in-out-slow-timing-function: var(--ds-ease-circ-in-out);
--ds-transition-circ-out-instant: var(--ds-transition-circ-out-instant-duration) var(--ds-transition-circ-out-instant-delay) var(--ds-transition-circ-out-instant-timing-function);
--ds-transition-circ-out-instant-duration: var(--ds-timing-instant);
--ds-transition-circ-out-instant-delay: 0;
--ds-transition-circ-out-instant-delay: 0ms;
--ds-transition-circ-out-instant-timing-function: var(--ds-ease-circ-out);
--ds-transition-circ-out-quick: var(--ds-transition-circ-out-quick-duration) var(--ds-transition-circ-out-quick-delay) var(--ds-transition-circ-out-quick-timing-function);
--ds-transition-circ-out-quick-duration: var(--ds-timing-quick);
--ds-transition-circ-out-quick-delay: 0;
--ds-transition-circ-out-quick-delay: 0ms;
--ds-transition-circ-out-quick-timing-function: var(--ds-ease-circ-out);
--ds-transition-circ-out-moderate: var(--ds-transition-circ-out-moderate-duration) var(--ds-transition-circ-out-moderate-delay) var(--ds-transition-circ-out-moderate-timing-function);
--ds-transition-circ-out-moderate-duration: var(--ds-timing-moderate);
--ds-transition-circ-out-moderate-delay: 0;
--ds-transition-circ-out-moderate-delay: 0ms;
--ds-transition-circ-out-moderate-timing-function: var(--ds-ease-circ-out);
--ds-transition-circ-out-deliberate: var(--ds-transition-circ-out-deliberate-duration) var(--ds-transition-circ-out-deliberate-delay) var(--ds-transition-circ-out-deliberate-timing-function);
--ds-transition-circ-out-deliberate-duration: var(--ds-timing-deliberate);
--ds-transition-circ-out-deliberate-delay: 0;
--ds-transition-circ-out-deliberate-delay: 0ms;
--ds-transition-circ-out-deliberate-timing-function: var(--ds-ease-circ-out);
--ds-transition-circ-out-slow: var(--ds-transition-circ-out-slow-duration) var(--ds-transition-circ-out-slow-delay) var(--ds-transition-circ-out-slow-timing-function);
--ds-transition-circ-out-slow-duration: var(--ds-timing-slow);
--ds-transition-circ-out-slow-delay: 0;
--ds-transition-circ-out-slow-delay: 0ms;
--ds-transition-circ-out-slow-timing-function: var(--ds-ease-circ-out);
--ds-transition-cubic-in-instant: var(--ds-transition-cubic-in-instant-duration) var(--ds-transition-cubic-in-instant-delay) var(--ds-transition-cubic-in-instant-timing-function);
--ds-transition-cubic-in-instant-duration: var(--ds-timing-instant);
--ds-transition-cubic-in-instant-delay: 0;
--ds-transition-cubic-in-instant-delay: 0ms;
--ds-transition-cubic-in-instant-timing-function: var(--ds-ease-cubic-in);
--ds-transition-cubic-in-quick: var(--ds-transition-cubic-in-quick-duration) var(--ds-transition-cubic-in-quick-delay) var(--ds-transition-cubic-in-quick-timing-function);
--ds-transition-cubic-in-quick-duration: var(--ds-timing-quick);
--ds-transition-cubic-in-quick-delay: 0;
--ds-transition-cubic-in-quick-delay: 0ms;
--ds-transition-cubic-in-quick-timing-function: var(--ds-ease-cubic-in);
--ds-transition-cubic-in-moderate: var(--ds-transition-cubic-in-moderate-duration) var(--ds-transition-cubic-in-moderate-delay) var(--ds-transition-cubic-in-moderate-timing-function);
--ds-transition-cubic-in-moderate-duration: var(--ds-timing-moderate);
--ds-transition-cubic-in-moderate-delay: 0;
--ds-transition-cubic-in-moderate-delay: 0ms;
--ds-transition-cubic-in-moderate-timing-function: var(--ds-ease-cubic-in);
--ds-transition-cubic-in-deliberate: var(--ds-transition-cubic-in-deliberate-duration) var(--ds-transition-cubic-in-deliberate-delay) var(--ds-transition-cubic-in-deliberate-timing-function);
--ds-transition-cubic-in-deliberate-duration: var(--ds-timing-deliberate);
--ds-transition-cubic-in-deliberate-delay: 0;
--ds-transition-cubic-in-deliberate-delay: 0ms;
--ds-transition-cubic-in-deliberate-timing-function: var(--ds-ease-cubic-in);
--ds-transition-cubic-in-slow: var(--ds-transition-cubic-in-slow-duration) var(--ds-transition-cubic-in-slow-delay) var(--ds-transition-cubic-in-slow-timing-function);
--ds-transition-cubic-in-slow-duration: var(--ds-timing-slow);
--ds-transition-cubic-in-slow-delay: 0;
--ds-transition-cubic-in-slow-delay: 0ms;
--ds-transition-cubic-in-slow-timing-function: var(--ds-ease-cubic-in);
--ds-transition-cubic-in-out-instant: var(--ds-transition-cubic-in-out-instant-duration) var(--ds-transition-cubic-in-out-instant-delay) var(--ds-transition-cubic-in-out-instant-timing-function);
--ds-transition-cubic-in-out-instant-duration: var(--ds-timing-instant);
--ds-transition-cubic-in-out-instant-delay: 0;
--ds-transition-cubic-in-out-instant-delay: 0ms;
--ds-transition-cubic-in-out-instant-timing-function: var(--ds-ease-cubic-in-out);
--ds-transition-cubic-in-out-quick: var(--ds-transition-cubic-in-out-quick-duration) var(--ds-transition-cubic-in-out-quick-delay) var(--ds-transition-cubic-in-out-quick-timing-function);
--ds-transition-cubic-in-out-quick-duration: var(--ds-timing-quick);
--ds-transition-cubic-in-out-quick-delay: 0;
--ds-transition-cubic-in-out-quick-delay: 0ms;
--ds-transition-cubic-in-out-quick-timing-function: var(--ds-ease-cubic-in-out);
--ds-transition-cubic-in-out-moderate: var(--ds-transition-cubic-in-out-moderate-duration) var(--ds-transition-cubic-in-out-moderate-delay) var(--ds-transition-cubic-in-out-moderate-timing-function);
--ds-transition-cubic-in-out-moderate-duration: var(--ds-timing-moderate);
--ds-transition-cubic-in-out-moderate-delay: 0;
--ds-transition-cubic-in-out-moderate-delay: 0ms;
--ds-transition-cubic-in-out-moderate-timing-function: var(--ds-ease-cubic-in-out);
--ds-transition-cubic-in-out-deliberate: var(--ds-transition-cubic-in-out-deliberate-duration) var(--ds-transition-cubic-in-out-deliberate-delay) var(--ds-transition-cubic-in-out-deliberate-timing-function);
--ds-transition-cubic-in-out-deliberate-duration: var(--ds-timing-deliberate);
--ds-transition-cubic-in-out-deliberate-delay: 0;
--ds-transition-cubic-in-out-deliberate-delay: 0ms;
--ds-transition-cubic-in-out-deliberate-timing-function: var(--ds-ease-cubic-in-out);
--ds-transition-cubic-in-out-slow: var(--ds-transition-cubic-in-out-slow-duration) var(--ds-transition-cubic-in-out-slow-delay) var(--ds-transition-cubic-in-out-slow-timing-function);
--ds-transition-cubic-in-out-slow-duration: var(--ds-timing-slow);
--ds-transition-cubic-in-out-slow-delay: 0;
--ds-transition-cubic-in-out-slow-delay: 0ms;
--ds-transition-cubic-in-out-slow-timing-function: var(--ds-ease-cubic-in-out);
--ds-transition-cubic-out-instant: var(--ds-transition-cubic-out-instant-duration) var(--ds-transition-cubic-out-instant-delay) var(--ds-transition-cubic-out-instant-timing-function);
--ds-transition-cubic-out-instant-duration: var(--ds-timing-instant);
--ds-transition-cubic-out-instant-delay: 0;
--ds-transition-cubic-out-instant-delay: 0ms;
--ds-transition-cubic-out-instant-timing-function: var(--ds-ease-cubic-out);
--ds-transition-cubic-out-quick: var(--ds-transition-cubic-out-quick-duration) var(--ds-transition-cubic-out-quick-delay) var(--ds-transition-cubic-out-quick-timing-function);
--ds-transition-cubic-out-quick-duration: var(--ds-timing-quick);
--ds-transition-cubic-out-quick-delay: 0;
--ds-transition-cubic-out-quick-delay: 0ms;
--ds-transition-cubic-out-quick-timing-function: var(--ds-ease-cubic-out);
--ds-transition-cubic-out-moderate: var(--ds-transition-cubic-out-moderate-duration) var(--ds-transition-cubic-out-moderate-delay) var(--ds-transition-cubic-out-moderate-timing-function);
--ds-transition-cubic-out-moderate-duration: var(--ds-timing-moderate);
--ds-transition-cubic-out-moderate-delay: 0;
--ds-transition-cubic-out-moderate-delay: 0ms;
--ds-transition-cubic-out-moderate-timing-function: var(--ds-ease-cubic-out);
--ds-transition-cubic-out-deliberate: var(--ds-transition-cubic-out-deliberate-duration) var(--ds-transition-cubic-out-deliberate-delay) var(--ds-transition-cubic-out-deliberate-timing-function);
--ds-transition-cubic-out-deliberate-duration: var(--ds-timing-deliberate);
--ds-transition-cubic-out-deliberate-delay: 0;
--ds-transition-cubic-out-deliberate-delay: 0ms;
--ds-transition-cubic-out-deliberate-timing-function: var(--ds-ease-cubic-out);
--ds-transition-cubic-out-slow: var(--ds-transition-cubic-out-slow-duration) var(--ds-transition-cubic-out-slow-delay) var(--ds-transition-cubic-out-slow-timing-function);
--ds-transition-cubic-out-slow-duration: var(--ds-timing-slow);
--ds-transition-cubic-out-slow-delay: 0;
--ds-transition-cubic-out-slow-delay: 0ms;
--ds-transition-cubic-out-slow-timing-function: var(--ds-ease-cubic-out);
--ds-transition-linear-instant: var(--ds-transition-linear-instant-duration) var(--ds-transition-linear-instant-delay) var(--ds-transition-linear-instant-timing-function);
--ds-transition-linear-instant-duration: var(--ds-timing-instant);
--ds-transition-linear-instant-delay: 0;
--ds-transition-linear-instant-delay: 0ms;
--ds-transition-linear-instant-timing-function: var(--ds-ease-linear);
--ds-transition-linear-quick: var(--ds-transition-linear-quick-duration) var(--ds-transition-linear-quick-delay) var(--ds-transition-linear-quick-timing-function);
--ds-transition-linear-quick-duration: var(--ds-timing-quick);
--ds-transition-linear-quick-delay: 0;
--ds-transition-linear-quick-delay: 0ms;
--ds-transition-linear-quick-timing-function: var(--ds-ease-linear);
--ds-transition-linear-moderate: var(--ds-transition-linear-moderate-duration) var(--ds-transition-linear-moderate-delay) var(--ds-transition-linear-moderate-timing-function);
--ds-transition-linear-moderate-duration: var(--ds-timing-moderate);
--ds-transition-linear-moderate-delay: 0;
--ds-transition-linear-moderate-delay: 0ms;
--ds-transition-linear-moderate-timing-function: var(--ds-ease-linear);
--ds-transition-linear-deliberate: var(--ds-transition-linear-deliberate-duration) var(--ds-transition-linear-deliberate-delay) var(--ds-transition-linear-deliberate-timing-function);
--ds-transition-linear-deliberate-duration: var(--ds-timing-deliberate);
--ds-transition-linear-deliberate-delay: 0;
--ds-transition-linear-deliberate-delay: 0ms;
--ds-transition-linear-deliberate-timing-function: var(--ds-ease-linear);
--ds-transition-linear-slow: var(--ds-transition-linear-slow-duration) var(--ds-transition-linear-slow-delay) var(--ds-transition-linear-slow-timing-function);
--ds-transition-linear-slow-duration: var(--ds-timing-slow);
--ds-transition-linear-slow-delay: 0;
--ds-transition-linear-slow-delay: 0ms;
--ds-transition-linear-slow-timing-function: var(--ds-ease-linear);
}
}
3 changes: 2 additions & 1 deletion packages/token-tools/src/css/duration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@ export function transformDurationValue(
} else if (typeof value === 'string') {
throw new Error(`Could not resolve alias ${value}`);
}
return value.value === 0 ? '0' : `${value.value}${value.unit}`;
// Note: always return unit, even if `0`
return `${value.value}${value.unit}`;
}
Loading