chore(core): update styles for Sass Mixed Declarations

https://sass-lang.com/documentation/breaking-changes/mixed-decls/ This was annoying. `auto-rtl` and `auto-rtl-group` can't be used anymore. Some other mixins _shouldn't be used anymore since they require any following styles to be wrapped in `& {}`. I don't care. Let the minifiers and the `postcss-combine-duplicated-selectors` handle that.
mlaursen · Aug 4, 2024 · 306f13f · 306f13f
1 parent 46e3681
commit 306f13f
Show file tree

Hide file tree

Showing 41 changed files with 643 additions and 369 deletions.
diff --git a/...pp/(main)/(markdown)/(demos)/components/snackbar/MultipleVisibleToastsExample.module.scss b/...pp/(main)/(markdown)/(demos)/components/snackbar/MultipleVisibleToastsExample.module.scss
@@ -1,12 +1,12 @@
 @use "everything";
 
 .toast {
+  position: relative;
+  transform-origin: right;
+
   @include everything.rtl {
     transform-origin: left;
   }
-
-  position: relative;
-  transform-origin: right;
 }
 
 .progress {

diff --git a/...pp/(main)/(markdown)/(demos)/components/table/UpdatingSelectedRowColorExample.module.scss b/...pp/(main)/(markdown)/(demos)/components/table/UpdatingSelectedRowColorExample.module.scss
@@ -1,6 +1,8 @@
 @use "everything";
 
 .selected {
+  @include everything.table-set-var(cell-color, currentcolor);
+
   @include everything.mouse-only(true) {
     &:hover {
       background-color: color-mix(
@@ -10,6 +12,4 @@
       );
     }
   }
-
-  @include everything.table-set-var(cell-color, currentcolor);
 }
diff --git a/...rc/app/(main)/(markdown)/(demos)/components/tooltip/ProgressbarTooltipExample.module.scss b/...rc/app/(main)/(markdown)/(demos)/components/tooltip/ProgressbarTooltipExample.module.scss
@@ -6,13 +6,17 @@
 }
 
 .tooltip {
-  @include everything.auto-rtl(left, var(--offset, 0%));
-
+  left: var(--offset, 0%);
   position: absolute;
   top: calc(100% + 1em);
   transform: translateX(-50%);
   transition:
     left everything.$linear-duration everything.$linear-timing-function,
     background-color 0.3s;
   will-change: left, right;
+
+  @include everything.rtl {
+    left: auto;
+    right: var(--offset, 0%);
+  }
 }
diff --git a/...rc/app/(main)/components/material-icons-and-symbols/FilterSymbolCustomization.module.scss b/...rc/app/(main)/components/material-icons-and-symbols/FilterSymbolCustomization.module.scss
@@ -5,17 +5,17 @@
 }
 
 .firstLabel {
+  transform: translateX(0);
+
   @include everything.rtl {
     transform: translateX(0);
   }
-
-  transform: translateX(0);
 }
 
 .lastLabel {
+  transform: translateX(-100%);
+
   @include everything.rtl {
     transform: translateX(100%);
   }
-
-  transform: translateX(-100%);
 }
diff --git a/apps/docs/src/app/(main)/components/material-icons-and-symbols/FiltersSheet.module.scss b/apps/docs/src/app/(main)/components/material-icons-and-symbols/FiltersSheet.module.scss
@@ -10,7 +10,13 @@
 
 .offset {
   @include everything.desktop-media {
-    @include everything.auto-rtl(left, everything.layout-get-var(size));
+    @include everything.layout-use-var(left, size);
+
+    @include everything.rtl {
+      @include everything.layout-use-var(right, size);
+
+      left: 0;
+    }
   }
 }
 

diff --git a/...docs/src/app/(main)/components/material-icons-and-symbols/HowToUseSheetHeader.module.scss b/...docs/src/app/(main)/components/material-icons-and-symbols/HowToUseSheetHeader.module.scss
@@ -7,7 +7,11 @@
 }
 
 .title {
-  @include everything.auto-rtl(margin-right, auto);
-
   flex-grow: 0;
+  margin-right: auto;
+
+  @include everything.rtl {
+    margin-left: auto;
+    margin-right: 0;
+  }
 }
