Fix CSS lint issues and add CSS linting to pre-commit #2658
Conversation
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
- Apply auto-fixable CSS lint fixes across stylesheets - Add Stylelint to pre-commit hook for changed CSS/SCSS files - Remaining errors are structural issues requiring manual fixes
- Restructure extra-fields/style.scss to minimize disables - Restructure followers/style.scss to fix specificity ordering - Replace file-level disables with targeted disables where possible - Add explanatory comments for all remaining disables - Fix duplicate selector in feed/style.scss
obenland
added
the
Skip Changelog
github-actions
bot
added
[Block] Federated reply
There was a problem hiding this comment.
Pull request overview
This pull request comprehensively addresses CSS linting issues across the entire codebase and integrates CSS/SCSS linting into the pre-commit hook workflow. The changes focus on formatting consistency, standardizing CSS conventions, and properly documenting intentional stylelint rule exceptions.
Key Changes
- Standardized quote usage (single → double quotes) in @use/@import statements
- Normalized color values (currentColor → currentcolor, #ffffff → #fff)
- Converted font-weight keywords to numeric values (normal → 400, bold → 700)
- Restructured selectors to resolve specificity ordering issues
- Added explanatory comments for stylelint-disable directives
- Integrated CSS/SCSS linting with auto-fix into pre-commit hook
Reviewed changes
Copilot reviewed 36 out of 36 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/shared/modal/style.scss | Added blank lines between rule blocks, updated header comment |
| src/reply/editor.scss | Changed quotes to double, fixed indentation from spaces to tabs |
| src/remote-reply/style.scss | Added blank lines after selector declarations |
| src/reactions/style.scss | Changed currentColor to currentcolor, restructured box-shadow, added explanatory stylelint-disable comments |
| src/followers/style.scss | Moved .external-link-icon definition, separated :hover/:focus selectors, added stylelint-disable comments, condensed var() fallbacks |
| src/follow-me/style.scss | Added comprehensive file-level stylelint-disable comment explaining mutually exclusive style variations, shortened inline comments |
| src/extra-fields/style.scss | Restructured file to fix specificity issues by moving wrapper rules after style variations, added stylelint-disable comment |
| src/app/styles/design-tokens.scss | Added blank line, fixed indentation |
| src/app/style.scss | Changed quotes to double, removed .scss extension from @use |
| src/app/routes/feed/style.scss | Moved h2/div styles into parent selector to merge duplicate selectors, changed font-weight keyword to numeric |
| src/app/components/themed-surface/style.scss | Shortened hex color from #ffffff to #fff |
| src/app/components/site-icon/style.scss | Changed currentColor to currentcolor |
| src/app/components/site-hub/style.scss | Shortened hex colors, split multi-line box-shadow, added blank line, added stylelint-disable comment with explanation |
| src/app/components/sidebar/style.scss | Added file-level stylelint-disable comment, shortened hex colors, added blank line |
| src/app/components/popular-tags/style.scss | Shortened hex colors |
| src/app/components/layout/style.scss | Shortened comment, added blank line |
| src/app/components/fields/avatar/style.scss | Added blank line |
| src/app/components/actor-switcher/style.scss | Shortened hex color |
| build/* | Regenerated build files reflecting source changes |
| assets/css/activitypub-welcome.css | Moved .activitypub-step-completed rules to resolve specificity, changed font-weight to numeric, added stylelint-disable comment, added blank lines |
| assets/css/activitypub-post-preview.css | Reordered selectors to fix specificity issues, changed font-weight to numeric |
| assets/css/activitypub-embed.css | Merged duplicate .ap-preview selectors, changed display from inline-block to block for images, reordered layout variants, added blank lines |
| assets/css/activitypub-admin.css | Decimal spacing normalization, hex color shortening, font-weight numeric values, reordered selectors, added stylelint-disable comments, added blank lines, changed ::before pseudo-element syntax |
| .githooks/pre-commit | Added CSS/SCSS linting with auto-fix for staged files |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Address PR feedback: icon fonts should not have generic fallbacks since they would display random characters instead of icons if the font fails to load.
- Remove sans-serif fallback from dashicons icon font (icon fonts should not have generic fallbacks as they would display random characters) - Optimize pre-commit hook to get git diff once and filter by file type, reducing redundant git calls as more file type checks are added
pfefferle
approved these changes
Dec 18, 2025
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.
Summary
stylelint-disableusage with explanatory commentsChanges
CSS fixes:
stylelint-disablecomments where intentional (mutually exclusive style variations, separated focus states)Pre-commit hook:
Test Plan
npm run lint:csspassesnpm run buildsucceeds