crayon-css 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crayon-css",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A Sass utility CSS toolkit.",
   "sass": "src/crayon.scss",
   "files": [

package/src/_accessibility.scss

@@ -1,22 +1,24 @@
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
+@layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
 
-.not-sr-only {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
+  .not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
 }

package/src/_borders.scss

@@ -57,21 +57,23 @@
   }
 }
 
-@each $key, $width in config.$border-widths {
-  @if $key == "DEFAULT" {
-    @include _border-width-classes("", $width);
-  } @else {
-    @include _border-width-classes($key, $width);
+@layer utilities {
+  @each $key, $width in config.$border-widths {
+    @if $key == "DEFAULT" {
+      @include _border-width-classes("", $width);
+    } @else {
+      @include _border-width-classes($key, $width);
+    }
   }
-}
 
-// ─── Border Radius ────────────────────────────────────────────────────────────
+  // ─── Border Radius ────────────────────────────────────────────────────────────
 
-@each $key, $radius in config.$border-radii {
-  $rem: if($radius == 0 or $radius == 9999px, $radius, utility.px-to-rem($radius));
-  @if $key == "DEFAULT" {
-    .rounded { border-radius: $rem; }
-  } @else {
-    .rounded-#{$key} { border-radius: $rem; }
+  @each $key, $radius in config.$border-radii {
+    $rem: if($radius == 0 or $radius == 9999px, $radius, utility.px-to-rem($radius));
+    @if $key == "DEFAULT" {
+      .rounded { border-radius: $rem; }
+    } @else {
+      .rounded-#{$key} { border-radius: $rem; }
+    }
   }
 }

package/src/_colors.scss

@@ -65,16 +65,18 @@
   }
 }
 
-@each $name, $value in config.$colors {
-  .bg-#{$name} {
-    background-color: convert($value);
-  }
+@layer utilities {
+  @each $name, $value in config.$colors {
+    .bg-#{$name} {
+      background-color: convert($value);
+    }
 
-  .text-#{$name} {
-    color: convert($value);
-  }
+    .text-#{$name} {
+      color: convert($value);
+    }
 
-  .border-#{$name} {
-    border-color: convert($value);
+    .border-#{$name} {
+      border-color: convert($value);
+    }
   }
 }

package/src/_display.scss

@@ -2,33 +2,35 @@
 @use "config";
 @use "utility";
 
