(components) feature: Use CSS @layer for specificity control

.changeset/tangy-ways-reply.md

@@ -0,0 +1,5 @@
+---
+"@wethegit/components": patch
+---
+
+Implement CSS @layer for better specificity control. Adds four layers (reset, global, utility, component) to allow easier style overrides.

packages/wethegit-components/src/components/back-to-top/back-to-top.module.scss

@@ -1,37 +1,39 @@
 @use "@local/styles/animation/animation-utilities" as *;
 
-.button {
-  --scale: 1;
+@layer component {
+  .button {
+    --scale: 1;
 
-  background-color: #000;
-  bottom: 1rem;
-  color: #fff;
-  opacity: 0;
-  padding: 1rem;
-  position: fixed;
-  right: 1rem;
-  transform: scale(var(--scale));
-  transition:
-    opacity 0.3s,
-    transform duration(0.2s);
-  z-index: 10;
-}
+    background-color: #000;
+    bottom: 1rem;
+    color: #fff;
+    opacity: 0;
+    padding: 1rem;
+    position: fixed;
+    right: 1rem;
+    transform: scale(var(--scale));
+    transition:
+      opacity 0.3s,
+      transform duration(0.2s);
+    z-index: 10;
+  }
 
-@media (hover: hover) {
-  .button:hover {
-    --scale: 1.1;
+  @media (hover: hover) {
+    .button:hover {
+      --scale: 1.1;
+    }
   }
-}
 
-.buttonShown {
-  opacity: 1;
-}
+  .buttonShown {
+    opacity: 1;
+  }
 
-.viewportReference {
-  height: var(--reveal-threshold, 300px);
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 100%;
+  .viewportReference {
+    height: var(--reveal-threshold, 300px);
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
 }

packages/wethegit-components/src/components/breakpoint-snipe/breakpoint-snipe.module.scss

@@ -1,18 +1,20 @@
-.breakpointSnipe {
-  align-items: center;
-  aspect-ratio: 1/1;
-  background-color: white;
-  bottom: 0;
-  color: black;
-  display: flex;
-  line-height: 1;
-  place-content: center center;
-  position: fixed;
-  right: 0;
-  width: 40px;
-}
+@layer component {
+  .breakpointSnipe {
+    align-items: center;
+    aspect-ratio: 1/1;
+    background-color: white;
+    bottom: 0;
+    color: black;
+    display: flex;
+    line-height: 1;
+    place-content: center center;
+    position: fixed;
+    right: 0;
+    width: 40px;
+  }
 
-.breakpointSnipeDark {
-  background-color: black;
-  color: white;
+  .breakpointSnipeDark {
+    background-color: black;
+    color: white;
+  }
 }

packages/wethegit-components/src/components/flex/flex.module.scss

@@ -1,82 +1,84 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-@mixin breakpoint-classnames($prefix: "") {
-  .align#{$prefix}-flex-start {
-    align-items: flex-start;
+@layer component {
+  @mixin breakpoint-classnames($prefix: "") {
+    .align#{$prefix}-flex-start {
+      align-items: flex-start;
+    }
+
+    .align#{$prefix}-center {
+      align-items: center;
+    }
+
+    .align#{$prefix}-flex-end {
+      align-items: flex-end;
+    }
+
+    .align#{$prefix}-baseline {
+      align-items: baseline;
+    }
+
+    .align#{$prefix}-stretch {
+      align-items: stretch;
+    }
+
+    .justify#{$prefix}-flex-start {
+      justify-content: flex-start;
+    }
+
+    .justify#{$prefix}-center {
+      justify-content: center;
+    }
+
+    .justify#{$prefix}-flex-end {
+      justify-content: flex-end;
+    }
+
+    .justify#{$prefix}-space-between {
+      justify-content: space-between;
+    }
+
+    .justify#{$prefix}-space-around {
+      justify-content: space-around;
+    }
+
+    .wrap#{$prefix}-true {
+      flex-wrap: wrap;
+    }
+
+    .wrap#{$prefix}-false {
+      flex-wrap: nowrap;
+    }
+
+    .reverse#{$prefix}-true {
+      flex-direction: row-reverse;
+    }
+
+    .reverse#{$prefix}-false {
+      flex-direction: row;
+    }
   }
 
-  .align#{$prefix}-center {
-    align-items: center;
+  .flex {
+    display: flex;
   }
 
