chore: lint-staged tooling to simplify pre-commit workflows by castastrophe · Pull Request #5393 · adobe/spectrum-web-components

castastrophe · 2025-04-23T18:27:50Z

Description

Swap out pretty-quick and manual linting calls in favor of the lint-staged tool which lets us define commands to run only when certain files are edited. These actions are only performed on files edited in a pull request or in git history to prevent leaking unrelated changes into pull requests which could expand scope of existing work.

Related issue(s)

SWC-855

How has this been tested?

yarn build
- Expect yarn lint to run after the spectrum CSS assets are built; should run stylelint and prettier

For the below commands, we are editing committed assets and then running yarn lint to verify the correct commands are triggered. Assets do not need to be staged when running the yarn lint alias however, you can also verify running yarn lint-staged directly and expect the same results (as long as the files are staged first).

Update the packages/action-button/src/action-button.css to remove whitespace around the first selector and properties (i.e., ::slotted([slot='icon']) { flex-shrink: 0; })
- Expect running yarn lint to run the stylelint and prettier commands
- This should return the whitespace and indents to the selector
Update the packages/action-button/src/ActionButton.ts to reorder the imports
- Expect running yarn lint to run the eslint command
- This should return the import order
Update the packages/action-button/package.json to remove homepage and author
- Expect running yarn lint to run the genversion and constraints commands
- These commands should add back the homepage and author values

Types of changes

Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

changeset-bot · 2025-04-23T18:27:54Z

⚠️ No Changeset found

Latest commit: 97eb082

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

castastrophe · 2025-04-23T18:28:17Z

.husky/pre-commit

-    yarn genversion --es6 --semi $VERSION_FILE
-    git add $VERSION_FILE
-EOF
+yarn lint-staged --allow-empty


Much less complexity! 🥳

github-actions · 2025-04-23T18:30:08Z

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions · 2025-04-23T18:33:24Z

Tachometer results

Currently, no packages are changed by this PR...

castastrophe · 2025-04-23T18:28:57Z

.prettierrc.yaml

 htmlWhitespaceSensitivity: ignore
 overrides:
-    - files: '{tools,packages}/*/src/spectrum-*.css'
+    - files: '{tools,packages}/*/src/*.css'


All CSS assets benefit from this expanded line-length in order to prevent var function wraps that could block proper downstream minification efforts.

castastrophe · 2025-04-23T18:29:33Z

README.md

 There are several commands that can be useful in specific scenarios:

