Fix or remove lints

.stylelintrc.yaml

@@ -5,7 +5,9 @@ plugins:
   - stylelint-order
 rules:
   # Wrap lines greater than 120 characters
-  max-line-length: 120
+  max-line-length:
+    - 120
+    - ignorePattern: '/^@forward ".*"( as mdc-.*)? hide/'
   # Override stylelint-config-standard - we only use CSS comments for annotations that don't warrant an empty line
   comment-empty-line-before: null
   # Follow best practices
@@ -236,11 +238,13 @@ rules:
       - else
       - error
       - for
+      - forward
       - function
       - include
       - if
       - mixin
       - return
+      - use
       - warn
   # Disallow "@extend" in scss.
   # http://csswizardry.com/2016/02/mixins-better-for-performance/
@@ -313,14 +317,6 @@ rules:
       - ^fieldset
       - ^\[aria\-disabled=(?:.+)\]
 
-  # SCSS naming patterns, just like our CSS conventions above.
-  # (note for $-vars we use a leading underscore for "private" variables)
-  scss/dollar-variable-pattern:
-    - ^_?mdc-.+
-    -
-      ignore: local
-  scss/at-function-pattern: ^mdc-.+
-  scss/at-mixin-pattern: ^mdc-.+
   # Prevents unneeded nesting selectors
   scss/selector-no-redundant-nesting-selector: true
   # Since leading underscores are not needed, they can be omitted

package.json

@@ -78,7 +78,7 @@
     "cross-env": "^5.0.0",
     "css-loader": "^2.0.0",
     "cssom": "^0.3.2",
-    "dart-sass": "^1.15.2",
+    "dart-sass": "^1.24.3",
     "debounce": "^1.1.0",
     "del": "^4.0.0",
     "detect-port": "^1.2.3",

packages/mdc-button/mdc-button.scss

@@ -21,9 +21,7 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;
 @include mixins.theme-baseline;

packages/mdc-card/mdc-card.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-checkbox/mdc-checkbox.scss

@@ -21,10 +21,8 @@
 //
 
 @use "./mixins";
-
 @forward "functions";
 @forward "keyframes";
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-chips/_mixins.scss

@@ -468,7 +468,11 @@ $ripple-target: ".mdc-chip__ripple";
   }
 }
 
