Skip to content

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.

Edited by Miguel Rincon

Merge request reports

Loading