@volverjs/style 0.1.12-beta.18 → 0.1.12-beta.19

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.18",
+  "version": "0.1.12-beta.19",
   "engines": {
     "node": ">= 12.x"
   },
@@ -41,14 +41,14 @@
     "@vueuse/core": "^10.11.0",
     "@vueuse/head": "^2.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "glob": "^10.4.2",
+    "eslint-plugin-vue": "^9.27.0",
+    "glob": "^11.0.0",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.39",
     "postcss-html": "^1.7.0",
-    "postcss-preset-env": "^9.5.15",
+    "postcss-preset-env": "^9.6.0",
     "prettier": "^3.3.2",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
@@ -57,14 +57,14 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-lint": "^10.0.0",
-    "sass": "^1.77.6",
+    "sass": "^1.77.7",
     "stylelint": "^16.6.1",
-    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.2",
-    "vite": "^5.3.2",
+    "vite": "^5.3.3",
     "vite-plugin-css-export": "^3.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^2.0.0",
@@ -72,7 +72,7 @@
     "vite-plugin-pages": "^0.32.3",
     "vite-plugin-stylelint": "^5.3.1",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-ssg": "^0.23.7",
+    "vite-ssg": "^0.23.8",
     "vite-ssg-sitemap": "^0.7.1",
     "vue": "^3.4.31",
     "vue-live": "^2.5.4",

package/src/export.scss

@@ -11,9 +11,9 @@
 	// #region CUSTOMIZATION
 	// colors
 	@each $key, $value in $colors {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
 						str-index($subKey, 'hue') and not
 						str-index($subKey, 'saturation') and not
@@ -35,9 +35,9 @@
 	}
 
 	@each $key, $value in $dark-colors {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
 						str-index($subKey, 'hue') and not
 						str-index($subKey, 'saturation') and not
@@ -235,9 +235,9 @@
 	}
 
 	@each $size, $value in $spacing-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					spacing-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
@@ -250,9 +250,9 @@
 	}
 
 	@each $size, $value in $font-size-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					font-size-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}

package/src/props/breakpoints.scss

@@ -2,14 +2,15 @@
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
+	@include spread-map-into-props(
+		$map: map.remove($breakpoints, 'xxs'),
+		$prefix: breakpoint
+	);
+
 	@each $breakpoint, $breakpoint-value in $breakpoints {
 		@media screen and (min-width: $breakpoint-value) {
 			--breakpoint-key: #{$breakpoint};
 			--breakpoint-value: #{$breakpoint-value};
 		}
 	}
-	@include spread-map-into-props(
-		$map: map.remove($breakpoints, 'xxs'),
-		$prefix: breakpoint
-	);
 }

package/src/props/spacing.scss

@@ -10,12 +10,12 @@
 	// dynamic
 	@each $name, $sizes in $spacing-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static spacing
