optimized for dev and span

Author: raygig

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@firestitch/style",
   "title": "Style",
   "description": "@firestitch/style",
-  "version": "18.0.42",
+  "version": "18.0.43",
   "repository": {
     "type": "git",
     "url": "https://github.com/Firestitch/ngx-style"

package.json

@@ -1,5 +1,21 @@
+<h3>
+  Delimit: Comma
+</h3>
 <div class="fs-delimit">
   <ng-container *ngFor="let item of items">
-    <span>{{item.name}}</span>
+    <span>
+      {{ item.name }}
+    </span>
+  </ng-container>
+</div>
+<br>
+<h3>
+  Delimit: Middot
+</h3>
+<div class="fs-delimit.middot">
+  <ng-container *ngFor="let item of items">
+    <span>
+      {{ item.name }}
+    </span>
   </ng-container>
 </div>

playground/app/components/generic-helpers/generic-helpers.component.html

@@ -10,17 +10,16 @@
   }
 }
 
-.fs-delimit {
+div[class*='fs-delimit'] {
+  &:not([class*='.middot']) > :not(:last-child):after {
+    content: ',\00a0';
+  }
+    
+  &[class*='.middot'] > :not(:last-child):after {
+    content: '\00a0·\00a0';
+  }
+
   > * {
     display: inline-flex;
-    flex-wrap: wrap;
-
-    &:not(.middot):not(:last-child):after {
-      content: ',\00a0';
-    }
-
-    &.middot:not(:last-child):after {
-      content: '\00a0·\00a0';
-    }
   }
-}
+}

src/styles/_helpers.scss

@@ -2,15 +2,17 @@
 
 @mixin layout() {
   .fs-row,
-  [class*='fs-row'] {
+  span[class*='fs-row'],
+  div[class*='fs-row'] {
     display: flex;
     align-items: center;
 
     @include attributeMixin('class');
   }
 
   .fs-column,
-  [class*='fs-column'] {
+  div[class*='fs-column'],
+  span[class*='fs-column'] {
     display: flex;
     flex-direction: column;
     align-items: unset;
@@ -26,45 +28,53 @@
    * Greater than breakpoints
    */
   @media (min-width: #{variables.$break-xsmall + 1px}) {
-    [fs\.gt-xs*='fs-row'] {
+    div[fs\.gt-xs*='fs-row'],
+    span[fs\.gt-xs*='fs-row'] {
       @include attributeMixin('fs\\.gt-xs');
     }
 
-    [fs\.gt-xs*='fs-column'] {
+    div[fs\.gt-xs*='fs-column'],
+    span[fs\.gt-xs*='fs-column'] {
       @include attributeMixin('fs\\.gt-xs', false);
     }
   }
 
   @media (min-width: #{variables.$break-small + 1px}) {
-    [fs\.gt-sm*='fs-row'] {
+    div[fs\.gt-sm*='fs-row'],
+    span[fs\.gt-sm*='fs-row'] {
       @include attributeMixin('fs\\.gt-sm');
     }
 
-    [fs\.gt-sm*='fs-column'] {
+    div[fs\.gt-sm*='fs-column'],
+    span[fs\.gt-sm*='fs-column'] {
       @include attributeMixin('fs\\.gt-sm', false);
     }
   }
 
   @media (min-width: #{variables.$break-medium + 1px}) {
-    [fs\.gt-md*='fs-row'] {
+    div[fs\.gt-md*='fs-row'],
+    span[fs\.gt-md*='fs-row'] {
       @include attributeMixin('fs\\.gt-md');
     }
 
-    [fs\.gt-md*='fs-column'] {
+    div[fs\.gt-md*='fs-column'],
+    span[fs\.gt-md*='fs-column'] {
       @include attributeMixin('fs\\.gt-md', false);
     }
   }
 
   @media (min-width: #{variables.$break-large + 1px}) {
-    [fs\.gt-lg*='fs-row'] {
+    div[fs\.gt-lg*='fs-row'],
+    span[fs\.gt-lg*='fs-row'] {
       & {
         flex-direction: row;
       }
 
       @include attributeMixin('fs\\.gt-lg');
     }
 
-    [fs\.gt-lg*='fs-column'] {
+    div[fs\.gt-lg*='fs-column'],
+    span[fs\.gt-lg*='fs-column'] {
       @include attributeMixin('fs\\.gt-lg', false);
     }
   }
@@ -73,41 +83,49 @@
    * Less than breakpoints
    */
   @media (max-width: variables.$break-xsmall) {
-    [fs\.lt-xs*='fs-row'] {
+    div[fs\.lt-xs*='fs-row'],
+    span[fs\.lt-xs*='fs-row'] {
       @include attributeMixin('fs\\.lt-xs');
     }
 
-    [fs\.lt-xs*='fs-column'] {
+    div[fs\.lt-xs*='fs-column'],
+    span[fs\.lt-xs*='fs-column'] {
       @include attributeMixin('fs\\.lt-xs', false);
     }
   }
 
   @media (max-width: variables.$break-small) {
-    [fs\.lt-sm*='fs-row'] {
+    div[fs\.lt-sm*='fs-row'],
+    span[fs\.lt-sm*='fs-row'] {
       @include attributeMixin('fs\\.lt-sm');
     }  
 
-    [fs\.lt-sm*='fs-column'] {
+    div[fs\.lt-sm*='fs-column'],
+    span[fs\.lt-sm*='fs-column'] {
       @include attributeMixin('fs\\.lt-sm', false);
     }  
   }
 
   @media (max-width: variables.$break-medium) {
-    [fs\.lt-md*='fs-row'] {
+    div[fs\.lt-md*='fs-row'],
+    span[fs\.lt-md*='fs-row'] {
       @include attributeMixin('fs\\.lt-md');
     }
 
-    [fs\.lt-md*='fs-column'] {
+    div[fs\.lt-md*='fs-column'],
+    span[fs\.lt-md*='fs-column'] {
       @include attributeMixin('fs\\.lt-md', false);
     }     
   }
 
   @media (max-width: variables.$break-large) {
-    [fs\.lt-lg*='fs-row'] {
+    div[fs\.lt-lg*='fs-row'],
+    span[fs\.lt-lg*='fs-row'] {
       @include attributeMixin('fs\\.lt-lg');
     } 
 
-    [fs\.lt-lg*='fs-column'] {
+    div[fs\.lt-lg*='fs-column'],
+    span[fs\.lt-lg*='fs-column'] {
       @include attributeMixin('fs\\.lt-lg', false);
     } 
   }