-.block {
-  display: block;
-}
+@layer utilities {
+  .block {
+    display: block;
+  }
 
-.inline {
-  display: inline;
-}
+  .inline {
+    display: inline;
+  }
 
-.inline-block {
-  display: inline-block;
-}
+  .inline-block {
+    display: inline-block;
+  }
 
-.hidden,
-.hide {
-  display: none;
-}
+  .hidden,
+  .hide {
+    display: none;
+  }
 
-// ─── Container ────────────────────────────────────────────────────────────────
+  // ─── Container ────────────────────────────────────────────────────────────────
 
-.container {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
+  .container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
 
-  @each $name, $breakpoint in config.$breakpoints {
-    @media (min-width: #{$breakpoint}) {
-      max-width: $breakpoint;
+    @each $name, $breakpoint in config.$breakpoints {
+      @media (min-width: #{$breakpoint}) {
+        max-width: $breakpoint;
+      }
     }
   }
 }

package/src/_flex.scss

@@ -1,14 +1,4 @@
-// ─── Display ──────────────────────────────────────────────────────────────────
-
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-// ─── Direction ────────────────────────────────────────────────────────────────
+// ─── Direction (map needed before @layer for @extend) ─────────────────────────
 
 $flex: (
   "row": row,
@@ -17,44 +7,58 @@ $flex: (
   "col-reverse": column-reverse,
 );
 
-@each $name, $dir in $flex {
-  .flex-#{$name} {
-    flex-direction: $dir;
+@layer utilities {
+  // ─── Display ──────────────────────────────────────────────────────────────────
+
+  .flex {
+    display: flex;
   }
 
-  .f-#{$name} {
-    @extend .flex-#{$name};
+  .inline-flex {
+    display: inline-flex;
   }
-}
 
-// ─── Grow & shrink ────────────────────────────────────────────────────────────
+  // ─── Direction ────────────────────────────────────────────────────────────────
 
-.grow {
-  flex-grow: 1;
-}
+  @each $name, $dir in $flex {
+    .flex-#{$name} {
+      flex-direction: $dir;
+    }
 
-.no-grow,
-.grow-0 {
-  flex-grow: 0;
-}
+    .f-#{$name} {
+      @extend .flex-#{$name};
+    }
+  }
 
-.shrink {
-  flex-shrink: 1;
-}
+  // ─── Grow & shrink ────────────────────────────────────────────────────────────
 
-.no-shrink,
-.shrink-0 {
-  flex-shrink: 0;
-}
+  .grow {
+    flex-grow: 1;
+  }
 
-// ─── Wrap ─────────────────────────────────────────────────────────────────────
+  .no-grow,
+  .grow-0 {
+    flex-grow: 0;
+  }
 
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.flex-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-.flex-nowrap {
-  flex-wrap: nowrap;
+  .shrink {
+    flex-shrink: 1;
+  }
+
+  .no-shrink,
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+
+  // ─── Wrap ─────────────────────────────────────────────────────────────────────
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
 }

package/src/_grid.scss

@@ -1,93 +1,95 @@
 @use "config";
 
-.grid {
-  display: grid;
-}
+@layer utilities {
+  .grid {
+    display: grid;
+  }
 
-// ─── Grid template columns ────────────────────────────────────────────────────
+  // ─── Grid template columns ────────────────────────────────────────────────────
 
-@for $column from 1 through config.$layout-columns {
-  .grid-cols-#{$column} {
-    grid-template-columns: repeat(#{$column}, minmax(0, 1fr));
+  @for $column from 1 through config.$layout-columns {
+    .grid-cols-#{$column} {
+      grid-template-columns: repeat(#{$column}, minmax(0, 1fr));
+    }
   }
-}
 
-.grid-cols-none {
-  grid-template-columns: none;
-}
+  .grid-cols-none {
+    grid-template-columns: none;
+  }
 
-// ─── Column & row span ────────────────────────────────────────────────────────
+  // ─── Column & row span ────────────────────────────────────────────────────────
 
-@for $columns from 1 through config.$layout-columns {
-  .col-span-#{$columns} {
-    grid-column: span #{$columns} / span #{$columns};
+  @for $columns from 1 through config.$layout-columns {
+    .col-span-#{$columns} {
+      grid-column: span #{$columns} / span #{$columns};
+    }
+    .row-span-#{$columns} {
+      grid-row: span #{$columns} / span #{$columns};
+    }
   }
-  .row-span-#{$columns} {
-    grid-row: span #{$columns} / span #{$columns};
-  }
-}
 
-.col-span-full {
-  grid-column: 1 / -1;
-}
-.row-span-full {
-  grid-row: 1 / -1;
-}
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+  .row-span-full {
+    grid-row: 1 / -1;
+  }
 
-// ─── Grid template rows ───────────────────────────────────────────────────────
+  // ─── Grid template rows ───────────────────────────────────────────────────────
 
-@for $row from 1 through config.$layout-columns {
-  .grid-rows-#{$row} {
-    grid-template-rows: repeat(#{$row}, minmax(0, 1fr));
+  @for $row from 1 through config.$layout-columns {
+    .grid-rows-#{$row} {
+      grid-template-rows: repeat(#{$row}, minmax(0, 1fr));
+    }
   }
-}
 
-.grid-rows-none {
-  grid-template-rows: none;
-}
+  .grid-rows-none {
+    grid-template-rows: none;
+  }
 
-// ─── Auto columns & rows ──────────────────────────────────────────────────────
+  // ─── Auto columns & rows ──────────────────────────────────────────────────────
 
-.auto-cols-auto {
-  grid-auto-columns: auto;
-}
-.auto-cols-min {
-  grid-auto-columns: min-content;
-}
-.auto-cols-max {
-  grid-auto-columns: max-content;
-}
-.auto-cols-fr {
-  grid-auto-columns: minmax(0, 1fr);
-}
+  .auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
 
-.auto-rows-auto {
-  grid-auto-rows: auto;
-}
-.auto-rows-min {
-  grid-auto-rows: min-content;
-}
-.auto-rows-max {
-  grid-auto-rows: max-content;
-}
-.auto-rows-fr {
-  grid-auto-rows: minmax(0, 1fr);
-}
+  .auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  .auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
 
-// ─── Grid auto flow ───────────────────────────────────────────────────────────
+  // ─── Grid auto flow ───────────────────────────────────────────────────────────
 
-.grid-flow-row {
-  grid-auto-flow: row;
-}
-.grid-flow-col {
-  grid-auto-flow: column;
-}
-.grid-flow-dense {
-  grid-auto-flow: dense;
-}
-.grid-flow-row-dense {
-  grid-auto-flow: row dense;
-}
-.grid-flow-col-dense {
-  grid-auto-flow: column dense;
+  .grid-flow-row {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+  .grid-flow-dense {
+    grid-auto-flow: dense;
+  }
+  .grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+  .grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
 }

package/src/_sizes.scss

@@ -203,237 +203,239 @@
   }
 }
 
-@each $size, $value in config.$base-sizes {
-  @include padding-classes($size, $value);
-  @include margin-classes($size, $value);
-  @include width-classes($size, $value);
-  @include height-classes($size, $value);
-  @include size-classes($size, $value);
-}
+@layer utilities {
+  @each $size, $value in config.$base-sizes {
+    @include padding-classes($size, $value);
+    @include margin-classes($size, $value);
+    @include width-classes($size, $value);
+    @include height-classes($size, $value);
+    @include size-classes($size, $value);
+  }
 
-//extended sizes
-$size: 10;
+  //extended sizes
+  $size: 10;
 
-@while $size <=config.$highest-multiplier {
-  @include padding-classes($size, config.$base-size * $size);
-  @include margin-classes($size, config.$base-size * $size);
-  @include width-classes($size, config.$base-size * $size);
-  @include height-classes($size, config.$base-size * $size);
-  @include size-classes($size, config.$base-size * $size);
-  $size: $size + 1;
-}
+  @while $size <=config.$highest-multiplier {
+    @include padding-classes($size, config.$base-size * $size);
+    @include margin-classes($size, config.$base-size * $size);
+    @include width-classes($size, config.$base-size * $size);
+    @include height-classes($size, config.$base-size * $size);
+    @include size-classes($size, config.$base-size * $size);
+    $size: $size + 1;
+  }
 
-.m-auto {
-  margin: auto;
-}
+  .m-auto {
+    margin: auto;
+  }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
+  .my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
 
-.mt-auto {
-  margin-top: auto;
-}
+  .mt-auto {
+    margin-top: auto;
+  }
 
-.mb-auto {
-  margin-bottom: auto;
-}
+  .mb-auto {
+    margin-bottom: auto;
+  }
 
-.ml-auto {
-  margin-left: auto;
-}
+  .ml-auto {
+    margin-left: auto;
+  }
 
-.mr-auto {
-  margin-right: auto;
-}
+  .mr-auto {
+    margin-right: auto;
+  }
 
-.w-auto {
-  width: auto;
-}
+  .w-auto {
+    width: auto;
+  }
 
-// Fractional widths and heights
-@each $columns in config.$layout-divisions {
-  @for $span from 1 through ($columns - 1) {
-    $size: math.percentage(math.div($span, $columns));
+  // Fractional widths and heights
+  @each $columns in config.$layout-divisions {
+    @for $span from 1 through ($columns - 1) {
+      $size: math.percentage(math.div($span, $columns));
 
-    .w-#{$span}\/#{$columns} {
-      width: $size;
-    }
+      .w-#{$span}\/#{$columns} {
+        width: $size;
+      }
 
-    .h-#{$span}\/#{$columns} {
-      height: $size;
+      .h-#{$span}\/#{$columns} {
+        height: $size;
+      }
     }
   }
-}
 
