refactor(option): move styles out of mat-core and into styleUrls (#9115)

Moves the styling for `MatOption` and `MatOptgroup` out of the `mat-core` mixin and into their components' respective `styleUrls`. This avoids the styles potentially being included multiple times if `mat-core` is used in different places and is consistent with all other components.

src/lib/core/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "core",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/core",
-  assets = [":pseudo_checkbox_css"],
+  assets = [":pseudo_checkbox_css", ":option_css", ":optgroup_css"],
   deps = [
     "//src/cdk/bidi",
     "//src/cdk/coercion",
@@ -32,6 +32,18 @@ sass_binary(
   deps = [":core_scss_lib"],
 )
 
+sass_binary(
+  name = "option_scss",
+  src = "option/option.scss",
+  deps = [":core_scss_lib"],
+)
+
+sass_binary(
+  name = "optgroup_scss",
+  src = "option/optgroup.scss",
+  deps = [":core_scss_lib"],
+)
+
 # TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
 # Copy the output of the sass_binary such that the filename and path match what we expect.
 genrule(
@@ -40,3 +52,17 @@ genrule(
   outs = ["selection/pseudo-checkbox/pseudo-checkbox.css"],
   cmd = "cat $(locations :pseudo_checkbox_scss) > $@",
 )
+
+genrule(
+  name = "option_css",
+  srcs = [":option_scss"],
+  outs = ["option/option.css"],
+  cmd = "cat $(locations :option_scss) > $@",
+)
+
+genrule(
+  name = "optgroup_css",
+  srcs = [":optgroup_scss"],
+  outs = ["option/optgroup.css"],
+  cmd = "cat $(locations :optgroup_scss) > $@",
+)

src/lib/core/_core.scss

@@ -6,9 +6,7 @@
 // Core styles that can be used to apply material design treatments to any element.
 @import 'style/elevation';
 @import 'ripple/ripple';
-@import 'option/option';
 @import 'option/option-theme';
-@import 'option/optgroup';
 @import 'option/optgroup-theme';
 @import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
 @import 'typography/all-typography';
@@ -26,8 +24,6 @@
 
   @include angular-material-typography($typography-config);
   @include mat-ripple();
-  @include mat-option();
-  @include mat-optgroup();
   @include cdk-a11y();
   @include cdk-overlay();
 }

src/lib/core/option/_optgroup.scss

@@ -1,10 +0,0 @@
-@import '../style/menu-common';
-@import '../style/vendor-prefixes';
-
-@mixin mat-optgroup() {
-  .mat-optgroup-label {
-    @include mat-menu-item-base();
-    @include user-select(none);
-    cursor: default;
-  }
-}

src/lib/core/option/_option.scss

@@ -1,72 +0,0 @@
-@import '../style/menu-common';
-@import '../style/vendor-prefixes';
-@import '../style/layout-common';
-@import '../../../cdk/a11y/a11y';
-
-/**
- * This mixin contains shared option styles between the select and
- * autocomplete components.
- */
-@mixin mat-option() {
-  .mat-option {
-    @include mat-menu-item-base();
-    position: relative;
-    cursor: pointer;
-    outline: none;
-    display: flex;
-    flex-direction: row;
-    max-width: 100%;
-    box-sizing: border-box;
-    align-items: center;
-
-    &[aria-disabled='true'] {
-      @include user-select(none);
-      cursor: default;
-    }
-
-    .mat-optgroup &:not(.mat-option-multiple) {
-      padding-left: $mat-menu-side-padding * 2;
-
-      [dir='rtl'] & {
-        padding-left: $mat-menu-side-padding;
-        padding-right: $mat-menu-side-padding * 2;
-      }
-    }
-  }
-
-  // Collapses unwanted whitespace created by newlines in code like the following:
-  // <mat-option>
-  //   {{value}}
-  // </mat-option>
-  .mat-option-text {
-    display: inline-block;
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .mat-option-ripple {
-    @include mat-fill;
-
-    // Disable pointer events for the ripple container because the container will overlay the
-    // user content and we don't want to disable mouse events on the user content.
-    // Pointer events can be safely disabled because the ripple trigger element is the host element.
-    pointer-events: none;
-
-    // Prevents the ripple from completely covering the option in high contrast mode.
-    @include cdk-high-contrast {
-      opacity: 0.5;
-    }
-  }
-
-  .mat-option-pseudo-checkbox {
-    $margin: $mat-menu-side-padding / 2;
-    margin-right: $margin;
-
-    [dir='rtl'] & {
-      margin-left: $margin;
-      margin-right: 0;
-    }
-  }
-}
-

src/lib/core/option/optgroup.scss

@@ -0,0 +1,8 @@
+@import '../style/menu-common';
+@import '../style/vendor-prefixes';
+
+.mat-optgroup-label {
+  @include mat-menu-item-base();
+  @include user-select(none);
+  cursor: default;
+}

src/lib/core/option/optgroup.ts

@@ -29,6 +29,7 @@ let _uniqueOptgroupIdCounter = 0;
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['disabled'],
+  styleUrls: ['optgroup.css'],
   host: {
     'class': 'mat-optgroup',
     'role': 'group',

src/lib/core/option/option.scss

@@ -0,0 +1,65 @@
+@import '../style/menu-common';
+@import '../style/vendor-prefixes';
+@import '../style/layout-common';
+@import '../../../cdk/a11y/a11y';
+
+.mat-option {
+  @include mat-menu-item-base();
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+
+  &[aria-disabled='true'] {
+    @include user-select(none);
+    cursor: default;
+  }
+
+  .mat-optgroup &:not(.mat-option-multiple) {
+    padding-left: $mat-menu-side-padding * 2;
+
+    [dir='rtl'] & {
+      padding-left: $mat-menu-side-padding;
+      padding-right: $mat-menu-side-padding * 2;
+    }
+  }
+}
+
+// Collapses unwanted whitespace created by newlines in code like the following:
+// <mat-option>
+//   {{value}}
+// </mat-option>
+.mat-option-text {
+  display: inline-block;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mat-option-ripple {
+  @include mat-fill;
+
+  // Disable pointer events for the ripple container because the container will overlay the
+  // user content and we don't want to disable mouse events on the user content.
+  // Pointer events can be safely disabled because the ripple trigger element is the host element.
+  pointer-events: none;
+
+  // Prevents the ripple from completely covering the option in high contrast mode.
+  @include cdk-high-contrast {
+    opacity: 0.5;
+  }
+}
+
+.mat-option-pseudo-checkbox {
+  $margin: $mat-menu-side-padding / 2;
+  margin-right: $margin;
+
+  [dir='rtl'] & {
+    margin-left: $margin;
+    margin-right: 0;
+  }
+}

src/lib/core/option/option.ts

@@ -76,6 +76,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
     '(keydown)': '_handleKeydown($event)',
     'class': 'mat-option',
   },
+  styleUrls: ['option.css'],
   templateUrl: 'option.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,