-  .align#{$prefix}-flex-end {
-    align-items: flex-end;
-  }
-
-  .align#{$prefix}-baseline {
-    align-items: baseline;
-  }
-
-  .align#{$prefix}-stretch {
-    align-items: stretch;
-  }
-
-  .justify#{$prefix}-flex-start {
-    justify-content: flex-start;
-  }
-
-  .justify#{$prefix}-center {
-    justify-content: center;
-  }
-
-  .justify#{$prefix}-flex-end {
-    justify-content: flex-end;
-  }
-
-  .justify#{$prefix}-space-between {
-    justify-content: space-between;
-  }
+  @include breakpoint-classnames;
+  @include breakpoint-classnames(-sm);
 
-  .justify#{$prefix}-space-around {
-    justify-content: space-around;
+  @media #{$md-up} {
+    @include breakpoint-classnames(-md);
   }
 
-  .wrap#{$prefix}-true {
-    flex-wrap: wrap;
+  @media #{$lg-up} {
+    @include breakpoint-classnames(-lg);
   }
 
-  .wrap#{$prefix}-false {
-    flex-wrap: nowrap;
+  @media #{$xl-up} {
+    @include breakpoint-classnames(-xl);
   }
 
-  .reverse#{$prefix}-true {
-    flex-direction: row-reverse;
+  @media #{$xxl-up} {
+    @include breakpoint-classnames(-xxl);
   }
-
-  .reverse#{$prefix}-false {
-    flex-direction: row;
-  }
-}
-
-.flex {
-  display: flex;
-}
-
-@include breakpoint-classnames;
-@include breakpoint-classnames(-sm);
-
-@media #{$md-up} {
-  @include breakpoint-classnames(-md);
-}
-
-@media #{$lg-up} {
-  @include breakpoint-classnames(-lg);
-}
-
-@media #{$xl-up} {
-  @include breakpoint-classnames(-xl);
-}
-
-@media #{$xxl-up} {
-  @include breakpoint-classnames(-xxl);
 }

packages/wethegit-components/src/components/grid-layout/column/column.module.scss

@@ -1,45 +1,47 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 @use "../styles/grid-layout-utilities" as layout;
 
-@mixin make-column-classnames($breakpoint: false) {
-  $base-class: "span";
+@layer component {
+  @mixin make-column-classnames($breakpoint: false) {
+    $base-class: "span";
 
-  @if $breakpoint {
-    $base-class: "span-#{$breakpoint}";
-  }
+    @if $breakpoint {
+      $base-class: "span-#{$breakpoint}";
+    }
 
-  @for $i from 1 through 12 {
-    .#{$base-class}-#{$i} {
-      flex: 0 0 layout.grid-calc($i);
+    @for $i from 1 through 12 {
+      .#{$base-class}-#{$i} {
+        flex: 0 0 layout.grid-calc($i);
+      }
     }
   }
-}
 
-.column {
-  flex: 1;
-  list-style: none;
-  margin: 0;
-  padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
-}
+  .column {
+    flex: 1;
+    list-style: none;
+    margin: 0;
+    padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
+  }
 
-.deep {
-  padding-inline: 0;
-}
+  .deep {
+    padding-inline: 0;
+  }
 
-@include make-column-classnames;
+  @include make-column-classnames;
 
-@media #{$md-up} {
-  @include make-column-classnames(md);
-}
+  @media #{$md-up} {
+    @include make-column-classnames(md);
+  }
 
-@media #{$lg-up} {
-  @include make-column-classnames(lg);
-}
+  @media #{$lg-up} {
+    @include make-column-classnames(lg);
+  }
 
-@media #{$xl-up} {
-  @include make-column-classnames(xl);
-}
+  @media #{$xl-up} {
+    @include make-column-classnames(xl);
+  }
 
-@media #{$xxl-up} {
-  @include make-column-classnames(xxl);
+  @media #{$xxl-up} {
+    @include make-column-classnames(xxl);
+  }
 }

packages/wethegit-components/src/components/grid-layout/row/row.module.scss

@@ -1,21 +1,23 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-.row {
-  display: block;
-  inline-size: min(var(--wtc-row-width, 1440px), 100%);
-  list-style: none;
-  margin-inline: auto;
-  padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
-}
+@layer component {
+  .row {
+    display: block;
+    inline-size: min(var(--wtc-row-width, 1440px), 100%);
+    list-style: none;
+    margin-inline: auto;
+    padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
+  }
 
-@media #{$md-up} {
-  .row:not(.stackMedium) {
-    display: flex;
+  @media #{$md-up} {
+    .row:not(.stackMedium) {
+      display: flex;
+    }
   }
-}
 
-@media #{$lg-up} {
-  .stackMedium {
-    display: flex;
+  @media #{$lg-up} {
+    .stackMedium {
+      display: flex;
+    }
   }
 }