Repository navigation
fix(lint): flag seek-unsafe CSS transitions - #3797
Merged
Merged
Conversation
miguel-heygen
approved these changes
Sep 9, 2026
miguel-heygen
left a comment
miguel-heygen
left a comment
Collaborator
There was a problem hiding this comment.
Thanks for adding this — catching a wall-clock transition next to a paused GSAP timeline is a good rule to have.
One issue with the current exemption: it only allows the literal value none, so transition-duration: 0s (and !important variants) gets flagged as an error too. That's the pattern used for a reduced-motion / render-lock reset, and it's already used that way in about 20 files in this repo's own registry — with the current rule there's no way to keep using it without triggering an error. Could the rule treat a zero duration the same as none? That should unblock those existing files without weakening the check for anything that actually animates on the wall clock.
The registry's reduced-motion and render-lock resets use transition-duration: 0s and transition-delay: 0s, which never run on the browser clock. Also drops the one real seek-unsafe transition the rule finds in the product-promo example.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Add a
css_transition_usedlint error for seek-unsafe CSS transitiondeclarations in
<style>blocks and inline styles.The rule covers standard and
-webkit-transition properties, while allowingexplicit
transition: none/transition-property: nonedeclarations andall-zero
transition/transition-duration/transition-delaytimes (thereduced-motion and render-lock reset the registry uses in about 20 files), and
ignoring custom properties.
Linting all 669 registry HTML files with the rule finds one real case:
.hero-sectionin the product-promo example hadtransition: transform 0.8swhile the timeline tweens its
y, so the browser eased GSAP's per-frame writes onthe wall clock. That declaration is removed.
Why
CSS transitions run on the browser clock rather than the seekable Hyperframes
timeline. Class or attribute changes can therefore restart a transition on
fresh render workers, causing parallel renders and snapshots to produce
different frames.
Fixes #3493.
How
Use PostCSS to inspect actual declarations instead of matching raw CSS text.
Unsafe declarations report an error with guidance to keep state changes in
classes or attributes and move the visual animation onto the paused GSAP
timeline.
Test plan
Unit tests added/updated
Manual testing performed — not required for this parser-only rule
Documentation updated —
docs/packages/lint.mdxlists the rulebun run --filter @hyperframes/lint test— 648 passedbun run --filter @hyperframes/lint typecheckbunx oxlint packages/lint/src/rules/core.ts packages/lint/src/rules/core.test.tsbunx oxfmt --check packages/lint/src/rules/core.ts packages/lint/src/rules/core.test.tsSeverity
css_transition_usedreports a warning, not an error. The slideshow skill deliberately uses a presenter-only CSS camera glide for live navigation (rendered video must not depend on it), and an error would failhyperframes linton every deck built from it. A warning still tells authors that a CSS transition will not seek deterministically in a render.