diff --git a/src/generator/workers/_process-collection.scss b/src/generator/workers/_process-collection.scss index caf9b15..94f635e 100644 --- a/src/generator/workers/_process-collection.scss +++ b/src/generator/workers/_process-collection.scss @@ -31,42 +31,31 @@ @mixin process-collection($collection, $prefix, $selector, $is-breakpoint) { @if type-of($collection) == 'list' { - + // Process each item in the list - @each $item in $collection { - // Extract values from the current collection - $items: map.get($item, "items"); - @debug 'items:' $items; - $output: map.get($item, "output"); - @debug 'output:' $output; - $property: map.get($item, "property"); - @debug 'property:' $property; - $css-vars: map.get($item, "css-vars"); - @debug 'css-var:' $css-vars; - $vars-key: ''; + @each $item in $collection { + // Extract values from the current collection + $items: map.get($item, "items"); + @debug 'items:' $items; + $output: map.get($item, "output"); + @debug 'output:' $output; + $property: map.get($item, "property"); + @debug 'property:' $property; + $css-vars: map.get($item, "css-vars"); + @debug 'css-var:' $css-vars; + $vars-key: ''; - $selector: _n.get-namespace('classes') + $selector; + $selector: _n.get-namespace('classes') + $selector; - @if $use-css-vars { - $vars: map-get(_c.$gorko-config, 'css-vars'); - $vars-key: map-get($collection, 'items'); - $items: map-get($vars, $vars-key); - } - - /// It'll only run if $items and $property aren't null. This means it'll ignore the breakpoints and design tokens, for example. - @if $property and $items { - @if $output == 'responsive' { - @include _css.generate-css( - #{$prefix + $selector}, - $property, - $items, - $use-css-vars, - $vars-key - ); + @if $use-css-vars { + $vars: map-get(_c.$gorko-config, 'css-vars'); + $vars-key: map-get($collection, 'items'); + $items: map-get($vars, $vars-key); } - - @if $output == 'standard' { - @if not $is-breakpoint { + + /// It'll only run if $items and $property aren't null. This means it'll ignore the breakpoints and design tokens, for example. + @if $property and $items { + @if $output == 'responsive' { @include _css.generate-css( #{$prefix + $selector}, $property, @@ -75,6 +64,18 @@ $vars-key ); } + + @if $output == 'standard' { + @if not $is-breakpoint { + @include _css.generate-css( + #{$prefix + $selector}, + $property, + $items, + $use-css-vars, + $vars-key + ); + } + } } } } @else if type-of($collection) == 'map' {