✨ feat(_generator_v2.scss): Add utility-with-body mixin for generatin…

…g classes with all variants and a custom body
Spiderpig86 · Apr 12, 2024 · b8d2446 · b8d2446
1 parent b07c76d
commit b8d2446
Show file tree

Hide file tree

Showing 2 changed files with 199 additions and 13 deletions.
diff --git a/src/internal/_generator_v2.scss b/src/internal/_generator_v2.scss
@@ -174,7 +174,7 @@ $default-variant-delimiter: '\\:';
             // If there is a prefix defined, use it in the class name
             $new-base: $class-prefix + $delimiter;
         }
-        
+
         $new-base: $new-base + $base-class-name;
         $base: list.append($base, $new-base, comma);
     }
@@ -225,7 +225,6 @@ $default-variant-delimiter: '\\:';
         }
 
         @each $key, $value in $class-value-pairs {
-
             $context: map-merge(
                 $context,
                 (
@@ -249,6 +248,22 @@ $default-variant-delimiter: '\\:';
     }
 }
 
+@mixin inline-class-generator($base-class-name, $config: (), $variants: (), $context: ()) {
+    @if $base-class-name == null {
+        @error 'Base class name must be provided'
+    }
+
+    $context: map-merge(
+        $context,
+        (
+            base-class-name: $base-class-name,
+        )
+    );
+    @include generate-rules-pseudos-selectors($config, $variants, $context) using ($props...) {
+        @content ($props...);
+    }
+}
+
 @function get-responsive() {
     $result: ();
 
@@ -318,3 +333,25 @@ $default-variant-delimiter: '\\:';
     }
     @return $result;
 }
+
+@mixin utility-with-body(
+    $delimiter: $default-delimiter,
+    $variants: (),
+    $variant-delimiter: $default-variant-delimiter,
+    $generate-viewports: false,
+    $override: $default-override
+) {
+    $config: (
+        delimiter: $delimiter,
+        variant-delimiter: $variant-delimiter,
+    );
+    @include generate-rules-pseudos-selectors(
+            $config: $config,
+            $variants: $variants,
+            $context: (),
+            $generate-viewports: $generate-viewports
+        )
+        using ($props...) {
+        @content ($props...);
+    }
+}
diff --git a/tests/internal/_generator_v2.spec.scss b/tests/internal/_generator_v2.spec.scss
@@ -391,20 +391,19 @@
         }
     }
 
-
     @include it('works with  empty base class name') {
         @include assert {
             @include output($selector: false) {
-                        @include generator_v2.utility(
-                            $base-class-name: '',
-                            $class-value-pairs: (
-                                'blue': (
-                                    'color': blue,
-                                ),
-                            ),
-                            $generate-viewports: false,
-                            $override: '!important'
-                        );
+                @include generator_v2.utility(
+                    $base-class-name: '',
+                    $class-value-pairs: (
+                        'blue': (
+                            'color': blue,
+                        ),
+                    ),
+                    $generate-viewports: false,
+                    $override: '!important'
+                );
             }
             @include expect($selector: false) {
                 .u-blue {
@@ -444,6 +443,156 @@
     }
 }
 
+@include describe('utility-with-body()') {
+    @include it('basic test') {
+        @include assert {
+            @include output($selector: false) {
+                @include generator_v2.utility-with-body(
+                        $variants: (
+                            'dark',
+                            'hover',
+                            'reduce-motion',
+                            'group-hover',
+                            'group-focus',
+                        ),
+                        $generate-viewports: true,
+                        $override: '!important'
+                    )
+                    using ($props...) {
+                    @include generator_v2.inline-class-generator('foo', $props...) using ($props...) {
+                        color: #fff;
+                    }
+                }
+            }
+            @include expect($selector: false) {
+                .foo {
+                    color: #fff;
+                }
+
+                .hover\:foo:hover {
+                    color: #fff;
+                }
+
+                .group:hover .group-hover\:foo {
+                    color: #fff;
+                }
+
+                .group:focus .group-focus\:foo {
+                    color: #fff;
+                }
+
+                @media screen and (min-width: 640px) {
+                    .sm\:foo {
+                        color: #fff;
+                    }
+
+                    .sm\:hover\:foo:hover {
+                        color: #fff;
+                    }
+
+                    .group:hover .sm\:group-hover\:foo {
+                        color: #fff;
+                    }
+
+                    .group:focus .sm\:group-focus\:foo {
+                        color: #fff;
+                    }
+                }
+
+                @media screen and (min-width: 768px) {
+                    .md\:foo {
+                        color: #fff;
+                    }
+
+                    .md\:hover\:foo:hover {
+                        color: #fff;
+                    }
+
+                    .group:hover .md\:group-hover\:foo {
+                        color: #fff;
+                    }
+
+                    .group:focus .md\:group-focus\:foo {
+                        color: #fff;
+                    }
+                }
+
+                @media screen and (min-width: 1024px) {
+                    .lg\:foo {
+                        color: #fff;
+                    }
+
+                    .lg\:hover\:foo:hover {
+                        color: #fff;
+                    }
+
+                    .group:hover .lg\:group-hover\:foo {
+                        color: #fff;
+                    }
+
+                    .group:focus .lg\:group-focus\:foo {
+                        color: #fff;
+                    }
+                }
+
+                @media screen and (min-width: 1280px) {
+                    .xl\:foo {
+                        color: #fff;
+                    }
+
+                    .xl\:hover\:foo:hover {
+                        color: #fff;
+                    }
+
+                    .group:hover .xl\:group-hover\:foo {
+                        color: #fff;
+                    }
+
+                    .group:focus .xl\:group-focus\:foo {
+                        color: #fff;
+                    }
+                }
+
+                @media (prefers-color-scheme: dark) {
+                    .dark\:foo {
+                        color: #fff;
+                    }
+
+                    .dark\:hover\:foo:hover {
+                        color: #fff;
+                    }
+
+                    .group:hover .dark\:group-hover\:foo {
+                        color: #fff;
+                    }
+
+                    .group:focus .dark\:group-focus\:foo {
+                        color: #fff;
+                    }
+                }
+
+                @media (prefers-reduced-motion: reduce) {
+                    .reduce-motion\:foo {
+                        color: #fff;
+                    }
+
+                    .reduce-motion\:hover\:foo:hover {
+                        color: #fff;
+                    }
+
+                    .group:hover .reduce-motion\:group-hover\:foo {
+                        color: #fff;
+                    }
+
+                    .group:focus .reduce-motion\:group-focus\:foo {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+}
+
 // @include describe('utility-with-body()') {
 //     @include it('should generate expected utility classes with variant support') {
 //         @include assert {