Update theme scss mixin to not increase selector specificity

pradoslaw · Dec 6, 2024 · 979963f · 979963f
1 parent 3a13211
commit 979963f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 33 deletions.
diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -63,19 +63,18 @@ $forum-aside-radius:            8px;
   --var-navbar-user-avatar-padding: 0.25rem;
 }
 
-@include theme.both {
-  body {
-    background: var(--body-background);
-  }
-  .neon-post {
-    border:        var(--post-border);
-    background:    var(--post-background);
-    border-radius: $post-radius;
-    .neon-post-header,
-    .neon-post-footer {
-      background:   var(--post-header-background);
-      border-color: var(--post-header-border-color);
-    }
+body {
+  background: var(--body-background) !important; // overrides _reboot.scss body {background}
+}
+
+.neon-post {
+  border:        var(--post-border) !important; // overrides .card {border}
+  background:    var(--post-background);
+  border-radius: $post-radius;
+  .neon-post-header,
+  .neon-post-footer {
+    background:   var(--post-header-background);
+    border-color: var(--post-header-border-color);
   }
 }
 
@@ -90,11 +89,9 @@ $forum-aside-radius:            8px;
   }
 }
 
-@include theme.both {
-  .neon-section-heading {
-    border-bottom-width: 2px;
-    border-bottom-color: var(--section-heading-divider-color) !important; // !important for h4.section
-  }
+.neon-section-heading {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--section-heading-divider-color) !important; // !important for h4.section
 }
 
 .default-avatar {
@@ -125,7 +122,7 @@ $forum-aside-radius:            8px;
 
 .neon-navbar-text,
 .neon-navbar-link {
-  color: var(--navbar-text-color) !important;
+  color: var(--navbar-text-color) !important; // overrides .nav-link {color}
 }
 
 .viewers-online {

diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss
@@ -8,25 +8,14 @@
 
 @mixin scope($class) {
   @if & {
-    html.#{$class} & {@content}
+    *:where(html.#{$class}) & {@content}
   } @else {
-    html.#{$class} {@content}
+    *:where(html.#{$class}) {@content}
   }
 }
 
 @mixin both {
-  /**
-   * The dark() and light() mixins increase selector specificity.
-   * In some cases, it's necessary to apply a common style to both
-   * themes, overriding a previously defined style.
-   * For that we need to artificially elevate the specificity 
-   * of the style, without actually changing any style.
-   */
-  @if & {
-    html.theme-light &, html.theme-dark & {@content}
-  } @else {
-    html.theme-light, html.theme-dark {@content}
-  }
+  @content;
 }
 
 @mixin property($property, $light, $dark) {