-					@if map-has-key($spacing, $size) {
+					@if map.has-key($spacing, $size) {
 						$var: var(--spacing-#{$size});
 					}
 

package/src/props/typography.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
@@ -21,12 +22,12 @@
 	// font-size dynamic
 	@each $name, $sizes in $font-size-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static font-size
-					@if map-has-key($font-size, $size) {
+					@if map.has-key($font-size, $size) {
 						$var: var(--text-#{$size});
 					}
 

package/src/settings/components/_vv-accordion.scss

@@ -84,6 +84,7 @@ $vv-accordion: (
 		),
 		content: (
 			_alias: '> summary + *',
+			_combinator: '>',
 			padding-block: var(--spacing-sm),
 			[padding-inline]: var(--accordion-padding-left)
 				var(--accordion-padding-right),

package/src/tools/_breakpoints.scss

@@ -19,9 +19,10 @@
 	$bps-names: map.keys($bps)
 ) {
 	$n: list.index($bps-names, $name);
+
 	@return if(
-		$n != null and $n < length($bps-names),
-		nth($bps-names, $n + 1),
+		$n != null and $n < list.length($bps-names),
+		list.nth($bps-names, $n + 1),
 		null
 	);
 }
@@ -31,6 +32,7 @@
 //    576px
 @function breakpoint-min($name, $bps) {
 	$min: map.get($bps, $name);
+
 	@return if($min != 0, $min, null);
 }
 
@@ -44,6 +46,7 @@
 //    767.98px
 @function breakpoint-max($name, $bps) {
 	$next: breakpoint-next($name, $bps);
+
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
 
@@ -61,12 +64,17 @@
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $bps) {
 	$min: breakpoint-min($name, $bps);
+
 	@if $min {
 		@media (min-width: $min) {
-			@content;
+			& {
+				@content;
+			}
 		}
 	} @else {
-		@content;
+		& {
+			@content;
+		}
 	}
 }
 
@@ -74,6 +82,7 @@
 // Makes the @content apply to the given breakpoint and narrower.
 @mixin media-breakpoint-down($name, $bps) {
 	$max: breakpoint-max($name, $bps);
+
 	@if $max {
 		@media (max-width: $max) {
 			@content;

package/src/tools/_mixins.scss

@@ -3,6 +3,7 @@
 @use 'sass:string';
 @use 'sass:meta';
 @use 'sass:selector';
+@use 'sass:math';
 @use 'functions' as *;
 @use 'breakpoints' as *;
 
@@ -13,9 +14,9 @@
 	$prev-num: null;
 
 	@each $key, $num in $map {
-		@if not $prev-num or unit($num) == '%' {
+		@if not $prev-num or math.unit($num) == '%' {
 			// Do nothing
-		} @else if not comparable($prev-num, $num) {
+		} @else if not compatible($prev-num, $num) {
 			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
 		} @else if $prev-num >= $num {
 			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -59,7 +60,7 @@
 			string.slice(meta.inspect($key), 1, 1) !=
 			'['
 		{
-			@if type-of($value) == 'map' {
+			@if meta.type-of($value) == 'map' {
 				@if $deep {
 					@include spread-map-into-props($value, $name, $key);
 				}
@@ -84,7 +85,9 @@
 	$prefix: '',
 	$zero-specificity: false
 ) {
-	@if (type-of($map) == 'map' or type-of($map) == 'list') and $attribute != ''
+	@if (meta.type-of($map) == 'map' or meta.type-of($map) == 'list') and
+		$attribute !=
+		''
 	{
 		@each $breakpoint, $breakpoint-value in $bps {
 			@if $breakpoint-value > 0 {
@@ -96,7 +99,7 @@
 					$key: #{$name}-#{meta.inspect($key)};
 				}
 
-				@if type-of($value) == 'map' and $deep {
+				@if meta.type-of($value) == 'map' and $deep {
 					@include spread-map-into-utilities(
 						$map: $value,
 						$class: $class,
@@ -130,25 +133,25 @@
 					$var: str-replace($var, '\\/', '-');
 
 					// check if value is not a map (spacing-dynamic)
-					@if type-of($value) != 'map' {
+					@if meta.type-of($value) != 'map' {
 						$default: $value;
 					}
 
 					// check if map is a list
-					@if type-of($map) ==
+					@if meta.type-of($map) ==
 						'list' and
 						(not $default or $default == '')
 					{
 						$default: $key;
 					}
 
-					@if type-of($default) == 'string' {
+					@if meta.type-of($default) == 'string' {
 						$default: string.unquote($default);
 					}
 
 					%#{$prefix}#{$class-name} {
 						@include media-breakpoint-up($breakpoint, $bps) {
-							@if type-of($attribute) != 'list' {
+							@if meta.type-of($attribute) != 'list' {
 								$attribute: ($attribute);
 							}
 
@@ -200,7 +203,7 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $item, $value in map.get($map, $key) {
 			$selector: $block + '--' + $item;
 
@@ -309,7 +312,7 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $element, $value in map.get($map, $key) {
 			$selector: $block + '__' + $element;
 
@@ -436,7 +439,7 @@
 		$blocks: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $state, $value in map.get($map, $key) {
 			@if list.index(
 				(
@@ -712,7 +715,7 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if string.index($breakpoint, '-') {
 				$operator: list.nth(string.split($breakpoint, '-'), 1);
@@ -844,10 +847,13 @@
 		xxs: 0,
 	)
 ) {
-	@if type-of($map) == 'map' and $prefix != '' {
+	@if meta.type-of($map) == 'map' and $prefix != '' {
 		@each $key, $value in $map {
 			@if not list.index($ignore, $key) {
-				@if type-of($value) == 'map' and ($deep or $key == 'pseudo') {
+				@if meta.type-of($value) ==
+					'map' and
+					($deep or $key == 'pseudo')
+				{
 					$original: map.get($original, $key);
 
 					@if not $original {
@@ -860,7 +866,7 @@
 
 					@if $key == 'pseudo' {
 						@each $pseudo-element, $pseudo-map in $value {
-							@if type-of($pseudo-map) == 'map' {
+							@if meta.type-of($pseudo-map) == 'map' {
 								@if list.index(
 									(
 										before,
@@ -943,7 +949,7 @@
 						);
 					}
 				} @else if
-					type-of($value) !=
+					meta.type-of($value) !=
 					'map' and
 					(string.slice(meta.inspect($key), 1, 1) != '_')
 				{
@@ -995,7 +1001,7 @@
 
 // Wrap selector with :where()
 @mixin wrap-with-where($selector, $enabled: true) {
-	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
+	@if meta.type-of($selector) == 'map' or meta.type-of($selector) == 'list' {
 		$selector: #{$selector};
 	}
 
@@ -1028,7 +1034,7 @@
 	$custom-transitions: false,
 	$bps: (xxs: 0)
 ) {
-	@if type-of($map) == 'map' and $block != '' {
+	@if meta.type-of($map) == 'map' and $block != '' {
 		$selector: '.' + $block;
 
 		// custom props
@@ -1161,12 +1167,12 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $transition, $states in map.get($map, $key) {
 			@each $state, $value in $states {
 				@if $state in [ 'enter-from', 'enter-active', 'enter-to',
 					'leave-from', 'leave-active', 'leave-to', 'active',
-					'inert'] and type-of($value) == 'map'
+					'inert'] and meta.type-of($value) == 'map'
 				{
 					$selector: '.#{$transition}';
 

package/src/utilities/flexbox.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 // flex direction
@@ -34,6 +35,7 @@
 		%#{$prefix}#{$postfix} {
 			#{$prop}: #{$value};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}#{$postfix}',
 			$enabled: $zero-specificity-for-utilities
@@ -57,7 +59,7 @@
 	$default: null;
 
 	// check if value is not a map (spacing-dynamic)
-	@if type-of($value) != 'map' {
+	@if meta.type-of($value) != 'map' {
 		$default: $value;
 	}
 
@@ -67,6 +69,7 @@
 	%gap-#{$size} {
 		gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -78,6 +81,7 @@
 	%gap-x-#{$size} {
 		column-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -89,6 +93,7 @@
 	%gap-y-#{$size} {
 		row-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities

package/src/utilities/layout.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 // aspect
@@ -135,11 +136,11 @@
 {
 	$var: $value;
 
-	@if not map-has-key($placement, $size) {
+	@if not map.has-key($placement, $size) {
 		// check if value is not a map (spacing-dynamic)
 		$var: var(--spacing-#{$size});
 
-		@if type-of($value) != 'map' {
+		@if meta.type-of($value) != 'map' {
 			$var: var(--spacing-#{$size}, #{$value});
 		}
 	}

package/src/utilities/spacing.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 @each $prefix, $prop in (m: margin, p: padding, n: margin) {
@@ -6,7 +7,7 @@
 		$var: var(--spacing-#{$size});
 
 		// check if value is not a map (spacing-dynamic)
-		@if type-of($value) != 'map' {
+		@if meta.type-of($value) != 'map' {
 			$var: var(--spacing-#{$size}, #{$value});
 		}
 
@@ -19,6 +20,7 @@
 		%#{$prefix}#{$size} {
 			#{$prop}: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -30,6 +32,7 @@
 		%#{$prefix}x-#{$size} {
 			#{$prop}-inline: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}x-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -41,6 +44,7 @@
 		%#{$prefix}y-#{$size} {
 			#{$prop}-block: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}y-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -55,6 +59,7 @@
 			%#{$prefix}#{$direction-prefix}-#{$size} {
 				#{$prop}-#{$direction}: #{$var};
 			}
+
 			@include wrap-with-where(
 				$selector: '.#{$prefix}#{$direction-prefix}-#{$size}',
 				$enabled: $zero-specificity-for-utilities
@@ -69,6 +74,7 @@
 %m-auto {
 	margin: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.m-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -79,6 +85,7 @@
 %mx-auto {
 	margin-inline: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.mx-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -89,6 +96,7 @@
 %my-auto {
 	margin-block: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.my-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -100,6 +108,7 @@
 	%m#{$direction-prefix}-auto {
 		margin-#{$direction}: auto;
 	}
+
 	@include wrap-with-where(
 		$selector: '.m#{$direction-prefix}-auto',
 		$enabled: $zero-specificity-for-utilities