chore(stylelint): remove sass-lint/scss-lint in favor of stylelint

- remove scss-lint and sass-lint
- add stylelint and stylelint-order packages and configuration
- update all *.scss files to new syntax

fixes #14805

core/src/css/ionic.scss

@@ -2,7 +2,6 @@
 @import "./structure";
 @import "./typography";
 @import "./colors";
-
 @import "./padding";
 @import "./float-elements";
 @import "./text-alignment";

core/src/css/padding.scss

@@ -14,59 +14,59 @@ $margin: var(--ion-margin, 16px);
 // --------------------------------------------------
 
 [no-padding] {
-  @include padding(0);
-
   --padding-start: 0;
   --padding-end: 0;
   --padding-top: 0;
   --padding-bottom: 0;
+
+  @include padding(0);
 }
 
 [padding] {
-  @include padding($padding);
-
   --padding-start: #{$padding};
   --padding-end: #{$padding};
   --padding-top: #{$padding};
   --padding-bottom: #{$padding};
+
+  @include padding($padding);
 }
 
 [padding-top] {
-  @include padding($padding, null, null, null);
-
   --padding-top: #{$padding};
+
+  @include padding($padding, null, null, null);
 }
 
 [padding-start] {
-  @include padding-horizontal($padding, null);
-
   --padding-start: #{$padding};
+
+  @include padding-horizontal($padding, null);
 }
 
 [padding-end] {
-  @include padding-horizontal(null, $padding);
-
   --padding-end: #{$padding};
+
+  @include padding-horizontal(null, $padding);
 }
 
 [padding-bottom] {
-  @include padding(null, null, $padding, null);
-
   --padding-bottom: #{$padding};
+
+  @include padding(null, null, $padding, null);
 }
 
 [padding-vertical] {
-  @include padding($padding, null, $padding, null);
-
   --padding-top: #{$padding};
   --padding-bottom: #{$padding};
+
+  @include padding($padding, null, $padding, null);
 }
 
 [padding-horizontal] {
-  @include padding-horizontal($padding);
-
   --padding-start: #{$padding};
   --padding-end: #{$padding};
+
+  @include padding-horizontal($padding);
 }
 
 
@@ -86,7 +86,7 @@ $margin: var(--ion-margin, 16px);
 }
 
 [margin-left] {
-  // scss-lint:disable PropertySpelling
+  /* stylelint-disable-next-line property-blacklist */
   margin-left: $margin;
 }
 
@@ -95,7 +95,7 @@ $margin: var(--ion-margin, 16px);
 }
 
 [margin-right] {
-  // scss-lint:disable PropertySpelling
+  /* stylelint-disable-next-line property-blacklist */
   margin-right: $margin;
 }
 

core/src/css/structure.scss

@@ -27,7 +27,6 @@ body {
   @include padding(0);
 
   position: fixed;
-  overflow: hidden;
 
   width: 100%;
   max-width: 100%;
@@ -36,20 +35,23 @@ body {
 
   text-rendering: optimizeLegibility;
 
+  overflow: hidden;
+
+  touch-action: manipulation;
+  user-select: none;
+
   -webkit-user-drag: none;
 
   -ms-content-zooming: none;
-  touch-action: manipulation;
 
   word-wrap: break-word;
 
   overscroll-behavior-y: contain;
 
   text-size-adjust: none;
-  user-select: none;
 }
 
 [hidden] {
-  // scss-lint:disable ImportantRule
+  /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }

core/src/css/text-transformation.scss

@@ -12,17 +12,17 @@
     // Provide `[text-{bp}]` attributes for transforming the text based
     // on the breakpoint
     [text#{$infix}-uppercase] {
-      // scss-lint:disable ImportantRule
+      /* stylelint-disable-next-line declaration-no-important */
       text-transform: uppercase !important;
     }
 
     [text#{$infix}-lowercase] {
-      // scss-lint:disable ImportantRule
+      /* stylelint-disable-next-line declaration-no-important */
       text-transform: lowercase !important;
     }
 
     [text#{$infix}-capitalize] {
-      // scss-lint:disable ImportantRule
+      /* stylelint-disable-next-line declaration-no-important */
       text-transform: capitalize !important;
     }
   }

core/src/css/typography.scss

@@ -32,20 +32,20 @@ $h6-font-size:                 calc(#{$h1-font-size} - #{$h-step} * 5) !default;
 
 
 :root[mode=ios] {
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
-
   --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
+
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
 }
 
 :root[mode=md] {
-  font-family: "Roboto", "Helvetica Neue", sans-serif;
-
   --ion-font-family: "Roboto", "Helvetica Neue", sans-serif;
+
+  font-family: "Roboto", "Helvetica Neue", sans-serif;
 }
 
 a {
-  color: ion-color(primary, base);
   background-color: transparent;
+  color: ion-color(primary, base);
 }
 
 h1,
@@ -57,6 +57,7 @@ h6 {
   @include margin(16px, null, 10px, null);
 
   font-weight: $headings-font-weight;
+
   line-height: $headings-line-height;
 }
 
@@ -97,7 +98,9 @@ sup {
   position: relative;
 
   font-size: 75%;
+
   line-height: 0;
+
   vertical-align: baseline;
 }