-.w-full {
-  width: 100%;
-}
+  .w-full {
+    width: 100%;
+  }
 
-.w-screen {
-  width: 100vw;
-}
+  .w-screen {
+    width: 100vw;
+  }
 
-.w-svw {
-  width: 100svw;
-}
+  .w-svw {
+    width: 100svw;
+  }
 
-.w-lvw {
-  width: 100lvw;
-}
+  .w-lvw {
+    width: 100lvw;
+  }
 
-.w-dvw {
-  width: 100dvw;
-}
+  .w-dvw {
+    width: 100dvw;
+  }
 
-.w-min {
-  width: min-content;
-}
+  .w-min {
+    width: min-content;
+  }
 
-.w-max {
-  width: max-content;
-}
+  .w-max {
+    width: max-content;
+  }
 
-.w-fit {
-  width: fit-content;
-}
+  .w-fit {
+    width: fit-content;
+  }
 
-.h-full {
-  height: 100%;
-}
+  .h-full {
+    height: 100%;
+  }
 
-.h-screen {
-  height: 100vh;
-}
+  .h-screen {
+    height: 100vh;
+  }
 
-.h-svh {
-  height: 100svh;
-}
+  .h-svh {
+    height: 100svh;
+  }
 
-.h-lvh {
-  height: 100lvh;
-}
+  .h-lvh {
+    height: 100lvh;
+  }
 
