@volverjs/style 0.1.23 → 0.1.24-beta.1

package/src/utilities/interactivity.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 // cursor
 @include spread-map-into-utilities(
 	$map: $cursor,
@@ -24,3 +25,5 @@
 	$attribute: user-select,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+}

package/src/utilities/layout.scss

@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 // aspect
 @include spread-map-into-utilities(
 	$map: $aspect-ratio,
@@ -204,3 +205,5 @@
 	$prop: z,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+}

package/src/utilities/sizing.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 // width / height / max-width / max-height / min-width / min-height
 @each $class,
 	$attribute
@@ -84,3 +85,5 @@
 	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+}

package/src/utilities/spacing.scss

@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 @each $prefix, $prop in (m: margin, p: padding, n: margin) {
 	@each $size, $value in map.merge($spacing, $spacing-dynamic) {
 		$var: var(--spacing-#{$size});
@@ -116,3 +117,5 @@
 		@extend %m#{$direction-prefix}-auto;
 	}
 }
+
+}

package/src/utilities/tables.scss

@@ -1,5 +1,6 @@
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 // border-collapse
 @include spread-map-into-utilities(
 	$map: $border-collapse,
@@ -15,3 +16,5 @@
 	$attribute: table-layout,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+}

package/src/utilities/transforms.scss

@@ -1,5 +1,6 @@
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 // scale
 @each $size, $value in $scale {
 	%scale-#{$size} {
@@ -54,12 +55,14 @@
 
 // translate
 @each $size, $value in $translate {
+	$escaped-size: str-replace(#{$size}, '/', '\/');
+
 	%translate-#{$size} {
 		translate: #{$value} #{$value};
 	}
 
 	@include wrap-with-where(
-		$selector: '.translate-#{$size}',
+		$selector: '.translate-#{$escaped-size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %translate-#{$size};
@@ -70,7 +73,7 @@
 	}
 
 	@include wrap-with-where(
-		$selector: '.translate-x-#{$size}',
+		$selector: '.translate-x-#{$escaped-size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %translate-x-#{$size};
@@ -81,7 +84,7 @@
 	}
 
 	@include wrap-with-where(
-		$selector: '.translate-y-#{$size}',
+		$selector: '.translate-y-#{$escaped-size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %translate-y-#{$size};
@@ -92,7 +95,7 @@
 	}
 
 	@include wrap-with-where(
-		$selector: '.-translate-#{$size}',
+		$selector: '.-translate-#{$escaped-size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %-translate-#{$size};
@@ -103,7 +106,7 @@
 	}
 
 	@include wrap-with-where(
-		$selector: '.-translate-x-#{$size}',
+		$selector: '.-translate-x-#{$escaped-size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %-translate-x-#{$size};
@@ -114,9 +117,11 @@
 	}
 
 	@include wrap-with-where(
-		$selector: '.-translate-y-#{$size}',
+		$selector: '.-translate-y-#{$escaped-size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %-translate-y-#{$size};
 	}
 }
+
+}

package/src/utilities/transitions.scss

@@ -2,6 +2,7 @@
 @use 'sass:string';
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 // transition property
 @include spread-map-into-utilities(
 	$map: $transition-property,
@@ -46,3 +47,5 @@
 		}
 	}
 }
+
+}

package/src/utilities/typography.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../context' as *;
 
+@include layer(utilities, $use-css-layers, $layer-prefix) {
 // font-family
 @include spread-map-into-utilities(
 	$map: $font-family,
@@ -263,3 +264,5 @@
 	$attribute: white-space,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+}

package/src/volver.scss

@@ -1,4 +1,5 @@
-@use 'sass:meta';
+// Define CSS layer order (must be first)
+@use 'layers';
 
 // base
 @use 'base';