-   `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process.
-   `yarn spectrum-vars` to ensure that theme files are up-to-date.


This command is no longer called directly so I removed it from the docs. All other updates are whitespace fixes from prettier.

castastrophe · 2025-04-23T18:29:55Z

lint-staged.config.js

+governing permissions and limitations under the License.
+*/
+
+export default {


This mimics our existing linting rules

lint-staged.config.js

castastrophe · 2025-04-23T18:30:48Z

package.json

-        "lint:js": "pretty-quick --pattern \"tasks/**/*.js\" && pretty-quick --pattern \"scripts/**/*.js\"",
-        "lint:packagejson": "pretty-quick --pattern package.json --pattern \"packages/*/package.json\" --pattern \"projects/*/package.json\" --pattern \"tools/*/package.json\" --pattern \"react/*/package.json\"",
-        "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"",
+        "lint": "git status --porcelain && git add . && yarn lint-staged",


This git status command checks first if there are uncommitted assets and adds them before linting.

castastrophe · 2025-04-23T18:31:21Z

package.json

        "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --",
        "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup",
-        "update:spectrum-css:cleanup": "yarn lint:packagejson && yarn --ignore-scripts && yarn process-spectrum",
+        "update:spectrum-css:cleanup": "yarn --ignore-scripts && yarn process-spectrum && yarn lint",


I moved this order around because you can't run the linter until you've installed with yarn first anyway.

nit: I don't think we need this script anymore for cut-off?

True but since we haven't merged the cutoff work yet, this PR was built to merge either before or after. If after, I'd just rebase the branch and update this bit.

castastrophe · 2025-04-23T18:31:57Z

.circleci/config.yml

            - run:
                  name: Lint
                  command: yarn lint
-            - run: yarn analyze


This runs as part of the lint task if the appropriate files are edited

package.json

Rajdeepc · 2025-05-06T12:42:10Z

package.json

        "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --",
        "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup",
-        "update:spectrum-css:cleanup": "yarn lint:packagejson && yarn --ignore-scripts && yarn process-spectrum",
+        "update:spectrum-css:cleanup": "yarn --ignore-scripts && yarn process-spectrum && yarn lint",


nit: I don't think we need this script anymore for cut-off?

Rajdeepc · 2025-05-06T12:42:37Z

package.json

        },
        "process-spectrum": {
-            "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn format:css",
+            "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint",


nit: Maybe comment out this also?

Rajdeepc

Looks good.
Nit: should we expect the prettier to pick up all the css files in the project and not only the global-vars?

castastrophe · 2025-05-09T15:16:14Z

@Rajdeepc To answer your question re: prettier applying to all CSS, yes, we definitely do want that line length increase for all CSS because we don't want to introduce whitespace into var functions (what it's doing now when it exceeds line-length 80) because that can't be properly minified downstream.

castastrophe commented Apr 23, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/chore-lint-staged-tooling branch 5 times, most recently from d45da11 to 4e4d4a0 Compare May 1, 2025 15:57

castastrophe mentioned this pull request May 5, 2025

tooling: update pre-commit hook to stop failure propagation of no-import rule of missing dependencies #5430

Closed

17 tasks

castastrophe force-pushed the castastrophe/chore-lint-staged-tooling branch 3 times, most recently from 919df82 to 2593a58 Compare May 5, 2025 18:36

Rajdeepc reviewed May 6, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/chore-lint-staged-tooling branch 3 times, most recently from 116824d to e16703a Compare May 6, 2025 13:22

castastrophe marked this pull request as ready for review May 6, 2025 13:24

castastrophe requested a review from a team as a code owner May 6, 2025 13:24

castastrophe self-assigned this May 6, 2025

castastrophe added the Component: Tooling Issue or PR dealing with scripts, workflows, automation, etc. Component prefix is for Jira label May 6, 2025

castastrophe force-pushed the castastrophe/chore-lint-staged-tooling branch 8 times, most recently from 66f6f45 to abe0543 Compare May 6, 2025 17:56

castastrophe added the Status: Ready for review PR ready for review or re-review. label May 6, 2025

castastrophe force-pushed the castastrophe/chore-lint-staged-tooling branch from 8c5669b to 5139513 Compare May 8, 2025 13:54

Rajdeepc approved these changes May 8, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/chore-lint-staged-tooling branch from 5139513 to c7a2251 Compare May 9, 2025 15:12

castastrophe and others added 3 commits May 9, 2025 11:14

chore: swap out pretty-quick and manual linting for lint-staged

dc3031a

chore: update ci tooling and docs to reflect change in linter

e0f52a5

chore: updated import dependency check

97eb082

castastrophe force-pushed the castastrophe/chore-lint-staged-tooling branch from c7a2251 to 97eb082 Compare May 9, 2025 15:14

castastrophe enabled auto-merge (rebase) May 9, 2025 15:14

caseyisonit approved these changes May 9, 2025

View reviewed changes

castastrophe merged commit 7d9526e into main May 9, 2025
24 checks passed

castastrophe deleted the castastrophe/chore-lint-staged-tooling branch May 9, 2025 20:58

Conversation

castastrophe commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issue(s)

How has this been tested?

Types of changes

Checklist

Best practices

Uh oh!

changeset-bot bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 23, 2025

Branch preview

Review the following VRT differences

Uh oh!

github-actions bot commented Apr 23, 2025

Tachometer results

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rajdeepc May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Rajdeepc May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rajdeepc May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rajdeepc left a comment

Choose a reason for hiding this comment

Uh oh!

castastrophe commented May 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

castastrophe commented Apr 23, 2025 •

edited

Loading

changeset-bot bot commented Apr 23, 2025 •

edited

Loading

Rajdeepc May 6, 2025 •

edited

Loading

Rajdeepc May 6, 2025 •

edited

Loading

Rajdeepc May 6, 2025 •

edited

Loading