-.h-dvh {
-  height: 100dvh;
-}
+  .h-dvh {
+    height: 100dvh;
+  }
 
-.h-min {
-  height: min-content;
-}
+  .h-min {
+    height: min-content;
+  }
 
-.h-max {
-  height: max-content;
-}
+  .h-max {
+    height: max-content;
+  }
 
-.h-fit {
-  height: fit-content;
-}
+  .h-fit {
+    height: fit-content;
+  }
 
-.h-auto {
-  height: auto;
-}
+  .h-auto {
+    height: auto;
+  }
 
-// Min/max widths
-.min-w-full {
-  min-width: 100%;
-}
+  // Min/max widths
+  .min-w-full {
+    min-width: 100%;
+  }
 
-.min-w-screen {
-  min-width: 100vw;
-}
+  .min-w-screen {
+    min-width: 100vw;
+  }
 
-.min-w-min {
-  min-width: min-content;
-}
+  .min-w-min {
+    min-width: min-content;
+  }
 
-.min-w-max {
-  min-width: max-content;
-}
+  .min-w-max {
+    min-width: max-content;
+  }
 
-.min-w-fit {
-  min-width: fit-content;
-}
+  .min-w-fit {
+    min-width: fit-content;
+  }
 
-.max-w-full {
-  max-width: 100%;
-}
+  .max-w-full {
+    max-width: 100%;
+  }
 
-.max-w-screen {
-  max-width: 100vw;
-}
+  .max-w-screen {
+    max-width: 100vw;
+  }
 
-.max-w-none {
-  max-width: none;
-}
+  .max-w-none {
+    max-width: none;
+  }
 
-.max-w-min {
-  max-width: min-content;
-}
+  .max-w-min {
+    max-width: min-content;
+  }
 
-.max-w-max {
-  max-width: max-content;
-}
+  .max-w-max {
+    max-width: max-content;
+  }
 
-.max-w-fit {
-  max-width: fit-content;
-}
+  .max-w-fit {
+    max-width: fit-content;
+  }
 
-// Min/max heights
-.min-h-full {
-  min-height: 100%;
-}
+  // Min/max heights
+  .min-h-full {
+    min-height: 100%;
+  }
 
-.min-h-screen {
-  min-height: 100vh;
-}
+  .min-h-screen {
+    min-height: 100vh;
+  }
 
