Consistently use (avoid) browser prefixes for icon mask styling

[aduth]

Description

The add-color-icon icon mixin uses an @supports test of (mask: url("")) or (-webkit-mask: url("")) in checking whether to add mask styling, but then only adds the styling using the unprefixed style mask:. The changes here seek to consistently use (avoid) the prefix.

Additional information

In environments where autoprefixing is not configured, this can cause strange behaviors in Chrome (v87) where -webkit-mask is supported, but the unprefixed mask is not, and yet the styles will still be applied.

Because the documentation claims that autoprefixing is a prerequisite in projects, the suggestion here is to remove the prefixed form in the @supports check. This way, the prefixing will be added by autoprefixer, but without autoprefixer, at least the styles would not be applied erroneously.

You can confirm using a tool like Autoprefixer CSS online that the prefixed form is added to a @supports directive:

.example {
  @supports (mask: url("")) {
    background: none;
    background-color: color($color);
    mask: $image-props;
    @if $color-hover {
      &:hover {
        background-color: color($color-hover);
      }
    }
  }
}

Without these changes, an autoprefixer would unnecessarily duplicate the vendor prefix:

@supports ((-webkit-mask: url("")) or (mask: url(""))) or (-webkit-mask: url("")) {

[thisisdano]

Oh nice — I guess I didn't realize that Autoprefixer would update the @supports directive as well! This is a great fix and an excellent way to prevent this common error.