build: add stylelint rule to ban concrete CSS rules inside theme files (#10003)

Adds a stylelint rule that will ensure that all of the CSS rules inside theme files are placed inside a mixin. This avoids style duplication whenever the file is imported.

Relates to #9999.

src/lib/button/_button-base.scss

@@ -32,7 +32,7 @@ $mat-mini-fab-size: 40px !default;
 $mat-mini-fab-padding: 8px !default;
 
 // Applies base styles to all button types.
-%mat-button-base {
+@mixin mat-button-base {
   box-sizing: border-box;
   position: relative;
 
@@ -73,9 +73,8 @@ $mat-mini-fab-padding: 8px !default;
 }
 
 // Applies styles to buttons with backgrounds: raised, fab, and mini-fab
-%mat-raised-button {
-  @extend %mat-button-base;
-
+@mixin mat-raised-button {
+  @include mat-button-base;
   @include mat-overridable-elevation(2);
 
   // Force hardware acceleration.
@@ -96,8 +95,7 @@ $mat-mini-fab-padding: 8px !default;
 
 // Applies styles to fab and mini-fab button types only
 @mixin mat-fab($size, $padding) {
-  @extend %mat-raised-button;
-
+  @include mat-raised-button;
   @include mat-overridable-elevation(6);
 
   // Reset the min-width from the button base.

src/lib/button/button.scss

@@ -4,9 +4,11 @@
 @import '../core/style/layout-common';
 @import '../../cdk/a11y/a11y';
 
-.mat-button, .mat-icon-button {
-  @extend %mat-button-base;
+.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
+  @include mat-button-base;
+}
 
+.mat-button, .mat-icon-button {
   .mat-button-focus-overlay {
     transition: none;
     opacity: 0;
@@ -21,12 +23,10 @@
 }
 
 .mat-raised-button {
-  @extend %mat-raised-button;
+  @include mat-raised-button;
 }
 
 .mat-stroked-button {
-  @extend %mat-button-base;
-
   @include mat-overridable-elevation(0);
 
   border: 1px solid currentColor;
@@ -35,8 +35,6 @@
 }
 
 .mat-flat-button {
-  @extend %mat-button-base;
-
   @include mat-overridable-elevation(0);
 }