Merge pull request #2989 from tvdeyen/tackle-sass-deprecations

Tackle Sass deprecation with mixed declarations

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -2,8 +2,8 @@ button,
 input[type="submit"],
 a.button,
 input.button {
-  @include button-defaults;
   position: relative;
+  @include button-defaults;
 
   &.secondary {
     background-color: $secondary-button-bg-color;

app/assets/builds/alchemy/admin.css.map

@@ -1,7 +1,7 @@
 .resource_info {
   .value {
-    @include clearfix;
     position: relative;
+    @include clearfix;
 
     > label {
       @include form-label;

app/assets/stylesheets/alchemy/admin/buttons.scss

@@ -11,19 +11,21 @@ select {
     $color: $form-field-text-color,
     $margin: 0
   );
-  height: $form-field-height;
-  max-width: 100%;
-  width: auto;
-  font-weight: normal;
-  vertical-align: middle;
-
-  background-image: var(
-    --select-background-image,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='hsla(224deg, 23%, 26%, 0.75)' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E")
-  );
-  background-position: right 0.75em center;
-  background-repeat: no-repeat;
-  background-size: 1em;
+
+  & {
+    height: $form-field-height;
+    max-width: 100%;
+    width: auto;
+    font-weight: normal;
+    vertical-align: middle;
+    background-image: var(
+      --select-background-image,
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='hsla(224deg, 23%, 26%, 0.75)' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E")
+    );
+    background-position: right 0.75em center;
+    background-repeat: no-repeat;
+    background-size: 1em;
+  }
 
   &.tiny {
     padding-right: 0.6em;
@@ -53,12 +55,15 @@ select {
         $color: $form-field-text-color,
         $margin: 0
       );
-      background-image: none;
-      display: flex;
-      gap: var(--spacing-2);
-      align-items: center;
-      font-weight: normal;
-      text-align: left;
+
+      & {
+        background-image: none;
+        display: flex;
+        gap: var(--spacing-2);
+        align-items: center;
+        font-weight: normal;
+        text-align: left;
+      }
 
       .select2-chosen {
         flex-grow: 1;

app/assets/stylesheets/alchemy/admin/resource_info.scss

@@ -105,6 +105,9 @@
   margin: var(--spacing-3) 0;
   position: relative;
   transition: background-color $transition-duration;
+  --sitemap-status-width: calc(
+    var(--sitemap-status-width-base) * var(--sitemap-status-length)
+  );
 
   &.highlight {
     background-color: $sitemap-highlight-color;
@@ -122,10 +125,6 @@
   &:has(.page_infos :nth-child(3)) {
     --sitemap-status-length: 3;
   }
-
-  --sitemap-status-width: calc(
-    var(--sitemap-status-width-base) * var(--sitemap-status-length)
-  );
 }
 
 .sitemap_left_images {

app/assets/stylesheets/alchemy/admin/selects.scss

@@ -36,8 +36,11 @@
 
       a {
         @include tag-base;
-        text-decoration: none;
-        display: flex;
+
+        & {
+          display: flex;
+          text-decoration: none;
+        }
       }
 
       &:hover {
@@ -59,12 +62,12 @@
 }
 
 .tag {
+  pointer-events: none;
+  font-size: $small-font-size;
   @include tag-base(
     $margin: var(--spacing-0) 0,
     $padding: var(--spacing-1) var(--spacing-2) var(--spacing-1)
   );
-  pointer-events: none;
-  font-size: $small-font-size;
 }
 
 .tags .list .tag {