refactor: Use inline and block CSS styles instead of width and height

feat(components): Add some button styles

chore(build): Add Autoprefixer support

package.json

@@ -81,6 +81,7 @@
 		"@types/react-dom": "^18.2.25",
 		"@typescript-eslint/parser": "^7.7.0",
 		"@vitejs/plugin-react-swc": "^3.6.0",
+		"autoprefixer": "^10.4.19",
 		"babel-preset-react-app": "^10.0.1",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.57.0",
@@ -102,6 +103,7 @@
 		"jest-svg-transformer": "^1.0.0",
 		"lerna": "^8.1.2",
 		"lint-staged": "^15.2.2",
+		"postcss": "^8.4.38",
 		"prettier": "^3.2.5",
 		"sass": "^1.75.0",
 		"stylelint": "^16.3.1",

packages/components/src/button/button.scss

@@ -6,7 +6,8 @@
 	.monovitality-button {
 		border-radius: pxToRem(8px);
 		border: pxToRem(1px) solid transparent;
-		padding: pxToRem(9px) pxToRem(19px);
+		padding-block: pxToRem(9px);
+		padding-inline: pxToRem(19px);
 		font-size: pxToRem(16px);
 		font-weight: 500;
 		font-family: inherit;
@@ -16,6 +17,9 @@
 		align-items: center;
 		gap: pxToRem(6px);
 		line-height: 1;
+		user-select: none;
+		touch-action: manipulation;
+		inline-size: fit-content;
 
 		@include themed() {
 			background-color: theme(button-background-color);
@@ -65,52 +69,54 @@
 
 		&.monovitality-button--icon-only {
 			padding: pxToRem(9px);
-			width: pxToRem(36px);
-			max-width: pxToRem(36px);
-			height: pxToRem(36px);
-			max-height: pxToRem(36px);
+			inline-size: pxToRem(36px);
+			max-inline-size: pxToRem(36px);
+			block-size: pxToRem(36px);
+			max-block-size: pxToRem(36px);
 		}
 
 		.monovitality-icon-holder {
-			width: pxToRem(16px);
-			height: pxToRem(16px);
+			inline-size: pxToRem(16px);
+			block-size: pxToRem(16px);
 		}
 
 		&--sm {
-			padding: pxToRem(7px) pxToRem(15px);
+			padding-inline: pxToRem(15px);
+			padding-block: pxToRem(7px);
 			font-size: pxToRem(14px);
 			gap: pxToRem(5px);
 
 			&.monovitality-button--icon-only {
 				padding: pxToRem(7px);
-				width: pxToRem(30px);
-				max-width: pxToRem(30px);
-				height: pxToRem(30px);
-				max-height: pxToRem(30px);
+				inline-size: pxToRem(30px);
+				max-inline-size: pxToRem(30px);
+				block-size: pxToRem(30px);
+				max-block-size: pxToRem(30px);
 			}
 
 			.monovitality-icon-holder {
-				width: pxToRem(14px);
-				height: pxToRem(14px);
+				inline-size: pxToRem(14px);
+				block-size: pxToRem(14px);
 			}
 		}
 
 		&--lg {
-			padding: pxToRem(11px) pxToRem(23px);
+			padding-block: pxToRem(11px);
+			padding-inline: pxToRem(23px);
 			font-size: pxToRem(18px);
 			gap: pxToRem(7px);
 
 			&.monovitality-button--icon-only {
 				padding: pxToRem(11px);
-				width: pxToRem(42px);
-				max-width: pxToRem(42px);
-				height: pxToRem(42px);
-				max-height: pxToRem(42px);
+				inline-size: pxToRem(42px);
+				max-inline-size: pxToRem(42px);
+				block-size: pxToRem(42px);
+				max-block-size: pxToRem(42px);
 			}
 
 			.monovitality-icon-holder {
-				width: pxToRem(18px);
-				height: pxToRem(18px);
+				inline-size: pxToRem(18px);
+				block-size: pxToRem(18px);
 			}
 		}
 	}

packages/components/src/iconHolder/iconHolder.scss

@@ -7,8 +7,8 @@
 		align-items: center;
 
 		.svg-inline--fa {
-			height: 100%;
-			width: 100%;
+			inline-size: max-content;
+			block-size: max-content;
 			vertical-align: initial;
 			box-sizing: inherit;
 		}

packages/submodule/src/app/app.scss

@@ -5,8 +5,9 @@
 @include monovitality-styles-wrapper {
 	.monovitality-footer {
 		padding: pxToRem(20px);
-		max-width: pxToRem(1280px);
-		margin: 0 auto;
+		max-inline-size: pxToRem(1280px);
+		margin-inline: auto;
+		margin-block: 0;
 		@include themed() {
 			color: theme(color-main);
 			background-color: theme(background-color-secondary);

packages/vite-scripts/src/vite/viteUtil.js

@@ -3,6 +3,7 @@ import svgr from "@svgr/rollup";
 import react from "@vitejs/plugin-react-swc";
 import { resolve, sep } from "node:path";
 import { defineConfig } from "vite";
+import autoprefixer from "autoprefixer";
 
 /** @typedef {import("vite").Alias} Alias */
 /** @typedef {import("vite").UserConfig} UserConfig */
@@ -90,17 +91,21 @@ export const getViteConfig = (isProduction, cwd, productionAliases, stylesWrappe
 					}
 				}
 			}
+		},
+		css: {
+			postcss: {
+				plugins: [autoprefixer]
+			}
 		}
 	};
 	if (stylesWrapperVariableName) {
-		baseConfig.css = {
-			preprocessorOptions: {
-				scss: {
-					additionalData: process.env[stylesWrapperVariableName]
-						? `$monovitality-styles-wrapper: "${process.env[stylesWrapperVariableName]}";
+		// @ts-expect-error - we defined this field above
+		baseConfig.css.preprocessorOptions = {
+			scss: {
+				additionalData: process.env[stylesWrapperVariableName]
+					? `$monovitality-styles-wrapper: "${process.env[stylesWrapperVariableName]}";
 						`
-						: ""
-				}
+					: ""
 			}
 		};
 	}

packages/web/src/app.scss

@@ -10,16 +10,17 @@
 
 @include monovitality-styles-wrapper {
 	.monovitality-theme-container {
-		width: 100%;
-		height: 100%;
-		min-height: 100vh;
+		inline-size: 100%;
+		block-size: 100%;
+		min-block-size: 100vh;
 	}
 
 	.monovitality-web-base-container {
-		width: 100%;
-		height: 100%;
-		min-height: 100vh;
-		margin: 0 auto;
+		inline-size: 100%;
+		block-size: 100%;
+		min-block-size: 100vh;
+		margin-inline: auto;
+		margin-block: 0;
 		padding: pxToRem(32px);
 		text-align: center;
 
@@ -47,8 +48,9 @@
 	}
 
 	.monovitality-content {
-		max-width: pxToRem(1280px);
-		margin: 0 auto;
+		max-inline-size: pxToRem(1280px);
+		margin-inline: auto;
+		margin-block: 0;
 	}
 
 	.logo-container {
@@ -59,8 +61,8 @@
 		gap: pxToRem(16px);
 
 		.logo {
-			height: pxToRem(160px);
-			width: pxToRem(160px);
+			inline-size: pxToRem(160px);
+			block-size: pxToRem(160px);
 			padding: pxToRem(24px);
 			will-change: filter;
 			transition: filter 300ms;