@oardi/css-utils 0.111.1 → 0.113.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.111.1",
+	"version": "0.113.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
@@ -23,7 +23,9 @@
 		"LICENSE.md"
 	],
 	"license": "MIT",
-	"scripts": {},
+	"scripts": {
+		"prepublishOnly": "npm --prefix .. run validate"
+	},
 	"publishConfig": {
 		"access": "public"
 	}

package/scss/gap-responsive.scss

@@ -7,16 +7,20 @@
 	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 		@media (min-width: #{$bp-value}) {
 			@each $key, $value in map.get(theme.$theme, spacings) {
-				.gap-#{$bp}-#{$key} {
-					gap: $value;
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
+
+				.gap-#{$bp}-#{$suffix} {
+					gap: $spacing;
 				}
 
-				.row-gap-#{$bp}-#{$key} {
-					row-gap: $value;
+				.row-gap-#{$bp}-#{$suffix} {
+					row-gap: $spacing;
 				}
 
-				.column-gap-#{$bp}-#{$key} {
-					column-gap: $value;
+				.column-gap-#{$bp}-#{$suffix} {
+					column-gap: $spacing;
 				}
 			}
 		}

package/scss/gap.scss

@@ -4,16 +4,20 @@
 
 @layer utilities {
 	@each $key, $value in map.get(theme.$theme, spacings) {
-		.gap-#{$key} {
-			gap: $value;
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
+
+		.gap-#{$suffix} {
+			gap: $spacing;
 		}
 
-		.row-gap-#{$key} {
-			row-gap: $value;
+		.row-gap-#{$suffix} {
+			row-gap: $spacing;
 		}
 
-		.column-gap-#{$key} {
-			column-gap: $value;
+		.column-gap-#{$suffix} {
+			column-gap: $spacing;
 		}
 	}
 }

package/scss/spacings-responsive.scss

@@ -36,45 +36,71 @@
 			}
 
 			@each $key, $value in map.get(theme.$theme, spacings) {
-				.m-#{$bp}-#{$key} {
-					margin: $value;
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
+
+				.m-#{$bp}-#{$suffix} {
+					margin: $spacing;
 				}
 
-				.p-#{$bp}-#{$key} {
-					padding: $value;
+				.p-#{$bp}-#{$suffix} {
+					padding: $spacing;
 				}
 			}
 
 			@each $key, $value in map.get(theme.$theme, spacings) {
-				.mx-#{$bp}-#{$key} {
-					margin-left: $value;
-					margin-right: $value;
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
+
+				.mx-#{$bp}-#{$suffix} {
+					margin-left: $spacing;
+					margin-right: $spacing;
+				}
+
+				.my-#{$bp}-#{$suffix} {
+					margin-top: $spacing;
+					margin-bottom: $spacing;
+				}
+
+				.px-#{$bp}-#{$suffix} {
+					padding-left: $spacing;
+					padding-right: $spacing;
 				}
 
-				.my-#{$bp}-#{$key} {
-					margin-top: $value;
-					margin-bottom: $value;
+				.py-#{$bp}-#{$suffix} {
+					padding-top: $spacing;
+					padding-bottom: $spacing;
 				}
+			}
 
-				.px-#{$bp}-#{$key} {
-					padding-left: $value;
-					padding-right: $value;
+			@each $key, $value in map.get(theme.$theme, spacings) {
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
+
+				.space-x-#{$bp}-#{$suffix} > :where(* + *) {
+					margin-inline-start: $spacing;
 				}
 
-				.py-#{$bp}-#{$key} {
-					padding-top: $value;
-					padding-bottom: $value;
+				.space-y-#{$bp}-#{$suffix} > :where(* + *) {
+					margin-block-start: $spacing;
 				}
 			}
 
 			@each $key, $value in map.get(theme.$theme, spacings) {
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
+
 				@each $dir, $prop in map.get(theme.$theme, directions) {
-					.m#{$dir}-#{$bp}-#{$key} {
-						margin-#{$prop}: $value;
+					.m#{$dir}-#{$bp}-#{$suffix} {
+						margin-#{$prop}: $spacing;
 					}
 
-					.p#{$dir}-#{$bp}-#{$key} {
-						padding-#{$prop}: $value;
+					.p#{$dir}-#{$bp}-#{$suffix} {
+						padding-#{$prop}: $spacing;
 					}
 				}
 			}