-.min-h-svh {
-  min-height: 100svh;
-}
+  .min-h-svh {
+    min-height: 100svh;
+  }
 
-.min-h-dvh {
-  min-height: 100dvh;
-}
+  .min-h-dvh {
+    min-height: 100dvh;
+  }
 
-.min-h-0 {
-  min-height: 0;
-}
+  .min-h-0 {
+    min-height: 0;
+  }
 
-.max-h-full {
-  max-height: 100%;
-}
+  .max-h-full {
+    max-height: 100%;
+  }
 
-.max-h-screen {
-  max-height: 100vh;
-}
+  .max-h-screen {
+    max-height: 100vh;
+  }
 
-.max-h-svh {
-  max-height: 100svh;
-}
+  .max-h-svh {
+    max-height: 100svh;
+  }
 
-.max-h-dvh {
-  max-height: 100dvh;
-}
+  .max-h-dvh {
+    max-height: 100dvh;
+  }
 
-.max-h-none {
-  max-height: none;
-}
+  .max-h-none {
+    max-height: none;
+  }
 
-.size-full {
-  width: 100%;
-  height: 100%;
-}
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
 
-.size-auto {
-  width: auto;
-  height: auto;
+  .size-auto {
+    width: auto;
+    height: auto;
+  }
 }
 
 @mixin gap-classes($size-name, $value) {
@@ -456,13 +458,15 @@ $size: 10;
   }
 }
 
-@each $size, $value in config.$base-sizes {
-  @include gap-classes($size, $value);
-}
+@layer utilities {
+  @each $size, $value in config.$base-sizes {
+    @include gap-classes($size, $value);
+  }
 
-$gap-size: 10;
+  $gap-size: 10;
 
-@while $gap-size <=config.$highest-multiplier {
-  @include gap-classes($gap-size, config.$base-size * $gap-size);
-  $gap-size: $gap-size + 1;
+  @while $gap-size <=config.$highest-multiplier {
+    @include gap-classes($gap-size, config.$base-size * $gap-size);
+    $gap-size: $gap-size + 1;
+  }
 }

package/src/_typography.scss

@@ -29,55 +29,57 @@ body {
   font-family: config.$font-family;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a,
-span,
-li,
-button,
-label,
-td,
-th,
-blockquote,
-figcaption,
-caption,
-small,
-code {
-  //weights
-  @each $name, $value in config.$font-weights {
-    $escaped: utility.str-replace($name, ".", "\\.");
+@layer utilities {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a,
+  span,
+  li,
+  button,
+  label,
+  td,
+  th,
+  blockquote,
+  figcaption,
+  caption,
+  small,
+  code {
+    //weights
+    @each $name, $value in config.$font-weights {
+      $escaped: utility.str-replace($name, ".", "\\.");
 
-    .#{$escaped} {
-      font-weight: $value;
+      .#{$escaped} {
+        font-weight: $value;
+      }
     }
-  }
 
-  //style
-  .italic {
-    font-style: italic;
-  }
+    //style
+    .italic {
+      font-style: italic;
+    }
 
-  .not-italic {
-    font-style: normal;
+    .not-italic {
+      font-style: normal;
+    }
   }
-}
 
-// Font sizes
-@each $size, $value in config.$font-sizes {
-  .text-#{$size} {
-    font-size: utility.px-to-rem(list.nth($value, 1));
-    line-height: list.nth($value, 2);
+  // Font sizes
+  @each $size, $value in config.$font-sizes {
+    .text-#{$size} {
+      font-size: utility.px-to-rem(list.nth($value, 1));
+      line-height: list.nth($value, 2);
+    }
   }
-}
 
-//TW weights
-@each $name, $value in config.$font-weights {
-  .font-#{$name} {
-    font-weight: $value;
+  //TW weights
+  @each $name, $value in config.$font-weights {
+    .font-#{$name} {
+      font-weight: $value;
+    }
   }
 }