PAIR-code / PAIR-code/deliberate-lab
build(lint): enforce Prettier formatting for SCSS in CI and npm run lint
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 96
- Forks
- 40
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 20
Description
Problem
There is an asymmetry between pre-commit linting and CI verification for SCSS files:
- Pre-commit hook formats SCSS: In
package.json,lint-stagedruns Prettier across*.{json,ts,html,scss,css}. - CI and
npm run lintignore SCSS:package.json:"lint": "prettier --check \"utils/**/*.ts\" \"functions/**/*.ts\" \"frontend/**/*.ts\" ...".github/workflows/ci.yaml:npx prettier --check "**/*.ts"
Impact & Evidence
Because CI never enforces SCSS formatting, formatting drift goes unnoticed in main. An audit reveals that 22 SCSS files currently fail Prettier's check (mostly using double quotes rather than the configured 'singleQuote': true in .prettierrc.json).
When a contributor subsequently touches any of those 22 files (as happened in PR #1230 with info_view.scss), Husky's pre-commit hook auto-formats the file, introducing noisy, incidental quote-swapping diffs on untouched lines.
Proposed Mitigation
- One-time formatting migration:
Runnpx prettier --write "**/*.scss"across the monorepo in a dedicated cleanup PR to format the 22 drifting files. - Enforce in
package.json:
Update the rootlintscript to includefrontend/src/**/*.scss. - Enforce in CI:
Update theCheck formatstep in.github/workflows/ci.yamlto include SCSS:- name: Check format run: | npx prettier --check "**/*.ts" "**/*.scss" npx eslint --quiet "**/*.ts"
Acceptance Criteria
- All SCSS files formatted per
.prettierrc.json. -
npm run lintchecks SCSS files locally. - GitHub Actions CI rejects PRs with unformatted SCSS files.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the root package.json lint script, .github/workflows/ci.yaml Check format step, and .prettierrc.json to understand the existing patterns. Run the documented Prettier check and inspect the SCSS files it reports, including the 22-file formatting drift. Done means all SCSS follows the configured format and both local linting and CI verify it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss, typescript
- Domain
- build-system, ci-cd, tooling
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100