PAIR-code / PAIR-code/deliberate-lab

build(lint): enforce Prettier formatting for SCSS in CI and npm run lint

Open
#1,256 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:build
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:

  1. Pre-commit hook formats SCSS: In package.json, lint-staged runs Prettier across *.{json,ts,html,scss,css}.
  2. CI and npm run lint ignore 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
  1. One-time formatting migration:
    Run npx prettier --write "**/*.scss" across the monorepo in a dedicated cleanup PR to format the 22 drifting files.
  2. Enforce in package.json:
    Update the root lint script to include frontend/src/**/*.scss.
  3. Enforce in CI:
    Update the Check format step in .github/workflows/ci.yaml to 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 lint checks SCSS files locally.
  • GitHub Actions CI rejects PRs with unformatted SCSS files.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.