package/scss/spacings.scss

@@ -36,46 +36,72 @@
 	// margin / padding spacings
 	// i.e. .m-2, .m-5, p-1,
 	@each $key, $value in map.get(theme.$theme, spacings) {
-		.m-#{$key} {
-			margin: $value;
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
+
+		.m-#{$suffix} {
+			margin: $spacing;
 		}
 
-		.p-#{$key} {
-			padding: $value;
+		.p-#{$suffix} {
+			padding: $spacing;
 		}
 	}
 	@each $key, $value in map.get(theme.$theme, spacings) {
-		.mx-#{$key} {
-			margin-left: $value;
-			margin-right: $value;
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
+
+		.mx-#{$suffix} {
+			margin-left: $spacing;
+			margin-right: $spacing;
+		}
+
+		.my-#{$suffix} {
+			margin-top: $spacing;
+			margin-bottom: $spacing;
+		}
+
+		.px-#{$suffix} {
+			padding-left: $spacing;
+			padding-right: $spacing;
 		}
 
-		.my-#{$key} {
-			margin-top: $value;
-			margin-bottom: $value;
+		.py-#{$suffix} {
+			padding-top: $spacing;
+			padding-bottom: $spacing;
 		}
+	}
 
-		.px-#{$key} {
-			padding-left: $value;
-			padding-right: $value;
+	@each $key, $value in map.get(theme.$theme, spacings) {
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
+
+		.space-x-#{$suffix} > :where(* + *) {
+			margin-inline-start: $spacing;
 		}
 
-		.py-#{$key} {
-			padding-top: $value;
-			padding-bottom: $value;
+		.space-y-#{$suffix} > :where(* + *) {
+			margin-block-start: $spacing;
 		}
 	}
 
 	// margin / padding with directions
 	// i.e. mt-2, mb-5, pt-1, ...
 	@each $key, $value in map.get(theme.$theme, spacings) {
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
+
 		@each $dir, $prop in map.get(theme.$theme, directions) {
-			.m#{$dir}-#{$key} {
-				margin-#{$prop}: $value;
+			.m#{$dir}-#{$suffix} {
+				margin-#{$prop}: $spacing;
 			}
 
-			.p#{$dir}-#{$key} {
-				padding-#{$prop}: $value;
+			.p#{$dir}-#{$suffix} {
+				padding-#{$prop}: $spacing;
 			}
 		}
 	}

package/scss/theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 
 $-spacer: 1rem;
 
@@ -101,13 +102,37 @@ $-directions: (
 
 $-spacings: (
 	0: 0,
+	0.5: $-spacer * 0.125,
 	1: $-spacer * 0.25,
+	1.5: $-spacer * 0.375,
 	2: $-spacer * 0.5,
+	2.5: $-spacer * 0.75,
 	3: $-spacer,
+	3.5: $-spacer * 1.25,
 	4: $-spacer * 1.5,
+	4.5: $-spacer * 2.25,
 	5: $-spacer * 3, // add auto
 );
 
+@function -replace($value, $search, $replacement) {
+	$index: string.index($value, $search);
+
+	@if $index {
+		@return string.slice($value, 1, $index - 1) + $replacement +
+			-replace(string.slice($value, $index + string.length($search)), $search, $replacement);
+	}
+
+	@return $value;
+}
+
+@function spacing-token-suffix($key) {
+	@return -replace('#{$key}', '.', '-');
+}
+
+@function spacing-selector-suffix($key) {
+	@return string.unquote(-replace('#{$key}', '.', '\\.'));
+}
+
 $-positions: (relative, absolute, fixed, static, sticky, inherit, initial, unset);
 
 $-z-index-levels: (

package/scss/variables.scss

@@ -28,7 +28,7 @@
 		}
 
 		@each $name, $value in map.get(theme.$theme, spacings) {
-			--spacer-#{$name}: #{$value};
+			--spacer-#{theme.spacing-token-suffix($name)}: #{$value};
 		}
 
 		--line-height: 1.8;