diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml index bd59ab3e31d..40b582b255c 100644 --- a/.stylelintrc.yaml +++ b/.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/ diff --git a/package.json b/package.json index 01fb9cde219..88314b2a39b 100644 --- a/package.json +++ b/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", diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss index bad8aa0b0da..29e99c5126a 100644 --- a/packages/mdc-button/mdc-button.scss +++ b/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); } diff --git a/packages/mdc-drawer/temporary/mdc-temporary-drawer.scss b/packages/mdc-drawer/temporary/mdc-temporary-drawer.scss index 871913d782f..025b6815502 100644 --- a/packages/mdc-drawer/temporary/mdc-temporary-drawer.scss +++ b/packages/mdc-drawer/temporary/mdc-temporary-drawer.scss @@ -98,6 +98,7 @@ &__footer { @include mdc-elevation(2); + flex-shrink: 0; } diff --git a/packages/mdc-layout-grid/_mixins.scss b/packages/mdc-layout-grid/_mixins.scss index d1b59ccbd19..d33892d4b45 100644 --- a/packages/mdc-layout-grid/_mixins.scss +++ b/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}); diff --git a/packages/mdc-menu/simple/mdc-simple-menu.scss b/packages/mdc-menu/simple/mdc-simple-menu.scss index a3c59c68556..3cadf971997 100644 --- a/packages/mdc-menu/simple/mdc-simple-menu.scss +++ b/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; diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index 5f5feb0d7d7..9e115aeadea 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/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 } diff --git a/packages/mdc-switch/mdc-switch.scss b/packages/mdc-switch/mdc-switch.scss index 55e15441aa6..c125acf1b92 100644 --- a/packages/mdc-switch/mdc-switch.scss +++ b/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;