feat: add $screens option

unsass · Jun 14, 2022 · a28b43a · a28b43a
1 parent c5bf626
commit a28b43a
Show file tree

Hide file tree

Showing 9 changed files with 3,018 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -22,21 +22,23 @@ npm install @unsass/grid
 @use "@unsass/grid/styles";
 ```
 
-> This will generate the default grid styles.
-
 ### Configuration
 
 ```scss
 @use "@unsass/grid" with (
-    $columns: 10
+    $columns: 10,
+    $screens: (
+        "lg": 1024px
+    )
 );
 ```
 
 ### Options
 
-| Name          | Default | Description              |
-|---------------|---------|--------------------------|
-| `$columns`    | `12`    | Sets numbers of columns. |
-| `$column-gap` | `12px`  | Sets the column gap.     |
-| `$rows`       | `6`     | Sets  numbers of rows.   |
-| `$rows-gap`   | `12px`  | Sets the row gap.        |
+| Name          | Default | Description                                                                                         |
+|---------------|---------|-----------------------------------------------------------------------------------------------------|
+| `$columns`    | `12`    | Sets numbers of columns.                                                                            |
+| `$column-gap` | `12px`  | Sets the column gap.                                                                                |
+| `$rows`       | `6`     | Sets  numbers of rows.                                                                              |
+| `$rows-gap`   | `12px`  | Sets the row gap.                                                                                   |
+| `$screens`    | `()`    | Sets breakpoints rules. See here for [default tokens](https://github.com/unsass/breakpoint#tokens). |
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,8 +30,8 @@
         "stylelint-config-unsass": "^1.0.0"
     },
     "dependencies": {
-        "@sass-collective/breakpoint": "^2.4.1",
         "@sass-collective/css": "^3.0.0",
+        "@unsass/breakpoint": "^2.0.0",
         "sass": "^1.52.3"
     },
     "keywords": [

diff --git a/src/_config.scss b/src/_config.scss
@@ -0,0 +1,11 @@
+// ============================================================================================= //
+//                                         CONFIGURATION                                         //
+// ============================================================================================= //
+
+@use "@unsass/breakpoint";
+@use "./variables";
+
+///
+/// @see {mixin} breakpoint.config
+///
+@include breakpoint.config(variables.$screens);
diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -3,8 +3,9 @@
 // ============================================================================================= //
 
 @use "sass:meta";
-@use "@sass-collective/breakpoint";
 @use "@sass-collective/css";
+@use "@unsass/breakpoint";
+@use "./config";
 @use "./variables";
 
 @mixin core-styles {
@@ -74,7 +75,7 @@
     // Breakpoint
     // --------------------------------- //
 
-    @each $key, $value in breakpoint.$screens {
+    @each $key, $value in breakpoint.$extend {
         @include breakpoint.up($key) {
             @at-root {
                 @include css.selector(".grid-flow-col", $key) {
@@ -149,7 +150,7 @@
     // Breakpoint
     // --------------------------------- //
 
-    @each $key, $value in breakpoint.$screens {
+    @each $key, $value in breakpoint.$extend {
         @include breakpoint.up($key) {
             @at-root {
                 @include css.selector(".col-auto", $key) {
@@ -230,7 +231,7 @@
     // Breakpoint
     // --------------------------------- //
 
-    @each $key, $value in breakpoint.$screens {
+    @each $key, $value in breakpoint.$extend {
         @include breakpoint.up($key) {
             @at-root {
                 @include css.selector(".row-auto", $key) {

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -6,3 +6,5 @@ $columns: 12 !default;
 $column-gap: 12px !default;
 $rows: 6 !default;
 $row-gap: 12px !default;
+
+$screens: () !default;
diff --git a/styles.scss b/styles.scss
@@ -2,6 +2,6 @@
 //                                            STYLES                                             //
 // ============================================================================================= //
 
-@use "./mixins";
+@use "./src/mixins";
 
 @include mixins.core-styles;
diff --git a/tests/test.spec.scss → tests/extend.spec.scss b/tests/test.spec.scss → tests/extend.spec.scss
@@ -5,11 +5,14 @@
 @use "true" as *;
 @use "../index" as grid with (
     $columns: 2,
-    $rows: 2
+    $rows: 2,
+    $screens: (
+        "lg": 1024px
+    )
 );
 
 @include describe("grid.core-styles()") {
-    @include it("Should return core styles.") {
+    @include it("Should return extended grid declarations.") {
         @include assert {
             @include output(false) {
                 @include grid.core-styles;
@@ -156,7 +159,7 @@
                     }
                 }
 
-                @media (min-width: 960px) {
+                @media (min-width: 1024px) {
                     .lg\:grid-flow-col {
                         grid-auto-flow: column;
                     }
@@ -458,7 +461,7 @@
                     }
                 }
 
-                @media (min-width: 960px) {
+                @media (min-width: 1024px) {
                     .lg\:col-auto {
                         grid-column: auto;
                     }
@@ -808,7 +811,7 @@
                     }
                 }
 
-                @media (min-width: 960px) {
+                @media (min-width: 1024px) {
                     .lg\:row-auto {
                         grid-row: auto;
                     }