Generate %placeholder utilities to @extend from

Created by: donquixote

Motivation: !important in utiliites

My colleague likes to use SASS @extend with bootstrap utility classes, e.g.

header {
  @extend .py-1;
}

I personally tend to disagree, but I guess it is a valid technique.

One problem when doing this is we also inherit the !important part, which is reasonable on actual utility classes, but not in most of the @extend use cases.

Proposed solution: %placeholder.

Generate placeholder utilities in addition to the regular utilities, using SASS placeholder syntax. https://sass-lang.com/documentation/style-rules/placeholder-selectors They could then be extended like so:

header {
  @extend %py-1;
}

This would have the same effect, but without the !important.

Implementation

In the generate-utility(..) mixin it would look like this:

@mixin generate-utility(..) {
  [..]
      // Generate the real utility.
      .#{$property-class + $infix + $property-class-modifier} {
        @each $property in $properties {
          #{$property}: $value if($enable-important-utilities, !important, null);
        }
      }
      // Generate placeholder utility.
      %#{$property-class + $infix + $property-class-modifier} {
        @each $property in $properties {
          #{$property}: $value;
        }
      }

I applied this as a quick hack, and it actually worked! I was able to @extend the generated placeholder utilities.

Userland workaround?

I was going to do this in custom code, but this would require to copy the entire generate-utility() mixin.