-@mixin outline-width($width, $horizontal-padding: variables.$horizontal-padding, $query: feature-targeting-functions.all()) {
+@mixin outline-width(
+  $width,
+  $horizontal-padding: variables.$horizontal-padding,
+  $query: feature-targeting-functions.all()
+) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
   // Note: Adjust padding to maintain consistent width with non-outlined chips

packages/mdc-chips/_variables.scss

@@ -25,7 +25,11 @@
 @use "@material/density/variables" as density-variables;
 @use "@material/theme/variables" as theme-variables;
 
-$fill-color-default: color.mix(theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 12%) !default;
+$fill-color-default: color.mix(
+  theme-variables.prop-value(on-surface),
+  theme-variables.prop-value(surface),
+  12%
+) !default;
 $ink-color-default: rgba(theme-variables.prop-value(on-surface), .87) !default;
 $horizontal-padding: 12px !default;
 $height: 32px !default;

packages/mdc-chips/chip-set/mdc-chip-set.scss

@@ -21,8 +21,6 @@
 //
 
 @use "../mixins";
-
 @forward "../mixins";
 @forward "../variables";
-
 @include mixins.set-core-styles;

packages/mdc-chips/chip/mdc-chip.scss

@@ -21,8 +21,6 @@
 //
 
 @use "../mixins";
-
 @forward "../mixins";
 @forward "../variables";
-
 @include mixins.core-styles;

packages/mdc-data-table/mdc-data-table.scss

@@ -21,9 +21,7 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;
 @include mixins.theme-baseline;

packages/mdc-dialog/mdc-dialog.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-drawer/common.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss

@@ -21,8 +21,6 @@
 //
 
 @use "../mixins";
-
 @forward "../mixins";
 @forward "../variables";
-
 @include mixins.dismissible-core-styles;

packages/mdc-drawer/modal/mdc-drawer-modal.scss

@@ -21,8 +21,6 @@
 //
 
 @use "../mixins";
-
 @forward "../mixins";
 @forward "../variables";
-
 @include mixins.modal-core-styles;

packages/mdc-elevation/_mixins.scss

@@ -114,7 +114,12 @@
 /// @param {Number} [$height] - The height of the elevation overlay
 /// @param {Boolean} [$has-content-sizing] - Set to false if the container has no content sizing
 ///
-@mixin overlay-dimensions($width, $height: $width, $has-content-sizing: true, $query: feature-targeting-functions.all()) {
+@mixin overlay-dimensions(
+  $width,
+  $height: $width,
+  $has-content-sizing: true,
+  $query: feature-targeting-functions.all()
+) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
   @include overlay-selector_ {
@@ -170,7 +175,12 @@
 // The $z-value must be between 0 and 24.
 // If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
 // $opacity-boost.
-@mixin elevation($z-value, $color: variables.$baseline-color, $opacity-boost: 0, $query: feature-targeting-functions.all()) {
+@mixin elevation(
+  $z-value,
+  $color: variables.$baseline-color,
+  $opacity-boost: 0,
+  $query: feature-targeting-functions.all()
+) {
   @if meta.type-of($z-value) != number or not math.is-unitless($z-value) {
     @error "$z-value must be a unitless number, but received '#{$z-value}'";
   }

packages/mdc-elevation/common.scss

@@ -21,9 +21,7 @@
 //
 
 @use "./mixins";
-
 @forward "functions";
 @forward "mixins" hide elevation;
 @forward "variables";
-
 @include mixins.overlay-common;

packages/mdc-elevation/mdc-elevation.scss

@@ -21,9 +21,7 @@
 //
 
 @use "./mixins";
-
 @forward "functions";
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-fab/mdc-fab.scss

@@ -19,8 +19,6 @@
 // THE SOFTWARE.
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-floating-label/mdc-floating-label.scss

@@ -22,7 +22,6 @@
 
 @use "@material/base/mixins" as base-mixins;
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
 

packages/mdc-form-field/mdc-form-field.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-grid-list/mdc-grid-list.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-icon-button/_mixins.scss

@@ -125,7 +125,12 @@
 ///     This mixin provides too much of low level customization.
 ///     Please use mdc-icon-button-size instead.
 ///
-@mixin icon-size($width, $height: $width, $padding: math.max($width,$height)/2, $query: feature-targeting-functions.all()) {
+@mixin icon-size(
+  $width,
+  $height: $width,
+  $padding: math.max($width,$height)/2,
+  $query: feature-targeting-functions.all()
+) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
   @include feature-targeting-mixins.targets($feat-structure) {

packages/mdc-icon-button/mdc-icon-button.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-image-list/mdc-image-list.scss

@@ -19,8 +19,6 @@
 // THE SOFTWARE.
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-layout-grid/mdc-layout-grid.scss

@@ -22,7 +22,6 @@
 @use "sass:map";
 @use "./variables";
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
 

packages/mdc-line-ripple/mdc-line-ripple.scss

@@ -22,7 +22,6 @@
 
 @use "@material/base/mixins" as base-mixins;
 @use "./mixins";
-
 @forward "functions";
 @forward "mixins";
 

packages/mdc-linear-progress/mdc-linear-progress.scss

@@ -19,9 +19,7 @@
 // THE SOFTWARE.
 
 @use "./mixins";
-
 @forward "keyframes";
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-list/mdc-list.scss

@@ -19,8 +19,6 @@
 // THE SOFTWARE.
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-menu-surface/mdc-menu-surface.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-menu/mdc-menu.scss

@@ -21,8 +21,6 @@
 //
 
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-notched-outline/mdc-notched-outline.scss

@@ -22,7 +22,6 @@
 
 @use "@material/base/mixins" as base-mixins;
 @use "./mixins";
-
 @forward "mixins";
 @forward "variables";
 

packages/mdc-radio/mdc-radio.scss

@@ -21,9 +21,7 @@
 //
 
 @use "./mixins";
-
 @forward "functions";
 @forward "mixins";
 @forward "variables";
-
 @include mixins.core-styles;

packages/mdc-ripple/_mixins.scss

@@ -199,7 +199,11 @@
 /// @param {map} $opacity-map - map specifying custom opacity of zero or more states
 /// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root
 ///
-@mixin states-opacities($opacity-map: (), $has-nested-focusable-element: false, $query: feature-targeting-functions.all()) {
+@mixin states-opacities(
+  $opacity-map: (),
+  $has-nested-focusable-element: false,
+  $query: feature-targeting-functions.all()
+) {
   // Ensure sufficient specificity to override base state opacities
   @if map.has-key($opacity-map, hover) {
     @include states-hover-opacity(map.get($opacity-map, hover), $query: $query);

packages/mdc-ripple/common.scss

@@ -24,6 +24,5 @@
 @forward "keyframes";
 @forward "mixins";
 @forward "variables";
-
 @use "./mixins";
 @include mixins.common;

packages/mdc-ripple/mdc-ripple.scss

@@ -24,7 +24,6 @@
 @forward "keyframes";
 @forward "mixins";
 @forward "variables";
-
 @use "./mixins";
 @include mixins.common;
 @include mixins.core-styles;