chore(stylelint): Remove fr unit workaround

.stylelintrc.yaml

@@ -6,6 +6,7 @@ ignoreFiles:
 plugins:
   - stylelint-selector-bem-pattern
   - stylelint-scss
+  - stylelint-order
 rules:
   # Follow best practices
   font-family-name-quotes: always-where-recommended
@@ -18,7 +19,7 @@ rules:
   # attribute strings are normally quoted within the DOM.
   string-quotes: double
   # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
-  declaration-block-properties-order:
+  order/declaration-block-properties-specified-order:
     - display
     - position
     - top
@@ -231,9 +232,6 @@ rules:
   selector-id-pattern: ^mdc?-.+
   # Names are more semantic than numbers
   font-weight-notation: named-where-possible
-  # :root is an important enough selector that it always stands on it's own. Also, there is no
-  # reason to make root a compound selector (?)
-  selector-root-no-composition: true
   # http://www.paulirish.com/2010/the-protocol-relative-url/
   function-url-no-scheme-relative: true
   # TODO: and FIXME: warnings are super useful because they remind us that we should address these
@@ -245,14 +243,6 @@ rules:
     - severity: warning
   # Part of google's style guide
   number-leading-zero: never
-  # No unknown unit
-  unit-no-unknown:
-    - true
-    # Temporary rule to ignore CSS Grid `fr` unit while stylelint doesn't support it.
-    # See https://github.com/stylelint/stylelint/issues/2307
-    # TODO(sgomes): remove once fixed in stylelint
-    - ignoreUnits:
-        - fr
 
   # We use Harry Roberts' BEM dialect as our preferred way to format classes.
   # See: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

package.json

@@ -66,8 +66,9 @@
     "standard-changelog": "0.0.1",
     "style-loader": "^0.13.1",
     "stylefmt": "^4.1.1",
-    "stylelint": "^7.1.0",
-    "stylelint-config-standard": "^11.0.0",
+    "stylelint": "^7.8.0",
+    "stylelint-config-standard": "^16.0.0",
+    "stylelint-order": "^0.2.2",
     "stylelint-scss": "^1.2.1",
     "stylelint-selector-bem-pattern": "^1.0.0",
     "tape": "^4.6.0",

packages/mdc-button/mdc-button.scss

@@ -49,6 +49,7 @@
 
   @include mdc-theme-dark {
     @include mdc-theme-prop(color, text-primary-on-dark);
+
     -webkit-tap-highlight-color: rgba(white, .18);
   }
 

packages/mdc-drawer/temporary/mdc-temporary-drawer.scss

@@ -98,6 +98,7 @@
 
   &__footer {
     @include mdc-elevation(2);
+
     flex-shrink: 0;
   }
 

packages/mdc-layout-grid/_mixins.scss

@@ -67,7 +67,6 @@
   align-items: stretch;
   margin: 0 auto;
   box-sizing: border-box;
-
   padding: $margin - $gutter / 2;
   padding: calc(var(--mdc-layout-grid-margin, #{$margin}) - var(--mdc-layout-grid-gutter, #{$gutter}) / 2);
 
@@ -79,7 +78,6 @@
     display: grid;
     grid-gap: $gutter;
     grid-gap: var(--mdc-layout-grid-gutter, $gutter);
-
     padding: $margin;
     padding: var(--mdc-layout-grid-margin, #{$margin});
 

packages/mdc-menu/simple/mdc-simple-menu.scss

@@ -79,6 +79,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
 
     .mdc-simple-menu--animating & {
       overflow-y: hidden;
+
       > * {
         transition-duration: $mdc-simple-menu-item-fade-duration;
         transition-property: opacity;

packages/mdc-select/mdc-select.scss

@@ -244,7 +244,6 @@
     @include mdc-theme-dark {
       @include mdc-theme-prop(background-color, text-primary-on-dark);
     }
-
   }
   // stylelint-enable plugin/selector-bem-pattern
 }

packages/mdc-switch/mdc-switch.scss

@@ -70,7 +70,6 @@
         background-color: $mdc-switch-unchecked-track-color-dark;
         opacity: .3;
       }
-
     }
 
     // postcss-bem-linter: ignore
@@ -117,7 +116,6 @@
 }
 
 .mdc-switch__native-control:focus ~ .mdc-switch__background {
-
   .mdc-switch__knob {
     &::before {
       position: absolute;
@@ -134,15 +132,14 @@
         background-color: $mdc-switch-unchecked-focus-ring-color-dark;
         opacity: .14;
       }
-
     }
   }
 }
 
 .mdc-switch__native-control:checked ~ .mdc-switch__background {
-
   &::before {
     @include mdc-theme-prop(background-color, primary);
+
     opacity: .5;
   }
 
@@ -173,7 +170,6 @@
 }
 
 .mdc-switch__native-control:disabled ~ .mdc-switch__background {
-
   &::before {
     background-color: $mdc-switch-unchecked-track-color;
     opacity: .12;