Add plugin to split multi-class apply statements
What does this MR do and why?
Add plugin to split multi-class apply statements
Adds a custom stylelint plugin that automatically splits @apply directives containing multiple utility classes into separate single-class statements.
Note to reviewers: Visit the first commit in this change to see the rule and stylelint
changes.
Why now?
While working with our recent CSS changes I've found it very hard to trace specific styles to their origin. It is taking me a long time to trace the origin of changes. Multiple utility classes in a single @apply
statement can be harder to read and modify. Splitting them into individual statements makes it easier to:
- Use
git blame
to trace a specific style - Remove
!important
from specific rules - Add or remove individual utilities
Exclusions
Note: I've excluded app/assets/stylesheets/framework/application-chrome.scss
from the list to avoid conflicts as this file has many MRs in flight at the moment.
Details
Features:
- Splits @apply statements with multiple classes into one class per line
- Preserves !important flags (both !important and #{!important} syntax)
- Maintains indentation when splitting rules
- Supports auto-fix via --fix flag
Example transformation:
@apply gl-fixed gl-w-full gl-left-0 #{!important};
Becomes:
@apply gl-fixed #{!important};
@apply gl-w-full #{!important};
@apply gl-left-0 #{!important};
How to set up and validate locally
NA - a green pipeline
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.