chore(lint): add pine-motion stylelint rule banning hardcoded transition timing#756
Merged
Conversation
f348213 to
c02baf7
Compare
1f0688c to
616926f
Compare
✅ Deploy Preview for pine-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
pixelflips
approved these changes
Jun 5, 2026
pixelflips
left a comment
Member
There was a problem hiding this comment.
Ran check locally and nothing was found. LGTM! 👍🏼
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.
Description
Implementation-plan item #3 (part 2 of 2): a custom stylelint rule
pine-design-system/no-hardcoded-motionthat flags hard-coded time values intransition/transition-durationand points to the--pine-motion-duration-*tokens. Prevents new component transitions from drifting back to hard-coded timings after the migration in the parent PR.Behavior & scope:
transition/transition-duration. Keyframeanimationdurations (spinners, progress bars) are bespoke ongoing motion, intentionally out of scope.0/0s/0msalways allowed.sforms) get a token suggestion and autofix (--fixrewrites0.2s→var(--pine-motion-duration-base)).0.15s) report and must either use the nearest token or carry a justifiedstylelint-disable-next-line … -- <reason>.The 5 existing off-grid micro-transitions (combobox ×3, multiselect, table — all 0.15s/0.1s) are annotated with documented disables, consistent with the behavior-preserving decision in the parent PR (these have no exact token; a follow-up can add 100/150ms tokens or retune them with design).
Stacked on #755 (
style/adopt-motion-tokens), which migrates the exact-match transitions; landing the rule after the sweep keeps both PRs green. Mirrors the existingstylelint-plugin-pine-colors/-semantic-tokensplugins; registered under the samepine-design-system/namespace; gated by the existinglint.styles→nx affected --target=lintjob (no workflow changes).New dependencies: none.
Fixes #(no-issue)
Type of change
How Has This Been Tested?
npx stylelint "src/**/*.scss"is clean (exit 0) with the rule active.Verified the rule fires on a fresh
transition: opacity 0.2s easeand that--fixrewrites it tovar(--pine-motion-duration-base).Verified off-grid
0.15s/0.1slines report without a disable and pass with the documented disable.unit tests
e2e tests
accessibility tests
tested manually
other: rule run against the full SCSS surface + synthetic fixtures
Test Configuration:
Checklist:
Note
Low Risk
Lint-only change plus comment annotations; no runtime or auth/data behavior changes.
Overview
Adds a Stylelint guard so new SCSS cannot use raw durations on
transition/transition-duration, steering authors toward--pine-motion-duration-*(with--fixrewriting exact 120/200/300ms spellings to token vars).animationtimings stay out of scope; zero durations are allowed; off-grid values must use a token or a justified disable.libs/.stylelintrc.jsonregistersstylelint-plugin-pine-motion.cjsand enablespine-design-system/no-hardcoded-motion.Five existing 0.15s / 0.1s micro-transitions in combobox, multiselect, and table styles get
stylelint-disable-next-linecomments so the tree stays green until those timings are retokenized or retuned.Reviewed by Cursor Bugbot for commit 616926f. Bugbot is set up for automated code reviews on this repo. Configure here.