feat(layout): implement selector-base

combine-at-rules.cjs

@@ -44,9 +44,13 @@ const plugin = (options = {}) => {
     },
     Root(root) {
       // Combine all of the at-rules into a single at-rule
+      // Only do this for rules found in the current file.
       for (const atRuleName in atRules) {
         for (const atRuleParams in atRules[atRuleName]) {
           const atRule = atRules[atRuleName][atRuleParams];
+
+          console.log(atRule);
+
           root.append(atRule);
         }
       }

postcss.config.cjs

@@ -2,7 +2,7 @@
 const config = {
   plugins: [
     require("postcss-discard-comments"),
-    require("./combine-at-rules.cjs")({ atRules: ["layer"] }),
+    // require("./combine-at-rules.cjs")({ atRules: ["layer"] }),
     require("autoprefixer"),
     require("cssnano"),
   ],

src/scss/layout/columns/_defaults.scss

@@ -6,10 +6,15 @@
 // They should not be used to define direct property values (i.e. font-size, color, etc.).
 // Those should be defined as custom properties in the `_variables.scss` file.
 
+@use "../../defaults" as root-defaults;
+
 // Columns selectors.
-$columns-selector: ".columns" !default;
-$columns-count-selector-prefix: ".count-" !default;
-$columns-span-selector-prefix: ".span-" !default;
+$columns-selector-base: root-defaults.$selector-base !default;
+$columns-selector: "columns" !default;
+$columns-count-selector-base: $columns-selector-base !default;
+$columns-count-selector-prefix: "count-" !default;
+$columns-span-selector-base: $columns-selector-base !default;
+$columns-span-selector-prefix: "span-" !default;
 
 // Columns properties.
 $columns-max-width: 1fr !default;

src/scss/layout/columns/_index.scss

@@ -7,7 +7,7 @@
 @use "../../mixins/screen";
 
 @include layer(layout) {
-  #{defaults.$columns-selector} {
+  #{defaults.$columns-selector-base}#{defaults.$columns-selector} {
     display: grid;
     grid-template-columns: $columns-grid-template-columns;
     gap: $columns-row-gap $columns-column-gap;
@@ -18,26 +18,26 @@
   }
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    #{defaults.$columns-count-selector-prefix}#{$i} {
+    #{defaults.$columns-count-selector-base}#{defaults.$columns-count-selector-prefix}#{$i} {
       --#{root-defaults.$prefix}columns-count: #{$i};
 
       // For span values bigger than the actual column count, set them to the
       // maximum column count so they don't break the layout.
       @for $j from $i + 1 through defaults.$columns-max-count {
-        #{defaults.$columns-span-selector-prefix}#{$j} {
+        #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {
           --#{root-defaults.$prefix}columns-span: #{$i};
         }
       }
     }
 
-    #{defaults.$columns-span-selector-prefix}#{$i} {
+    #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {
       --#{root-defaults.$prefix}columns-span: #{$i};
     }
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
   @include screen.trigger(force-single-column) {
-    #{defaults.$columns-selector} {
+    #{defaults.$columns-selector-base}#{defaults.$columns-selector} {
       --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};
 
       > * {
@@ -49,7 +49,7 @@
         from defaults.$columns-min-count
         through defaults.$columns-max-count
       {
-        #{defaults.$columns-span-selector-prefix}#{$i} {
+        #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {
           --#{root-defaults.$prefix}columns-span: 1;
         }
       }

src/scss/layout/container/_defaults.scss

@@ -6,11 +6,17 @@
 // They should not be used to define direct property values (i.e. font-size, color, etc.).
 // Those should be defined as custom properties in the `_variables.scss` file.
 
+@use "../../defaults" as root-defaults;
+
 // Container selectors.
-$container-selector: ".container" !default;
-$container-breakout-selector: ".breakout" !default;
-$container-feature-selector: ".feature" !default;
-$container-full-width-selector: ".full-width" !default;
+$container-selector-base: root-defaults.$selector-base !default;
+$container-selector: "container" !default;
+$container-breakout-selector-base: $container-selector-base !default;
+$container-breakout-selector: "breakout" !default;
+$container-feature-selector-base: $container-selector-base !default;
+$container-feature-selector: "feature" !default;
+$container-full-width-selector-base: $container-selector-base !default;
+$container-full-width-selector: "full-width" !default;
 
 // Container properties.
 $container-breakout-width: 15ch !default;

src/scss/layout/container/_index.scss

@@ -5,37 +5,39 @@
 @use "../../mixins/layer" as *;
 
 @include layer(layout) {
-  #{defaults.$container-selector},
-  #{defaults.$container-selector} > #{defaults.$container-full-width-selector} {
-    display: grid;
-    grid-template-columns:
-      [full-width-start] $container-full-width-section-width
-      [feature-start] $container-feature-section-width
-      [breakout-start] $container-breakout-section-width
-      [content-start] $container-content-section-width
-      [content-end]
-      $container-breakout-section-width [breakout-end]
-      $container-feature-section-width [feature-end]
-      $container-full-width-section-width [full-width-end];
+  #{defaults.$container-selector-base}#{defaults.$container-selector} {
+    &,
+    > #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {
+      display: grid;
+      grid-template-columns:
+        [full-width-start] $container-full-width-section-width
+        [feature-start] $container-feature-section-width
+        [breakout-start] $container-breakout-section-width
+        [content-start] $container-content-section-width
+        [content-end]
+        $container-breakout-section-width [breakout-end]
+        $container-feature-section-width [feature-end]
+        $container-full-width-section-width [full-width-end];
 
-    > :not(
-        #{defaults.$container-breakout-selector},
-        #{defaults.$container-full-width-selector},
-        #{defaults.$container-feature-selector}
-      ) {
-      grid-column: content;
-    }
+      > :not(
+          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+        ) {
+        grid-column: content;
+      }
 
-    #{defaults.$container-breakout-selector} {
-      grid-column: breakout;
-    }
+      #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {
+        grid-column: breakout;
+      }
 
-    #{defaults.$container-feature-selector} {
-      grid-column: feature;
-    }
+      #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
+        grid-column: feature;
+      }
 
-    #{defaults.$container-full-width-selector} {
-      grid-column: full-width;
+      #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {
+        grid-column: full-width;
+      }
     }
   }
 }