Skip to content

chore(lint): add pine-motion stylelint rule banning hardcoded transition timing#756

Merged
QuintonJason merged 2 commits into
mainfrom
chore/pine-motion-lint-rule
Jun 5, 2026
Merged

chore(lint): add pine-motion stylelint rule banning hardcoded transition timing#756
QuintonJason merged 2 commits into
mainfrom
chore/pine-motion-lint-rule

Conversation

@QuintonJason

@QuintonJason QuintonJason commented Jun 1, 2026

Copy link
Copy Markdown
Contributor

Description

Implementation-plan item #3 (part 2 of 2): a custom stylelint rule pine-design-system/no-hardcoded-motion that flags hard-coded time values in transition / transition-duration and 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:

  • Targets only transition / transition-duration. Keyframe animation durations (spinners, progress bars) are bespoke ongoing motion, intentionally out of scope.
  • 0 / 0s / 0ms always allowed.
  • Exact token matches (120ms/200ms/300ms and s forms) get a token suggestion and autofix (--fix rewrites 0.2svar(--pine-motion-duration-base)).
  • Off-grid values (e.g. 0.15s) report and must either use the nearest token or carry a justified stylelint-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 existing stylelint-plugin-pine-colors / -semantic-tokens plugins; registered under the same pine-design-system/ namespace; gated by the existing lint.stylesnx affected --target=lint job (no workflow changes).

New dependencies: none.

Fixes #(no-issue)

Type of change

  • New feature (non-breaking change which adds functionality)

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 ease and that --fix rewrites it to var(--pine-motion-duration-base).

  • Verified off-grid 0.15s/0.1s lines 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:

  • Pine versions: 3.26.x (docs/foundations lineage)
  • OS: macOS 25.3.0
  • Misc: stylelint ^14.13; tooling-only

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • Design has QA'ed and approved this PR

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 --fix rewriting exact 120/200/300ms spellings to token vars). animation timings stay out of scope; zero durations are allowed; off-grid values must use a token or a justified disable.

libs/.stylelintrc.json registers stylelint-plugin-pine-motion.cjs and enables pine-design-system/no-hardcoded-motion.

Five existing 0.15s / 0.1s micro-transitions in combobox, multiselect, and table styles get stylelint-disable-next-line comments 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.

@github-actions github-actions Bot added the package: core Changes have been made to the Core package label Jun 1, 2026
@QuintonJason QuintonJason added the ran-gauntlet Multi-agent review gauntlet has been run on this branch label Jun 1, 2026
@QuintonJason QuintonJason force-pushed the style/adopt-motion-tokens branch from f348213 to c02baf7 Compare June 3, 2026 13:21
Base automatically changed from style/adopt-motion-tokens to main June 3, 2026 16:43
@QuintonJason QuintonJason force-pushed the chore/pine-motion-lint-rule branch from 1f0688c to 616926f Compare June 5, 2026 14:46
@netlify

netlify Bot commented Jun 5, 2026

Copy link
Copy Markdown

Deploy Preview for pine-design-system ready!

Name Link
🔨 Latest commit 616926f
🔍 Latest deploy log https://app.netlify.com/projects/pine-design-system/deploys/6a22e12acbc055000844aa41
😎 Deploy Preview https://deploy-preview-756--pine-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@QuintonJason QuintonJason self-assigned this Jun 5, 2026
@QuintonJason QuintonJason requested a review from pixelflips June 5, 2026 14:47

@pixelflips pixelflips left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Ran check locally and nothing was found. LGTM! 👍🏼

@QuintonJason QuintonJason merged commit 886e5d0 into main Jun 5, 2026
21 checks passed
@QuintonJason QuintonJason deleted the chore/pine-motion-lint-rule branch June 5, 2026 16:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core Changes have been made to the Core package ran-gauntlet Multi-agent review gauntlet has been run on this branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants