nuxt-starter/app/assets/scss/mixins/_css-vars-map.scss at c626e54a096789856581da57b0b52775ba7b6577 · rezozero/nuxt-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
@use 'sass:map';
@use 'assets/scss/functions/list';

// Get CSS variables from a map
// Parameters:
// - $map: The map containing nested variables
// - $name: The base name to use for the generated CSS variables
//
// Define a map with CSS properties and values
// $example-map: (
//     'font-size': 16px,
//     'color': #333,
//     'padding': 10px,
// );
//
// Use the get mixin to generate CSS variables
// .example-class {
//     @include css-vars-map.get($example-map, 'example');
// }
//
// This will generate the following CSS:
// .example-class {
//     --example-font-size: 16px;
//     --example-color: #333;
//     --example-padding: 10px;
// }
@mixin get($map, $name) {
    @each $key, $value in $map {
        --#{list.list-implode(($name, $key), '-')}: #{$value};
    }
}

// This mixin iterates through a map to find nested variables and generate CSS variables.
//
// Parameters:
// - $map: The map containing nested variables
// - $key: The key to look for within the nested variables
// - $name: The base name to use for the generated CSS variables
//
// Example usage:
// $example-map: (
//     '(
//         'vars': (
//             'sm': (
//                  'padding': 4px,
//                  'margin': 8px,
//             ),
//         ),
//         'prefix': '',
//     ),
//     '(
//         'vars': (
//             'sm': (
//                  'padding': 40px,
//             ),
//         ),
//         'prefix': 'label',
//     ),
// );
//
// .example-class {
//     @include css-vars-map.deep-get($example-map, 'sm', 'example');
// }
//
// This will generate the following CSS:
// .example-class {
//     --example-padding: 4px;
//     --example-margin: 8px;
//     --example-label-padding: 40px;
// }
// Outputs CSS property declarations using the CSS variables set by `deep-get()`, with fallback values.
// Parameters:
// - $map: The map containing nested variables (same structure as deep-get)
// - $name: The base component name used for CSS variable names
// - $prefix: The entry prefix to target ('' for root, 'label' for label entries, etc.)
// - $fallback-size: The size key to use as fallback values
//
// Example usage:
// .example-component {
//     @include css-vars-map.apply($vars, 'example-component', 'label', 'sm');
// }
//
// This will generate:
// .example-component {
//     font-size: var(--example-component-label-font-size, 14px);
//     padding: var(--example-component-label-padding, 4px 8px);
// }
@mixin apply($map, $name, $prefix: '', $fallback-size: 'sm') {
    $var-prefix: list.list-implode(($name, $prefix), '-');

    @each $entry in $map {
        @if map.get($entry, 'prefix') == $prefix {
            $entry-vars: map.get($entry, 'vars');

            @if map.has-key($entry-vars, $fallback-size) {
                @each $property, $default-value in map.get($entry-vars, $fallback-size) {
                    #{$property}: var(--#{$var-prefix}-#{$property}, #{$default-value});
                }
            }
        }
    }
}

@mixin deep-get($map, $key, $name) {
    @each $value in $map {
        @if map.has-key($value, 'vars') {
            $map: map.get($value, 'vars');
            $prefix: list.list-implode(($name, map.get($value, 'prefix')), '-');

            @if map.has-key($map, $key) {
                $key-vars: map.get($map, $key);

                @include get($key-vars, $prefix);
            }
        }
    }
}