diff --git a/apps/docs/src/components/Blockquote.module.scss b/apps/docs/src/components/Blockquote.module.scss
@@ -3,9 +3,7 @@
 .blockquote {
   $border-style: 0.25em solid everything.divider-get-var(color);
 
-  // @include everything.theme-use-var(color, text-secondary-color);
-  @include everything.auto-rtl(border-left, $border-style);
-
+  border-left: $border-style;
   font-style: italic;
   margin: 1em 0;
   padding: 0.5em 1em;
@@ -18,6 +16,11 @@
   p:last-child {
     margin-bottom: 0;
   }
+
+  @include everything.rtl {
+    border-left: 0;
+    border-right: $border-style;
+  }
 }
 
 .themed {

diff --git a/apps/docs/src/components/DemoCode/ScssCodeEditor.module.scss b/apps/docs/src/components/DemoCode/ScssCodeEditor.module.scss
@@ -1,14 +1,18 @@
 @use "everything";
 
 .tooltip {
-  @include everything.auto-rtl(right, 1.25rem);
-
   background-color: everything.$black;
   font-family: var(--code-font-family);
   font-size: var(--code-font-size);
   margin: 0;
   padding: 0.75em;
   position: absolute;
+  right: 1.25rem;
   top: 0.25rem;
   z-index: 10;
+
+  @include everything.rtl {
+    left: 1.25rem;
+    right: auto;
+  }
 }
diff --git a/apps/docs/src/components/LinkableHeading.module.scss b/apps/docs/src/components/LinkableHeading.module.scss
@@ -3,30 +3,31 @@
 .container {
   --spacing: 1em;
 
-  @include everything.touch-only($css-modules: true) {
-    --spacing: 0;
-  }
-  @include everything.auto-rtl-group(
-    (
-      margin-left: everything.negate-var(var(--spacing)),
-      padding-left: var(--spacing),
-    )
-  );
-
   margin-bottom: 0.5em;
+  margin-left: everything.negate-var(var(--spacing));
   margin-top: 1.25em;
+  padding-left: var(--spacing);
   position: relative;
   scroll-margin-top: calc(0.5rem + everything.layout-get-var(header-height));
 
   &:hover .link {
     opacity: 1;
   }
+
+  @include everything.touch-only($css-modules: true) {
+    --spacing: 0;
+  }
+  @include everything.rtl {
+    margin-left: 0;
+    margin-right: everything.negate-var(var(--spacing));
+    padding-left: 0;
+    padding-right: var(--spacing);
+  }
 }
 
 .link {
-  @include everything.auto-rtl(left, 0);
-
   color: inherit;
+  left: 0;
   opacity: 0;
   position: absolute;
   text-decoration: none;
@@ -45,4 +46,9 @@
   &:hover::after {
     text-decoration: underline;
   }
+
+  @include everything.rtl {
+    left: auto;
+    right: 0;
+  }
 }
diff --git a/apps/docs/src/components/ReactMDLogo.module.scss b/apps/docs/src/components/ReactMDLogo.module.scss
@@ -15,9 +15,9 @@
 }
 
 .text {
+  transform: translateX(-0.875em);
+
   @include everything.rtl {
     transform: translateX(0.8em);
   }
-
-  transform: translateX(-0.875em);
 }
diff --git a/apps/docs/src/components/TableOfContents/RenderTableOfContentsItem.module.scss b/apps/docs/src/components/TableOfContents/RenderTableOfContentsItem.module.scss
@@ -13,11 +13,12 @@ $tree-padding: calc(everything.tree-get-var(depth) * 1.125rem + 1rem);
     padding-right: $tree-padding;
   }
 
-  display: block;
-  padding: 0.5rem 1rem 0.5rem $tree-padding;
-  position: relative;
-
-  text-decoration: none;
+  & {
+    display: block;
+    padding: 0.5rem 1rem 0.5rem $tree-padding;
+    position: relative;
+    text-decoration: none;
+  }
 
   &:hover {
     @include everything.link-use-var(color);

diff --git a/apps/docs/src/components/TableOfContents/TableOfContents.module.scss b/apps/docs/src/components/TableOfContents/TableOfContents.module.scss
@@ -2,19 +2,20 @@
 
 .container {
   @include everything.layout-use-var(top, header-height);
-  @include everything.desktop-media {
-    display: grid;
-    max-height: calc(100dvh - everything.layout-get-var(header-height));
-    overflow: auto;
-  }
-  @include everything.rtl {
-    left: 0;
-    right: auto;
-  }
 
   display: none;
   padding: 1rem;
   position: fixed;
   right: everything.scrollbar-size();
   width: var(--toc-width);
+
+  @include everything.rtl {
+    left: 0;
+    right: auto;
+  }
+  @include everything.desktop-media {
+    display: grid;
+    max-height: calc(100dvh - everything.layout-get-var(header-height));
+    overflow: auto;
+  }
 }
diff --git a/packages/code/src/_code.scss b/packages/code/src/_code.scss
@@ -156,10 +156,14 @@ $color-preview-border-width: $color-preview-outer-width + 0.0625em;
 
       // Note: The height and positioning is set up in a way so that the copy button
       // can be visible in a single-line code example without displaying scrollbars
-      @include core.auto-rtl(right, 1rem);
-
       position: absolute;
+      right: 1rem;
       top: 0.25rem;
+
+      @include core.rtl {
+        left: 1rem;
+        right: auto;
+      }
     }
 
     &__progress {
@@ -203,9 +207,8 @@ $color-preview-border-width: $color-preview-outer-width + 0.0625em;
   }
 
   .color-preview {
-    @include core.auto-rtl(padding-left, 1.25em);
-
     display: inline-block;
+    padding-left: 1.25em;
     position: relative;
 
     &::before,
@@ -245,6 +248,11 @@ $color-preview-border-width: $color-preview-outer-width + 0.0625em;
     &:hover::after {
       opacity: 1;
     }
+
+    @include core.rtl {
+      padding-left: 0;
+      padding-right: 1.25em;
+    }
   }
 }
 

diff --git a/packages/core/src/_box-shadows.scss b/packages/core/src/_box-shadows.scss
@@ -185,6 +185,8 @@ $box-shadow-3-layers: (
   }
 }
 
+/// Note: This will need to be included at the end of a block with the new Sass
+/// rules or prefix styles with `& {}`
 @mixin elevation-transition(
   $start-z-value,
   $end-z-value,

diff --git a/packages/core/src/_core.scss b/packages/core/src/_core.scss
@@ -275,10 +275,12 @@ $_layer-order: (
 
     @each $alignment in typography.$text-alignments {
       .rmd-align-#{$alignment} {
+        text-align: $alignment;
+
         @if $alignment != center {
-          @include utils.auto-rtl(text-align, $alignment);
-        } @else {
-          text-align: $alignment;
+          @include utils.rtl {
+            text-align: utils.swap-position($alignment);
+          }
         }
       }
     }