From cc5d1948c1a279bcb4552007c085b6669d8c7a9a Mon Sep 17 00:00:00 2001 From: prabhuignoto Date: Mon, 9 Jun 2025 00:03:35 +0530 Subject: [PATCH 1/2] feat: Implement modern PostCSS and SCSS mixins for improved styling - Add PostCSS configuration with modern plugins and best practices for 2025. - Create common SCSS mixins and variables for consistent styling across components. - Refactor existing components to utilize new mixins for flexbox, transitions, and RTL support. - Update wizard components to enhance layout and responsiveness. - Configure Vite and Webpack for CSS modules and global SCSS imports. --- package.json | 14 +- pnpm-lock.yaml | 1029 +++++++++++------ postcss.config.js | 64 + src/components/_mixins.scss | 66 ++ .../form-field/form-field-message.module.scss | 36 +- .../form-field/form-field.module.scss | 49 +- src/components/page/page.module.scss | 19 +- src/components/styles/_mixins.scss | 67 ++ src/components/styles/_variables.scss | 20 + src/components/styles/index.scss | 2 + src/components/wizard-finish.module.scss | 18 +- .../wizard-footer/wizard-footer.module.scss | 55 +- .../wizard-header/wizard-header.module.scss | 98 +- src/components/wizard.module.scss | 26 +- vite.config.ts | 33 +- webpack.config.js | 58 +- 16 files changed, 1124 insertions(+), 530 deletions(-) create mode 100644 postcss.config.js create mode 100644 src/components/_mixins.scss create mode 100644 src/components/styles/_mixins.scss create mode 100644 src/components/styles/_variables.scss create mode 100644 src/components/styles/index.scss diff --git a/package.json b/package.json index cd0d556..8ade740 100644 --- a/package.json +++ b/package.json @@ -77,13 +77,13 @@ "@vitejs/plugin-react": "^4.5.1", "@vitest/coverage-v8": "^3.2.2", "@webpack-cli/generators": "^2.5.0", - "autoprefixer": "^10.4.13", + "autoprefixer": "^10.4.21", "babel-loader": "^9.0.1", "browserslist-to-esbuild": "^2.1.1", "compression-webpack-plugin": "^11.1.0", "copy-webpack-plugin": "^11.0.0", "core-js": "^3.42.0", - "css-loader": "^6.7.1", + "css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.2", "cssnano": "^7.0.7", "dotenv-webpack": "^8.1.0", @@ -104,15 +104,15 @@ "husky": "^8.0.1", "jsdom": "^20.0.2", "mini-css-extract-plugin": "^2.6.1", - "postcss": "^8.4.18", - "postcss-loader": "^7.0.1", - "postcss-preset-env": "^7.8.2", + "postcss": "^8.5.4", + "postcss-loader": "^8.1.1", + "postcss-preset-env": "^10.1.2", "prettier": "^2.7.1", "pretty-quick": "^3.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "sass": "^1.55.0", - "sass-loader": "^13.1.0", + "sass": "^1.89.1", + "sass-loader": "^16.0.5", "speed-measure-webpack-plugin": "^1.5.0", "style-loader": "^3.3.1", "stylelint": "^14.14.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 39bdce6..8c9e07f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -64,7 +64,7 @@ importers: specifier: ^2.5.0 version: 2.5.0(encoding@0.1.13)(prettier@2.8.8)(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.2.2)(webpack@5.99.9) autoprefixer: - specifier: ^10.4.13 + specifier: ^10.4.21 version: 10.4.21(postcss@8.5.4) babel-loader: specifier: ^9.0.1 @@ -82,8 +82,8 @@ importers: specifier: ^3.42.0 version: 3.42.0 css-loader: - specifier: ^6.7.1 - version: 6.11.0(webpack@5.99.9) + specifier: ^7.1.2 + version: 7.1.2(webpack@5.99.9) css-minimizer-webpack-plugin: specifier: ^7.0.2 version: 7.0.2(webpack@5.99.9) @@ -145,14 +145,14 @@ importers: specifier: ^2.6.1 version: 2.9.2(webpack@5.99.9) postcss: - specifier: ^8.4.18 + specifier: ^8.5.4 version: 8.5.4 postcss-loader: - specifier: ^7.0.1 - version: 7.3.4(postcss@8.5.4)(typescript@4.9.5)(webpack@5.99.9) + specifier: ^8.1.1 + version: 8.1.1(postcss@8.5.4)(typescript@4.9.5)(webpack@5.99.9) postcss-preset-env: - specifier: ^7.8.2 - version: 7.8.3(postcss@8.5.4) + specifier: ^10.1.2 + version: 10.2.1(postcss@8.5.4) prettier: specifier: ^2.7.1 version: 2.8.8 @@ -166,11 +166,11 @@ importers: specifier: ^18.2.0 version: 18.3.1(react@18.3.1) sass: - specifier: ^1.55.0 + specifier: ^1.89.1 version: 1.89.1 sass-loader: - specifier: ^13.1.0 - version: 13.3.3(sass@1.89.1)(webpack@5.99.9) + specifier: ^16.0.5 + version: 16.0.5(sass@1.89.1)(webpack@5.99.9) speed-measure-webpack-plugin: specifier: ^1.5.0 version: 1.5.0(webpack@5.99.9) @@ -775,89 +775,251 @@ packages: resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==} engines: {node: '>=18'} - '@csstools/postcss-cascade-layers@1.1.1': - resolution: {integrity: sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/cascade-layer-name-parser@2.0.5': + resolution: {integrity: sha512-p1ko5eHgV+MgXFVa4STPKpvPxr6ReS8oS2jzTukjR74i5zJNyWO1ZM1m8YKBXnzDKWfBN1ztLYlHxbVemDD88A==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/color-helpers@5.0.2': + resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==} + engines: {node: '>=18'} + + '@csstools/css-calc@2.1.4': + resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-color-parser@3.0.10': + resolution: {integrity: sha512-TiJ5Ajr6WRd1r8HSiwJvZBiJOqtH86aHpUjq5aEKWHiII2Qfjqd/HCWKPOW8EP4vcspXbHnXrwIDlu5savQipg==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-parser-algorithms@3.0.5': + resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-tokenizer@3.0.4': + resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==} + engines: {node: '>=18'} + + '@csstools/media-query-list-parser@4.0.3': + resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/postcss-cascade-layers@5.0.1': + resolution: {integrity: sha512-XOfhI7GShVcKiKwmPAnWSqd2tBR0uxt+runAxttbSp/LY2U16yAVPmAf7e9q4JJ0d+xMNmpwNDLBXnmRCl3HMQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-color-function@4.0.10': + resolution: {integrity: sha512-4dY0NBu7NVIpzxZRgh/Q/0GPSz/jLSw0i/u3LTUor0BkQcz/fNhN10mSWBDsL0p9nDb0Ky1PD6/dcGbhACuFTQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-color-mix-function@3.0.10': + resolution: {integrity: sha512-P0lIbQW9I4ShE7uBgZRib/lMTf9XMjJkFl/d6w4EMNHu2qvQ6zljJGEcBkw/NsBtq/6q3WrmgxSS8kHtPMkK4Q==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-color-mix-variadic-function-arguments@1.0.0': + resolution: {integrity: sha512-Z5WhouTyD74dPFPrVE7KydgNS9VvnjB8qcdes9ARpCOItb4jTnm7cHp4FhxCRUoyhabD0WVv43wbkJ4p8hLAlQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-content-alt-text@2.0.6': + resolution: {integrity: sha512-eRjLbOjblXq+byyaedQRSrAejKGNAFued+LcbzT+LCL78fabxHkxYjBbxkroONxHHYu2qxhFK2dBStTLPG3jpQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-exponential-functions@2.0.9': + resolution: {integrity: sha512-abg2W/PI3HXwS/CZshSa79kNWNZHdJPMBXeZNyPQFbbj8sKO3jXxOt/wF7juJVjyDTc6JrvaUZYFcSBZBhaxjw==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-font-format-keywords@4.0.0': + resolution: {integrity: sha512-usBzw9aCRDvchpok6C+4TXC57btc4bJtmKQWOHQxOVKen1ZfVqBUuCZ/wuqdX5GHsD0NRSr9XTP+5ID1ZZQBXw==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-color-function@1.1.1': - resolution: {integrity: sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-gamut-mapping@2.0.10': + resolution: {integrity: sha512-QDGqhJlvFnDlaPAfCYPsnwVA6ze+8hhrwevYWlnUeSjkkZfBpcCO42SaUD8jiLlq7niouyLgvup5lh+f1qessg==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-font-format-keywords@1.0.1': - resolution: {integrity: sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-gradients-interpolation-method@5.0.10': + resolution: {integrity: sha512-HHPauB2k7Oits02tKFUeVFEU2ox/H3OQVrP3fSOKDxvloOikSal+3dzlyTZmYsb9FlY9p5EUpBtz0//XBmy+aw==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-hwb-function@1.0.2': - resolution: {integrity: sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-hwb-function@4.0.10': + resolution: {integrity: sha512-nOKKfp14SWcdEQ++S9/4TgRKchooLZL0TUFdun3nI4KPwCjETmhjta1QT4ICQcGVWQTvrsgMM/aLB5We+kMHhQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 + + '@csstools/postcss-ic-unit@4.0.2': + resolution: {integrity: sha512-lrK2jjyZwh7DbxaNnIUjkeDmU8Y6KyzRBk91ZkI5h8nb1ykEfZrtIVArdIjX4DHMIBGpdHrgP0n4qXDr7OHaKA==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-initial@2.0.1': + resolution: {integrity: sha512-L1wLVMSAZ4wovznquK0xmC7QSctzO4D0Is590bxpGqhqjboLXYA16dWZpfwImkdOgACdQ9PqXsuRroW6qPlEsg==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-is-pseudo-class@5.0.1': + resolution: {integrity: sha512-JLp3POui4S1auhDR0n8wHd/zTOWmMsmK3nQd3hhL6FhWPaox5W7j1se6zXOG/aP07wV2ww0lxbKYGwbBszOtfQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 - '@csstools/postcss-ic-unit@1.0.1': - resolution: {integrity: sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-light-dark-function@2.0.9': + resolution: {integrity: sha512-1tCZH5bla0EAkFAI2r0H33CDnIBeLUaJh1p+hvvsylJ4svsv2wOmJjJn+OXwUZLXef37GYbRIVKX+X+g6m+3CQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-is-pseudo-class@2.0.7': - resolution: {integrity: sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-logical-float-and-clear@3.0.0': + resolution: {integrity: sha512-SEmaHMszwakI2rqKRJgE+8rpotFfne1ZS6bZqBoQIicFyV+xT1UF42eORPxJkVJVrH9C0ctUgwMSn3BLOIZldQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-nested-calc@1.0.0': - resolution: {integrity: sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-logical-overflow@2.0.0': + resolution: {integrity: sha512-spzR1MInxPuXKEX2csMamshR4LRaSZ3UXVaRGjeQxl70ySxOhMpP2252RAFsg8QyyBXBzuVOOdx1+bVO5bPIzA==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-normalize-display-values@1.0.1': - resolution: {integrity: sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-logical-overscroll-behavior@2.0.0': + resolution: {integrity: sha512-e/webMjoGOSYfqLunyzByZj5KKe5oyVg/YSbie99VEaSDE2kimFm0q1f6t/6Jo+VVCQ/jbe2Xy+uX+C4xzWs4w==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-oklab-function@1.1.1': - resolution: {integrity: sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-logical-resize@3.0.0': + resolution: {integrity: sha512-DFbHQOFW/+I+MY4Ycd/QN6Dg4Hcbb50elIJCfnwkRTCX05G11SwViI5BbBlg9iHRl4ytB7pmY5ieAFk3ws7yyg==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-progressive-custom-properties@1.3.0': - resolution: {integrity: sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-logical-viewport-units@3.0.4': + resolution: {integrity: sha512-q+eHV1haXA4w9xBwZLKjVKAWn3W2CMqmpNpZUk5kRprvSiBEGMgrNH3/sJZ8UA3JgyHaOt3jwT9uFa4wLX4EqQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.3 + postcss: ^8.4 - '@csstools/postcss-stepped-value-functions@1.0.1': - resolution: {integrity: sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-media-minmax@2.0.9': + resolution: {integrity: sha512-af9Qw3uS3JhYLnCbqtZ9crTvvkR+0Se+bBqSr7ykAnl9yKhk6895z9rf+2F4dClIDJWxgn0iZZ1PSdkhrbs2ig==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-text-decoration-shorthand@1.0.0': - resolution: {integrity: sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5': + resolution: {integrity: sha512-zhAe31xaaXOY2Px8IYfoVTB3wglbJUVigGphFLj6exb7cjZRH9A6adyE22XfFK3P2PzwRk0VDeTJmaxpluyrDg==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-trigonometric-functions@1.0.2': - resolution: {integrity: sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==} - engines: {node: ^14 || >=16} + '@csstools/postcss-nested-calc@4.0.0': + resolution: {integrity: sha512-jMYDdqrQQxE7k9+KjstC3NbsmC063n1FTPLCgCRS2/qHUbHM0mNy9pIn4QIiQGs9I/Bg98vMqw7mJXBxa0N88A==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - '@csstools/postcss-unset-value@1.0.2': - resolution: {integrity: sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==} - engines: {node: ^12 || ^14 || >=16} + '@csstools/postcss-normalize-display-values@4.0.0': + resolution: {integrity: sha512-HlEoG0IDRoHXzXnkV4in47dzsxdsjdz6+j7MLjaACABX2NfvjFS6XVAnpaDyGesz9gK2SC7MbNwdCHusObKJ9Q==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 + + '@csstools/postcss-oklab-function@4.0.10': + resolution: {integrity: sha512-ZzZUTDd0fgNdhv8UUjGCtObPD8LYxMH+MJsW9xlZaWTV8Ppr4PtxlHYNMmF4vVWGl0T6f8tyWAKjoI6vePSgAg==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-progressive-custom-properties@4.1.0': + resolution: {integrity: sha512-YrkI9dx8U4R8Sz2EJaoeD9fI7s7kmeEBfmO+UURNeL6lQI7VxF6sBE+rSqdCBn4onwqmxFdBU3lTwyYb/lCmxA==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-random-function@2.0.1': + resolution: {integrity: sha512-q+FQaNiRBhnoSNo+GzqGOIBKoHQ43lYz0ICrV+UudfWnEF6ksS6DsBIJSISKQT2Bvu3g4k6r7t0zYrk5pDlo8w==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-relative-color-syntax@3.0.10': + resolution: {integrity: sha512-8+0kQbQGg9yYG8hv0dtEpOMLwB9M+P7PhacgIzVzJpixxV4Eq9AUQtQw8adMmAJU1RBBmIlpmtmm3XTRd/T00g==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-scope-pseudo-class@4.0.1': + resolution: {integrity: sha512-IMi9FwtH6LMNuLea1bjVMQAsUhFxJnyLSgOp/cpv5hrzWmrUYU5fm0EguNDIIOHUqzXode8F/1qkC/tEo/qN8Q==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-sign-functions@1.1.4': + resolution: {integrity: sha512-P97h1XqRPcfcJndFdG95Gv/6ZzxUBBISem0IDqPZ7WMvc/wlO+yU0c5D/OCpZ5TJoTt63Ok3knGk64N+o6L2Pg==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-stepped-value-functions@4.0.9': + resolution: {integrity: sha512-h9btycWrsex4dNLeQfyU3y3w40LMQooJWFMm/SK9lrKguHDcFl4VMkncKKoXi2z5rM9YGWbUQABI8BT2UydIcA==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-text-decoration-shorthand@4.0.2': + resolution: {integrity: sha512-8XvCRrFNseBSAGxeaVTaNijAu+FzUvjwFXtcrynmazGb/9WUdsPCpBX+mHEHShVRq47Gy4peYAoxYs8ltUnmzA==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-trigonometric-functions@4.0.9': + resolution: {integrity: sha512-Hnh5zJUdpNrJqK9v1/E3BbrQhaDTj5YiX7P61TOvUhoDHnUmsNNxcDAgkQ32RrcWx9GVUvfUNPcUkn8R3vIX6A==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/postcss-unset-value@4.0.0': + resolution: {integrity: sha512-cBz3tOCI5Fw6NIFEwU3RiwK6mn3nKegjpJuzCndoGq3BZPkUjnsq7uQmIeMNeMbMk7YD2MfKcgCpZwX5jyXqCA==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + + '@csstools/selector-resolve-nested@3.1.0': + resolution: {integrity: sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^7.0.0 '@csstools/selector-specificity@2.2.0': resolution: {integrity: sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==} @@ -865,6 +1027,18 @@ packages: peerDependencies: postcss-selector-parser: ^6.0.10 + '@csstools/selector-specificity@5.0.0': + resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^7.0.0 + + '@csstools/utilities@2.0.0': + resolution: {integrity: sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + '@discoveryjs/json-ext@0.5.7': resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} engines: {node: '>=10.0.0'} @@ -2941,8 +3115,8 @@ packages: resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} engines: {node: '>=10'} - cosmiconfig@8.3.6: - resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==} + cosmiconfig@9.0.0: + resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==} engines: {node: '>=14'} peerDependencies: typescript: '>=4.9.5' @@ -2962,10 +3136,9 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} - css-blank-pseudo@3.0.3: - resolution: {integrity: sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==} - engines: {node: ^12 || ^14 || >=16} - hasBin: true + css-blank-pseudo@7.0.1: + resolution: {integrity: sha512-jf+twWGDf6LDoXDUode+nc7ZlrqfaNphrBIBrcmeP3D8yw1uPaix1gCC8LUQUGQ6CycuK2opkbFFWFuq/a94ag==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 @@ -2982,19 +3155,18 @@ packages: resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==} engines: {node: '>=12 || >=16'} - css-has-pseudo@3.0.4: - resolution: {integrity: sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==} - engines: {node: ^12 || ^14 || >=16} - hasBin: true + css-has-pseudo@7.0.2: + resolution: {integrity: sha512-nzol/h+E0bId46Kn2dQH5VElaknX2Sr0hFuB/1EomdC7j+OISt2ZzK7EHX9DZDY53WbIVAR7FYKSO2XnSf07MQ==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 - css-loader@6.11.0: - resolution: {integrity: sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==} - engines: {node: '>= 12.13.0'} + css-loader@7.1.2: + resolution: {integrity: sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==} + engines: {node: '>= 18.12.0'} peerDependencies: '@rspack/core': 0.x || 1.x - webpack: ^5.0.0 + webpack: ^5.27.0 peerDependenciesMeta: '@rspack/core': optional: true @@ -3026,10 +3198,9 @@ packages: lightningcss: optional: true - css-prefers-color-scheme@6.0.3: - resolution: {integrity: sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==} - engines: {node: ^12 || ^14 || >=16} - hasBin: true + css-prefers-color-scheme@10.0.0: + resolution: {integrity: sha512-VCtXZAWivRglTZditUfB4StnsWr6YVZ2PRtuxQLKTNRdtAf8tpzaVPE9zXIF3VaSc7O70iK/j1+NXxyQCqdPjQ==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 @@ -3051,8 +3222,8 @@ packages: css.escape@1.5.1: resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} - cssdb@7.11.2: - resolution: {integrity: sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==} + cssdb@8.3.0: + resolution: {integrity: sha512-c7bmItIg38DgGjSwDPZOYF/2o0QU/sSgkWOMyl8votOfgFuyiFKWPesmCGEsrGLxEA9uL540cp8LdaGEjUGsZQ==} cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} @@ -5586,11 +5757,11 @@ packages: resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==} engines: {node: '>= 0.4'} - postcss-attribute-case-insensitive@5.0.2: - resolution: {integrity: sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==} - engines: {node: ^12 || ^14 || >=16} + postcss-attribute-case-insensitive@7.0.1: + resolution: {integrity: sha512-Uai+SupNSqzlschRyNx3kbCTWgY/2hcwtHEI/ej2LJWc9JJ77qKgGptd8DHwY1mXtZ7Aoh4z4yxfwMBue9eNgw==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-calc@10.1.1: resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==} @@ -5604,23 +5775,23 @@ packages: peerDependencies: postcss: ^8.4.6 - postcss-color-functional-notation@4.2.4: - resolution: {integrity: sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==} - engines: {node: ^12 || ^14 || >=16} + postcss-color-functional-notation@7.0.10: + resolution: {integrity: sha512-k9qX+aXHBiLTRrWoCJuUFI6F1iF6QJQUXNVWJVSbqZgj57jDhBlOvD8gNUGl35tgqDivbGLhZeW3Ongz4feuKA==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - postcss-color-hex-alpha@8.0.4: - resolution: {integrity: sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==} - engines: {node: ^12 || ^14 || >=16} + postcss-color-hex-alpha@10.0.0: + resolution: {integrity: sha512-1kervM2cnlgPs2a8Vt/Qbe5cQ++N7rkYo/2rz2BkqJZIHQwaVuJgQH38REHrAi4uM0b1fqxMkWYmese94iMp3w==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 - postcss-color-rebeccapurple@7.1.1: - resolution: {integrity: sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==} - engines: {node: ^12 || ^14 || >=16} + postcss-color-rebeccapurple@10.0.0: + resolution: {integrity: sha512-JFta737jSP+hdAIEhk1Vs0q0YF5P8fFcj+09pweS8ktuGuZ8pPlykHsk6mPxZ8awDl4TrcxUqJo9l1IhVr/OjQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-colormin@7.0.3: resolution: {integrity: sha512-xZxQcSyIVZbSsl1vjoqZAcMYYdnJsIyG8OvqShuuqf12S88qQboxxEy0ohNCOLwVPXTU+hFHvJPACRL2B5ohTA==} @@ -5634,29 +5805,29 @@ packages: peerDependencies: postcss: ^8.4.32 - postcss-custom-media@8.0.2: - resolution: {integrity: sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==} - engines: {node: ^12 || ^14 || >=16} + postcss-custom-media@11.0.6: + resolution: {integrity: sha512-C4lD4b7mUIw+RZhtY7qUbf4eADmb7Ey8BFA2px9jUbwg7pjTZDl4KY4bvlUV+/vXQvzQRfiGEVJyAbtOsCMInw==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.3 + postcss: ^8.4 - postcss-custom-properties@12.1.11: - resolution: {integrity: sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==} - engines: {node: ^12 || ^14 || >=16} + postcss-custom-properties@14.0.6: + resolution: {integrity: sha512-fTYSp3xuk4BUeVhxCSJdIPhDLpJfNakZKoiTDx7yRGCdlZrSJR7mWKVOBS4sBF+5poPQFMj2YdXx1VHItBGihQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - postcss-custom-selectors@6.0.3: - resolution: {integrity: sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==} - engines: {node: ^12 || ^14 || >=16} + postcss-custom-selectors@8.0.5: + resolution: {integrity: sha512-9PGmckHQswiB2usSO6XMSswO2yFWVoCAuih1yl9FVcwkscLjRKjwsjM3t+NIWpSU2Jx3eOiK2+t4vVTQaoCHHg==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.3 + postcss: ^8.4 - postcss-dir-pseudo-class@6.0.5: - resolution: {integrity: sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==} - engines: {node: ^12 || ^14 || >=16} + postcss-dir-pseudo-class@9.0.1: + resolution: {integrity: sha512-tRBEK0MHYvcMUrAuYMEOa0zg9APqirBcgzi6P21OhxtJyJADo/SWBwY1CAwEohQ/6HDaa9jCjLRG7K3PVQYHEA==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-discard-comments@7.0.4: resolution: {integrity: sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==} @@ -5682,27 +5853,21 @@ packages: peerDependencies: postcss: ^8.4.32 - postcss-double-position-gradients@3.1.2: - resolution: {integrity: sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==} - engines: {node: ^12 || ^14 || >=16} - peerDependencies: - postcss: ^8.2 - - postcss-env-function@4.0.6: - resolution: {integrity: sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==} - engines: {node: ^12 || ^14 || >=16} + postcss-double-position-gradients@6.0.2: + resolution: {integrity: sha512-7qTqnL7nfLRyJK/AHSVrrXOuvDDzettC+wGoienURV8v2svNbu6zJC52ruZtHaO6mfcagFmuTGFdzRsJKB3k5Q==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 - postcss-focus-visible@6.0.4: - resolution: {integrity: sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==} - engines: {node: ^12 || ^14 || >=16} + postcss-focus-visible@10.0.1: + resolution: {integrity: sha512-U58wyjS/I1GZgjRok33aE8juW9qQgQUNwTSdxQGuShHzwuYdcklnvK/+qOWX1Q9kr7ysbraQ6ht6r+udansalA==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 - postcss-focus-within@5.0.4: - resolution: {integrity: sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==} - engines: {node: ^12 || ^14 || >=16} + postcss-focus-within@9.0.1: + resolution: {integrity: sha512-fzNUyS1yOYa7mOjpci/bR+u+ESvdar6hk8XNK/TRR0fiGTp2QT5N+ducP0n3rfH/m9I7H/EQU6lsa2BrgxkEjw==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 @@ -5711,48 +5876,43 @@ packages: peerDependencies: postcss: ^8.1.0 - postcss-gap-properties@3.0.5: - resolution: {integrity: sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==} - engines: {node: ^12 || ^14 || >=16} - peerDependencies: - postcss: ^8.2 - - postcss-image-set-function@4.0.7: - resolution: {integrity: sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==} - engines: {node: ^12 || ^14 || >=16} + postcss-gap-properties@6.0.0: + resolution: {integrity: sha512-Om0WPjEwiM9Ru+VhfEDPZJAKWUd0mV1HmNXqp2C29z80aQ2uP9UVhLc7e3aYMIor/S5cVhoPgYQ7RtfeZpYTRw==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - postcss-initial@4.0.1: - resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==} + postcss-image-set-function@7.0.0: + resolution: {integrity: sha512-QL7W7QNlZuzOwBTeXEmbVckNt1FSmhQtbMRvGGqqU4Nf4xk6KUEQhAoWuMzwbSv5jxiRiSZ5Tv7eiDB9U87znA==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.0.0 + postcss: ^8.4 - postcss-lab-function@4.2.1: - resolution: {integrity: sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==} - engines: {node: ^12 || ^14 || >=16} + postcss-lab-function@7.0.10: + resolution: {integrity: sha512-tqs6TCEv9tC1Riq6fOzHuHcZyhg4k3gIAMB8GGY/zA1ssGdm6puHMVE7t75aOSoFg7UD2wyrFFhbldiCMyyFTQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - postcss-loader@7.3.4: - resolution: {integrity: sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==} - engines: {node: '>= 14.15.0'} + postcss-loader@8.1.1: + resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==} + engines: {node: '>= 18.12.0'} peerDependencies: + '@rspack/core': 0.x || 1.x postcss: ^7.0.0 || ^8.0.1 webpack: ^5.0.0 + peerDependenciesMeta: + '@rspack/core': + optional: true + webpack: + optional: true - postcss-logical@5.0.4: - resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==} - engines: {node: ^12 || ^14 || >=16} + postcss-logical@8.1.0: + resolution: {integrity: sha512-pL1hXFQ2fEXNKiNiAgtfA005T9FBxky5zkX6s4GZM2D8RkVgRqz3f4g1JUoq925zXv495qk8UNldDwh8uGEDoA==} + engines: {node: '>=18'} peerDependencies: postcss: ^8.4 - postcss-media-minmax@5.0.0: - resolution: {integrity: sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==} - engines: {node: '>=10.0.0'} - peerDependencies: - postcss: ^8.1.0 - postcss-media-query-parser@0.2.3: resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} @@ -5816,11 +5976,11 @@ packages: peerDependencies: postcss: ^8.1.0 - postcss-nesting@10.2.0: - resolution: {integrity: sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==} - engines: {node: ^12 || ^14 || >=16} + postcss-nesting@13.0.1: + resolution: {integrity: sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-normalize-charset@7.0.1: resolution: {integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==} @@ -5876,11 +6036,11 @@ packages: peerDependencies: postcss: ^8.4.32 - postcss-opacity-percentage@1.1.3: - resolution: {integrity: sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==} - engines: {node: ^12 || ^14 || >=16} + postcss-opacity-percentage@3.0.0: + resolution: {integrity: sha512-K6HGVzyxUxd/VgZdX04DCtdwWJ4NGLG212US4/LA1TLAbHgmAsTWVR86o+gGIbFtnTkfOpb9sCRBx8K7HO66qQ==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-ordered-values@7.0.2: resolution: {integrity: sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==} @@ -5888,34 +6048,34 @@ packages: peerDependencies: postcss: ^8.4.32 - postcss-overflow-shorthand@3.0.4: - resolution: {integrity: sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==} - engines: {node: ^12 || ^14 || >=16} + postcss-overflow-shorthand@6.0.0: + resolution: {integrity: sha512-BdDl/AbVkDjoTofzDQnwDdm/Ym6oS9KgmO7Gr+LHYjNWJ6ExORe4+3pcLQsLA9gIROMkiGVjjwZNoL/mpXHd5Q==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-page-break@3.0.4: resolution: {integrity: sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==} peerDependencies: postcss: ^8 - postcss-place@7.0.5: - resolution: {integrity: sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==} - engines: {node: ^12 || ^14 || >=16} + postcss-place@10.0.0: + resolution: {integrity: sha512-5EBrMzat2pPAxQNWYavwAfoKfYcTADJ8AXGVPcUZ2UkNloUTWzJQExgrzrDkh3EKzmAx1evfTAzF9I8NGcc+qw==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - postcss-preset-env@7.8.3: - resolution: {integrity: sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==} - engines: {node: ^12 || ^14 || >=16} + postcss-preset-env@10.2.1: + resolution: {integrity: sha512-mDInnlm4mYhmR0S79hNLzseW9nx4Ihd8s15K99iu6u6QhoSQgqWX9Oj6nTd/8Dz3b0T7v2JSrfnXsDfv9TFvDg==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 - postcss-pseudo-class-any-link@7.1.6: - resolution: {integrity: sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==} - engines: {node: ^12 || ^14 || >=16} + postcss-pseudo-class-any-link@10.0.1: + resolution: {integrity: sha512-3el9rXlBOqTFaMFkWDOkHUTQekFIYnaQY55Rsp8As8QQkpiSgIYEcF/6Ond93oHiDsGb4kad8zjt+NPlOC1H0Q==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-reduce-initial@7.0.3: resolution: {integrity: sha512-RFvkZaqiWtGMlVjlUHpaxGqEL27lgt+Q2Ixjf83CRAzqdo+TsDyGPtJUbPx2MuYIJ+sCQc2TrOvRnhcXQfgIVA==} @@ -5943,11 +6103,11 @@ packages: peerDependencies: postcss: ^8.3.3 - postcss-selector-not@6.0.1: - resolution: {integrity: sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==} - engines: {node: ^12 || ^14 || >=16} + postcss-selector-not@8.0.1: + resolution: {integrity: sha512-kmVy/5PYVb2UOhy0+LqUYAhKj7DUGDpSWa5LZqlkWJaaAV+dxxsOG3+St0yNLu6vsKD7Dmqx+nWQt0iil89+WA==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.2 + postcss: ^8.4 postcss-selector-parser@6.1.2: resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} @@ -6343,17 +6503,17 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - sass-loader@13.3.3: - resolution: {integrity: sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==} - engines: {node: '>= 14.15.0'} + sass-loader@16.0.5: + resolution: {integrity: sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==} + engines: {node: '>= 18.12.0'} peerDependencies: - fibers: '>= 3.1.0' + '@rspack/core': 0.x || 1.x node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 sass: ^1.3.0 sass-embedded: '*' webpack: ^5.0.0 peerDependenciesMeta: - fibers: + '@rspack/core': optional: true node-sass: optional: true @@ -6361,6 +6521,8 @@ packages: optional: true sass-embedded: optional: true + webpack: + optional: true sass@1.89.1: resolution: {integrity: sha512-eMLLkl+qz7tx/0cJ9wI+w09GQ2zodTkcE/aVfywwdlRcI3EO19xGnbmJwg/JMIm+5MxVJ6outddLZ4Von4E++Q==} @@ -8248,84 +8410,271 @@ snapshots: '@bcoe/v8-coverage@1.0.2': {} - '@csstools/postcss-cascade-layers@1.1.1(postcss@8.5.4)': + '@csstools/cascade-layer-name-parser@2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': dependencies: - '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.1.2) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/color-helpers@5.0.2': {} + + '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/css-color-parser@3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/color-helpers': 5.0.2 + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/css-tokenizer@3.0.4': {} + + '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/postcss-cascade-layers@5.0.1(postcss@8.5.4)': + dependencies: + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0) postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 - '@csstools/postcss-color-function@1.1.1(postcss@8.5.4)': + '@csstools/postcss-color-function@4.0.10(postcss@8.5.4)': dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.4) + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 - postcss-value-parser: 4.2.0 - '@csstools/postcss-font-format-keywords@1.0.1(postcss@8.5.4)': + '@csstools/postcss-color-mix-function@3.0.10(postcss@8.5.4)': dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 - postcss-value-parser: 4.2.0 - '@csstools/postcss-hwb-function@1.0.2(postcss@8.5.4)': + '@csstools/postcss-color-mix-variadic-function-arguments@1.0.0(postcss@8.5.4)': dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 - postcss-value-parser: 4.2.0 - '@csstools/postcss-ic-unit@1.0.1(postcss@8.5.4)': + '@csstools/postcss-content-alt-text@2.0.6(postcss@8.5.4)': dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 - postcss-value-parser: 4.2.0 - '@csstools/postcss-is-pseudo-class@2.0.7(postcss@8.5.4)': + '@csstools/postcss-exponential-functions@2.0.9(postcss@8.5.4)': dependencies: - '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.1.2) + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 postcss: 8.5.4 - postcss-selector-parser: 6.1.2 - '@csstools/postcss-nested-calc@1.0.0(postcss@8.5.4)': + '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.5.4)': dependencies: + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - '@csstools/postcss-normalize-display-values@1.0.1(postcss@8.5.4)': + '@csstools/postcss-gamut-mapping@2.0.10(postcss@8.5.4)': + dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + postcss: 8.5.4 + + '@csstools/postcss-gradients-interpolation-method@5.0.10(postcss@8.5.4)': + dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) + postcss: 8.5.4 + + '@csstools/postcss-hwb-function@4.0.10(postcss@8.5.4)': dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) + postcss: 8.5.4 + + '@csstools/postcss-ic-unit@4.0.2(postcss@8.5.4)': + dependencies: + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - '@csstools/postcss-oklab-function@1.1.1(postcss@8.5.4)': + '@csstools/postcss-initial@2.0.1(postcss@8.5.4)': + dependencies: + postcss: 8.5.4 + + '@csstools/postcss-is-pseudo-class@5.0.1(postcss@8.5.4)': + dependencies: + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0) + postcss: 8.5.4 + postcss-selector-parser: 7.1.0 + + '@csstools/postcss-light-dark-function@2.0.9(postcss@8.5.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) + postcss: 8.5.4 + + '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.5.4)': + dependencies: + postcss: 8.5.4 + + '@csstools/postcss-logical-overflow@2.0.0(postcss@8.5.4)': + dependencies: + postcss: 8.5.4 + + '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.5.4)': + dependencies: + postcss: 8.5.4 + + '@csstools/postcss-logical-resize@3.0.0(postcss@8.5.4)': dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - '@csstools/postcss-progressive-custom-properties@1.3.0(postcss@8.5.4)': + '@csstools/postcss-logical-viewport-units@3.0.4(postcss@8.5.4)': + dependencies: + '@csstools/css-tokenizer': 3.0.4 + '@csstools/utilities': 2.0.0(postcss@8.5.4) + postcss: 8.5.4 + + '@csstools/postcss-media-minmax@2.0.9(postcss@8.5.4)': dependencies: + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + postcss: 8.5.4 + + '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5(postcss@8.5.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + postcss: 8.5.4 + + '@csstools/postcss-nested-calc@4.0.0(postcss@8.5.4)': + dependencies: + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - '@csstools/postcss-stepped-value-functions@1.0.1(postcss@8.5.4)': + '@csstools/postcss-normalize-display-values@4.0.0(postcss@8.5.4)': dependencies: postcss: 8.5.4 postcss-value-parser: 4.2.0 - '@csstools/postcss-text-decoration-shorthand@1.0.0(postcss@8.5.4)': + '@csstools/postcss-oklab-function@4.0.10(postcss@8.5.4)': + dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) + postcss: 8.5.4 + + '@csstools/postcss-progressive-custom-properties@4.1.0(postcss@8.5.4)': dependencies: postcss: 8.5.4 postcss-value-parser: 4.2.0 - '@csstools/postcss-trigonometric-functions@1.0.2(postcss@8.5.4)': + '@csstools/postcss-random-function@2.0.1(postcss@8.5.4)': + dependencies: + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + postcss: 8.5.4 + + '@csstools/postcss-relative-color-syntax@3.0.10(postcss@8.5.4)': + dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) + postcss: 8.5.4 + + '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.4)': + dependencies: + postcss: 8.5.4 + postcss-selector-parser: 7.1.0 + + '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.4)': + dependencies: + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + postcss: 8.5.4 + + '@csstools/postcss-stepped-value-functions@4.0.9(postcss@8.5.4)': dependencies: + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + postcss: 8.5.4 + + '@csstools/postcss-text-decoration-shorthand@4.0.2(postcss@8.5.4)': + dependencies: + '@csstools/color-helpers': 5.0.2 postcss: 8.5.4 postcss-value-parser: 4.2.0 - '@csstools/postcss-unset-value@1.0.2(postcss@8.5.4)': + '@csstools/postcss-trigonometric-functions@4.0.9(postcss@8.5.4)': + dependencies: + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + postcss: 8.5.4 + + '@csstools/postcss-unset-value@4.0.0(postcss@8.5.4)': dependencies: postcss: 8.5.4 + '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.0)': + dependencies: + postcss-selector-parser: 7.1.0 + '@csstools/selector-specificity@2.2.0(postcss-selector-parser@6.1.2)': dependencies: postcss-selector-parser: 6.1.2 + '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.0)': + dependencies: + postcss-selector-parser: 7.1.0 + + '@csstools/utilities@2.0.0(postcss@8.5.4)': + dependencies: + postcss: 8.5.4 + '@discoveryjs/json-ext@0.5.7': {} '@discoveryjs/json-ext@0.6.3': {} @@ -10541,12 +10890,12 @@ snapshots: path-type: 4.0.0 yaml: 1.10.2 - cosmiconfig@8.3.6(typescript@4.9.5): + cosmiconfig@9.0.0(typescript@4.9.5): dependencies: + env-paths: 2.2.1 import-fresh: 3.3.1 js-yaml: 4.1.0 parse-json: 5.2.0 - path-type: 4.0.0 optionalDependencies: typescript: 4.9.5 @@ -10568,10 +10917,10 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 - css-blank-pseudo@3.0.3(postcss@8.5.4): + css-blank-pseudo@7.0.1(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 css-color-names@1.0.1: {} @@ -10581,12 +10930,14 @@ snapshots: css-functions-list@3.2.3: {} - css-has-pseudo@3.0.4(postcss@8.5.4): + css-has-pseudo@7.0.2(postcss@8.5.4): dependencies: + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0) postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 + postcss-value-parser: 4.2.0 - css-loader@6.11.0(webpack@5.99.9): + css-loader@7.1.2(webpack@5.99.9): dependencies: icss-utils: 5.1.0(postcss@8.5.4) postcss: 8.5.4 @@ -10609,7 +10960,7 @@ snapshots: serialize-javascript: 6.0.2 webpack: 5.99.9(@swc/core@1.11.31)(webpack-cli@6.0.1) - css-prefers-color-scheme@6.0.3(postcss@8.5.4): + css-prefers-color-scheme@10.0.0(postcss@8.5.4): dependencies: postcss: 8.5.4 @@ -10635,7 +10986,7 @@ snapshots: css.escape@1.5.1: {} - cssdb@7.11.2: {} + cssdb@8.3.0: {} cssesc@3.0.0: {} @@ -13642,10 +13993,10 @@ snapshots: possible-typed-array-names@1.1.0: {} - postcss-attribute-case-insensitive@5.0.2(postcss@8.5.4): + postcss-attribute-case-insensitive@7.0.1(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 postcss-calc@10.1.1(postcss@8.5.4): dependencies: @@ -13658,18 +14009,24 @@ snapshots: postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-color-functional-notation@4.2.4(postcss@8.5.4): + postcss-color-functional-notation@7.0.10(postcss@8.5.4): dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 - postcss-value-parser: 4.2.0 - postcss-color-hex-alpha@8.0.4(postcss@8.5.4): + postcss-color-hex-alpha@10.0.0(postcss@8.5.4): dependencies: + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-color-rebeccapurple@7.1.1(postcss@8.5.4): + postcss-color-rebeccapurple@10.0.0(postcss@8.5.4): dependencies: + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 @@ -13687,25 +14044,35 @@ snapshots: postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-custom-media@8.0.2(postcss@8.5.4): + postcss-custom-media@11.0.6(postcss@8.5.4): dependencies: + '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) postcss: 8.5.4 - postcss-value-parser: 4.2.0 - postcss-custom-properties@12.1.11(postcss@8.5.4): + postcss-custom-properties@14.0.6(postcss@8.5.4): dependencies: + '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-custom-selectors@6.0.3(postcss@8.5.4): + postcss-custom-selectors@8.0.5(postcss@8.5.4): dependencies: + '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 - postcss-dir-pseudo-class@6.0.5(postcss@8.5.4): + postcss-dir-pseudo-class@9.0.1(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 postcss-discard-comments@7.0.4(postcss@8.5.4): dependencies: @@ -13724,67 +14091,61 @@ snapshots: dependencies: postcss: 8.5.4 - postcss-double-position-gradients@3.1.2(postcss@8.5.4): - dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.4) - postcss: 8.5.4 - postcss-value-parser: 4.2.0 - - postcss-env-function@4.0.6(postcss@8.5.4): + postcss-double-position-gradients@6.0.2(postcss@8.5.4): dependencies: + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-focus-visible@6.0.4(postcss@8.5.4): + postcss-focus-visible@10.0.1(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 - postcss-focus-within@5.0.4(postcss@8.5.4): + postcss-focus-within@9.0.1(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 postcss-font-variant@5.0.0(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-gap-properties@3.0.5(postcss@8.5.4): + postcss-gap-properties@6.0.0(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-image-set-function@4.0.7(postcss@8.5.4): + postcss-image-set-function@7.0.0(postcss@8.5.4): dependencies: + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-initial@4.0.1(postcss@8.5.4): + postcss-lab-function@7.0.10(postcss@8.5.4): dependencies: + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/utilities': 2.0.0(postcss@8.5.4) postcss: 8.5.4 - postcss-lab-function@4.2.1(postcss@8.5.4): - dependencies: - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.4) - postcss: 8.5.4 - postcss-value-parser: 4.2.0 - - postcss-loader@7.3.4(postcss@8.5.4)(typescript@4.9.5)(webpack@5.99.9): + postcss-loader@8.1.1(postcss@8.5.4)(typescript@4.9.5)(webpack@5.99.9): dependencies: - cosmiconfig: 8.3.6(typescript@4.9.5) + cosmiconfig: 9.0.0(typescript@4.9.5) jiti: 1.21.7 postcss: 8.5.4 semver: 7.7.2 + optionalDependencies: webpack: 5.99.9(@swc/core@1.11.31)(webpack-cli@6.0.1) transitivePeerDependencies: - typescript - postcss-logical@5.0.4(postcss@8.5.4): - dependencies: - postcss: 8.5.4 - - postcss-media-minmax@5.0.0(postcss@8.5.4): + postcss-logical@8.1.0(postcss@8.5.4): dependencies: postcss: 8.5.4 + postcss-value-parser: 4.2.0 postcss-media-query-parser@0.2.3: {} @@ -13848,11 +14209,12 @@ snapshots: icss-utils: 5.1.0(postcss@8.5.4) postcss: 8.5.4 - postcss-nesting@10.2.0(postcss@8.5.4): + postcss-nesting@13.0.1(postcss@8.5.4): dependencies: - '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.1.2) + '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.0) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0) postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 postcss-normalize-charset@7.0.1(postcss@8.5.4): dependencies: @@ -13899,7 +14261,7 @@ snapshots: postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-opacity-percentage@1.1.3(postcss@8.5.4): + postcss-opacity-percentage@3.0.0(postcss@8.5.4): dependencies: postcss: 8.5.4 @@ -13909,7 +14271,7 @@ snapshots: postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-overflow-shorthand@3.0.4(postcss@8.5.4): + postcss-overflow-shorthand@6.0.0(postcss@8.5.4): dependencies: postcss: 8.5.4 postcss-value-parser: 4.2.0 @@ -13918,68 +14280,83 @@ snapshots: dependencies: postcss: 8.5.4 - postcss-place@7.0.5(postcss@8.5.4): + postcss-place@10.0.0(postcss@8.5.4): dependencies: postcss: 8.5.4 postcss-value-parser: 4.2.0 - postcss-preset-env@7.8.3(postcss@8.5.4): - dependencies: - '@csstools/postcss-cascade-layers': 1.1.1(postcss@8.5.4) - '@csstools/postcss-color-function': 1.1.1(postcss@8.5.4) - '@csstools/postcss-font-format-keywords': 1.0.1(postcss@8.5.4) - '@csstools/postcss-hwb-function': 1.0.2(postcss@8.5.4) - '@csstools/postcss-ic-unit': 1.0.1(postcss@8.5.4) - '@csstools/postcss-is-pseudo-class': 2.0.7(postcss@8.5.4) - '@csstools/postcss-nested-calc': 1.0.0(postcss@8.5.4) - '@csstools/postcss-normalize-display-values': 1.0.1(postcss@8.5.4) - '@csstools/postcss-oklab-function': 1.1.1(postcss@8.5.4) - '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.4) - '@csstools/postcss-stepped-value-functions': 1.0.1(postcss@8.5.4) - '@csstools/postcss-text-decoration-shorthand': 1.0.0(postcss@8.5.4) - '@csstools/postcss-trigonometric-functions': 1.0.2(postcss@8.5.4) - '@csstools/postcss-unset-value': 1.0.2(postcss@8.5.4) + postcss-preset-env@10.2.1(postcss@8.5.4): + dependencies: + '@csstools/postcss-cascade-layers': 5.0.1(postcss@8.5.4) + '@csstools/postcss-color-function': 4.0.10(postcss@8.5.4) + '@csstools/postcss-color-mix-function': 3.0.10(postcss@8.5.4) + '@csstools/postcss-color-mix-variadic-function-arguments': 1.0.0(postcss@8.5.4) + '@csstools/postcss-content-alt-text': 2.0.6(postcss@8.5.4) + '@csstools/postcss-exponential-functions': 2.0.9(postcss@8.5.4) + '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.5.4) + '@csstools/postcss-gamut-mapping': 2.0.10(postcss@8.5.4) + '@csstools/postcss-gradients-interpolation-method': 5.0.10(postcss@8.5.4) + '@csstools/postcss-hwb-function': 4.0.10(postcss@8.5.4) + '@csstools/postcss-ic-unit': 4.0.2(postcss@8.5.4) + '@csstools/postcss-initial': 2.0.1(postcss@8.5.4) + '@csstools/postcss-is-pseudo-class': 5.0.1(postcss@8.5.4) + '@csstools/postcss-light-dark-function': 2.0.9(postcss@8.5.4) + '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.5.4) + '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.5.4) + '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.5.4) + '@csstools/postcss-logical-resize': 3.0.0(postcss@8.5.4) + '@csstools/postcss-logical-viewport-units': 3.0.4(postcss@8.5.4) + '@csstools/postcss-media-minmax': 2.0.9(postcss@8.5.4) + '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.5(postcss@8.5.4) + '@csstools/postcss-nested-calc': 4.0.0(postcss@8.5.4) + '@csstools/postcss-normalize-display-values': 4.0.0(postcss@8.5.4) + '@csstools/postcss-oklab-function': 4.0.10(postcss@8.5.4) + '@csstools/postcss-progressive-custom-properties': 4.1.0(postcss@8.5.4) + '@csstools/postcss-random-function': 2.0.1(postcss@8.5.4) + '@csstools/postcss-relative-color-syntax': 3.0.10(postcss@8.5.4) + '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.5.4) + '@csstools/postcss-sign-functions': 1.1.4(postcss@8.5.4) + '@csstools/postcss-stepped-value-functions': 4.0.9(postcss@8.5.4) + '@csstools/postcss-text-decoration-shorthand': 4.0.2(postcss@8.5.4) + '@csstools/postcss-trigonometric-functions': 4.0.9(postcss@8.5.4) + '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.4) autoprefixer: 10.4.21(postcss@8.5.4) browserslist: 4.25.0 - css-blank-pseudo: 3.0.3(postcss@8.5.4) - css-has-pseudo: 3.0.4(postcss@8.5.4) - css-prefers-color-scheme: 6.0.3(postcss@8.5.4) - cssdb: 7.11.2 + css-blank-pseudo: 7.0.1(postcss@8.5.4) + css-has-pseudo: 7.0.2(postcss@8.5.4) + css-prefers-color-scheme: 10.0.0(postcss@8.5.4) + cssdb: 8.3.0 postcss: 8.5.4 - postcss-attribute-case-insensitive: 5.0.2(postcss@8.5.4) + postcss-attribute-case-insensitive: 7.0.1(postcss@8.5.4) postcss-clamp: 4.1.0(postcss@8.5.4) - postcss-color-functional-notation: 4.2.4(postcss@8.5.4) - postcss-color-hex-alpha: 8.0.4(postcss@8.5.4) - postcss-color-rebeccapurple: 7.1.1(postcss@8.5.4) - postcss-custom-media: 8.0.2(postcss@8.5.4) - postcss-custom-properties: 12.1.11(postcss@8.5.4) - postcss-custom-selectors: 6.0.3(postcss@8.5.4) - postcss-dir-pseudo-class: 6.0.5(postcss@8.5.4) - postcss-double-position-gradients: 3.1.2(postcss@8.5.4) - postcss-env-function: 4.0.6(postcss@8.5.4) - postcss-focus-visible: 6.0.4(postcss@8.5.4) - postcss-focus-within: 5.0.4(postcss@8.5.4) + postcss-color-functional-notation: 7.0.10(postcss@8.5.4) + postcss-color-hex-alpha: 10.0.0(postcss@8.5.4) + postcss-color-rebeccapurple: 10.0.0(postcss@8.5.4) + postcss-custom-media: 11.0.6(postcss@8.5.4) + postcss-custom-properties: 14.0.6(postcss@8.5.4) + postcss-custom-selectors: 8.0.5(postcss@8.5.4) + postcss-dir-pseudo-class: 9.0.1(postcss@8.5.4) + postcss-double-position-gradients: 6.0.2(postcss@8.5.4) + postcss-focus-visible: 10.0.1(postcss@8.5.4) + postcss-focus-within: 9.0.1(postcss@8.5.4) postcss-font-variant: 5.0.0(postcss@8.5.4) - postcss-gap-properties: 3.0.5(postcss@8.5.4) - postcss-image-set-function: 4.0.7(postcss@8.5.4) - postcss-initial: 4.0.1(postcss@8.5.4) - postcss-lab-function: 4.2.1(postcss@8.5.4) - postcss-logical: 5.0.4(postcss@8.5.4) - postcss-media-minmax: 5.0.0(postcss@8.5.4) - postcss-nesting: 10.2.0(postcss@8.5.4) - postcss-opacity-percentage: 1.1.3(postcss@8.5.4) - postcss-overflow-shorthand: 3.0.4(postcss@8.5.4) + postcss-gap-properties: 6.0.0(postcss@8.5.4) + postcss-image-set-function: 7.0.0(postcss@8.5.4) + postcss-lab-function: 7.0.10(postcss@8.5.4) + postcss-logical: 8.1.0(postcss@8.5.4) + postcss-nesting: 13.0.1(postcss@8.5.4) + postcss-opacity-percentage: 3.0.0(postcss@8.5.4) + postcss-overflow-shorthand: 6.0.0(postcss@8.5.4) postcss-page-break: 3.0.4(postcss@8.5.4) - postcss-place: 7.0.5(postcss@8.5.4) - postcss-pseudo-class-any-link: 7.1.6(postcss@8.5.4) + postcss-place: 10.0.0(postcss@8.5.4) + postcss-pseudo-class-any-link: 10.0.1(postcss@8.5.4) postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.4) - postcss-selector-not: 6.0.1(postcss@8.5.4) - postcss-value-parser: 4.2.0 + postcss-selector-not: 8.0.1(postcss@8.5.4) - postcss-pseudo-class-any-link@7.1.6(postcss@8.5.4): + postcss-pseudo-class-any-link@10.0.1(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 postcss-reduce-initial@7.0.3(postcss@8.5.4): dependencies: @@ -14002,10 +14379,10 @@ snapshots: dependencies: postcss: 8.5.4 - postcss-selector-not@6.0.1(postcss@8.5.4): + postcss-selector-not@8.0.1(postcss@8.5.4): dependencies: postcss: 8.5.4 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.0 postcss-selector-parser@6.1.2: dependencies: @@ -14427,12 +14804,12 @@ snapshots: safer-buffer@2.1.2: {} - sass-loader@13.3.3(sass@1.89.1)(webpack@5.99.9): + sass-loader@16.0.5(sass@1.89.1)(webpack@5.99.9): dependencies: neo-async: 2.6.2 - webpack: 5.99.9(@swc/core@1.11.31)(webpack-cli@6.0.1) optionalDependencies: sass: 1.89.1 + webpack: 5.99.9(@swc/core@1.11.31)(webpack-cli@6.0.1) sass@1.89.1: dependencies: diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..582d30b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,64 @@ +// Modern PostCSS configuration for react-wizardry +// Using latest PostCSS plugins and best practices for 2025 + +export default { + plugins: { + // PostCSS Preset Env with modern features + 'postcss-preset-env': { + stage: 1, // Use stage 1 features (more stable than stage 0) + features: { + 'nesting-rules': true, + 'custom-media-queries': true, + 'media-query-ranges': true, + 'custom-properties': { + preserve: true, // Keep custom properties for runtime + }, + }, + autoprefixer: { + flexbox: 'no-2009', // Disable old flexbox syntax + grid: 'autoplace', // Enable CSS Grid autoprefixing + }, + browsers: [ + 'last 2 versions', + 'not op_mini all', + 'not ie <= 11', + '> 1%', + 'not dead' + ], + }, + + // Autoprefixer for vendor prefixes + autoprefixer: { + flexbox: 'no-2009', + grid: 'autoplace', + overrideBrowserslist: [ + 'last 2 versions', + 'not op_mini all', + 'not ie <= 11', + '> 1%', + 'not dead' + ], + }, + + // CSS Nano for production minification (only in production) + ...(process.env.NODE_ENV === 'production' ? { + cssnano: { + preset: ['default', { + discardComments: { + removeAll: true, + }, + normalizeWhitespace: true, + colormin: true, + convertValues: true, + discardDuplicates: true, + discardEmpty: true, + mergeRules: true, + minifyFontValues: true, + minifySelectors: true, + reduceIdents: false, // Keep animation names intact + svgo: true, + }], + }, + } : {}), + }, +}; diff --git a/src/components/_mixins.scss b/src/components/_mixins.scss new file mode 100644 index 0000000..57f2514 --- /dev/null +++ b/src/components/_mixins.scss @@ -0,0 +1,66 @@ +// Common mixins and variables for react-wizardry +@use "sass:color"; + +// Flexbox mixins +@mixin flex($direction: row, $align: center, $justify: center) { + display: flex; + flex-direction: $direction; + align-items: $align; + justify-content: $justify; +} + +@mixin flex-center { + @include flex(row, center, center); +} + +@mixin flex-start { + @include flex(row, center, flex-start); +} + +@mixin flex-end { + @include flex(row, center, flex-end); +} + +@mixin flex-column($align: flex-start) { + @include flex(column, $align, flex-start); +} + +// RTL handling +@mixin rtl-support { + &.RTL { + direction: rtl; + } +} + +@mixin margin-side($size) { + &.RTL { + margin-right: $size; + } + + &:not(.RTL) { + margin-left: $size; + } +} + +// Transitions +@mixin transition($properties...) { + transition: $properties; +} + +// Common styling +@mixin icon-base($size: 1rem) { + width: $size; + height: $size; + @include flex-center; + + svg { + width: 100%; + height: 100%; + } +} + +// Status indicators +@mixin status-indicator($color, $text-color: #fff) { + background: $color; + color: $text-color; +} diff --git a/src/components/form-field/form-field-message.module.scss b/src/components/form-field/form-field-message.module.scss index 8a41584..fe427ae 100644 --- a/src/components/form-field/form-field-message.module.scss +++ b/src/components/form-field/form-field-message.module.scss @@ -1,13 +1,13 @@ +@use '../styles' as s; + .form_field_message_wrapper { - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; color: #fff; font-size: 0.85rem; border-radius: 4px; padding: 0.35rem 0.5rem; background: var(--rc-wiz-primary); - transition: opacity 0.2s ease-in, visibility 0.2s ease-in; + @include s.transition(opacity 0.2s ease-in, visibility 0.2s ease-in); position: relative; &::after { @@ -35,43 +35,29 @@ left: -6px; } - &.RTL::after { - right: -6px; - transform: rotate(180deg); - } - &.RTL { margin-right: 2rem; - } - &:not(.RTL) { - margin-left: 2rem; - } + &::after { + right: -6px; + transform: rotate(180deg); + } - &.RTL { .icon { margin-left: 0.2rem; } } &:not(.RTL) { + margin-left: 2rem; + .icon { margin-right: 0.2rem; } } .icon { - width: 1rem; - height: 1rem; - display: block; - display: flex; - align-items: center; - justify-content: center; - - svg { - width: 100%; - height: 100%; - } + @include s.icon-base(1rem); } .message { diff --git a/src/components/form-field/form-field.module.scss b/src/components/form-field/form-field.module.scss index 6478eaf..bee1ad8 100644 --- a/src/components/form-field/form-field.module.scss +++ b/src/components/form-field/form-field.module.scss @@ -1,9 +1,8 @@ @use "sass:color"; +@use '../styles' as s; .form_field { - display: flex; - flex-direction: column; - align-items: flex-start; + @include s.flex-column(flex-start); margin-bottom: 1rem; padding: 1.5rem 1rem; background: var(--rc-wiz-formFieldBackground); @@ -11,7 +10,7 @@ width: calc(100% - 3rem); position: relative; border: 1px solid transparent; - transition: border 0.2s ease-in, box-shadow 0.2s ease-in; + @include s.transition(border 0.2s ease-in, box-shadow 0.2s ease-in); input:not([type="radio"], [type="checkbox"]), textarea { @@ -48,9 +47,7 @@ } .input_wrapper { - display: flex; - align-items: center; - justify-content: flex-start; + @include s.flex-start; flex-wrap: wrap; } @@ -61,24 +58,21 @@ } .status { - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; position: absolute; top: 50%; transform: translateY(-50%); height: 1.25rem; width: 1.25rem; border-radius: 50%; - transition: background 0.25s ease-in, color 0.25s ease-in, fill 0.25s ease-in; + @include s.transition(background 0.25s ease-in, color 0.25s ease-in, fill 0.25s ease-in); &.success { - background: var(--rc-wiz-success); - color: #fff; + @include s.status-indicator(var(--rc-wiz-success)); } &.fail { - background: var(--rc-wiz-fail); + @include s.status-indicator(var(--rc-wiz-fail)); svg { fill: #fff; @@ -86,7 +80,7 @@ } &.warning { - background: var(--rc-wiz-warning); + @include s.status-indicator(var(--rc-wiz-warning)); svg { fill: #fff; @@ -110,40 +104,23 @@ } .asterisk { - width: 0.7rem; - height: 0.7rem; - display: flex; - align-items: center; - justify-content: center; - - &.RTL { - margin-right: 0.5rem; - } - - &:not(.RTL) { - margin-left: 0.5rem; - } + @include s.icon-base(0.7rem); + @include s.margin-side(0.5rem); svg { fill: var(--rc-wiz-fail); - height: 100%; - width: 100%; } } .collection_wrapper { - display: flex; - align-items: center; - justify-content: flex-start; + @include s.flex-start; input { margin-right: 0.5rem; } label { - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; color: var(--rc-wiz-textColor); padding: 0.5rem; } diff --git a/src/components/page/page.module.scss b/src/components/page/page.module.scss index 2cdaa90..07995f6 100644 --- a/src/components/page/page.module.scss +++ b/src/components/page/page.module.scss @@ -1,3 +1,5 @@ +@use '../styles' as s; + .page_wrapper { padding: 0.5rem 0; transition: opacity 0.25s ease-out; @@ -8,16 +10,11 @@ } .fields_wrapper { - display: flex; - flex-direction: column; + @include s.flex-column; &.RTL { align-items: flex-end; } - - &:not(.RTL) { - align-items: flex-start; - } } .form_field_wrapper { @@ -25,9 +22,7 @@ } .header { - display: flex; - align-items: center; - justify-content: flex-start; + @include s.flex-start; font-size: 1rem; font-weight: 500; border-bottom: 2px solid var(--rc-wiz-primary); @@ -35,8 +30,6 @@ margin-bottom: 1rem; text-transform: uppercase; color: var(--rc-wiz-textColor); - - &.RTL { - direction: rtl; - } + + @include s.rtl-support; } diff --git a/src/components/styles/_mixins.scss b/src/components/styles/_mixins.scss new file mode 100644 index 0000000..4289518 --- /dev/null +++ b/src/components/styles/_mixins.scss @@ -0,0 +1,67 @@ +// Common mixins and variables for react-wizardry +@use "sass:color"; +@use "_variables" as vars; + +// Flexbox mixins +@mixin flex($direction: row, $align: center, $justify: center) { + display: flex; + flex-direction: $direction; + align-items: $align; + justify-content: $justify; +} + +@mixin flex-center { + @include flex(row, center, center); +} + +@mixin flex-start { + @include flex(row, center, flex-start); +} + +@mixin flex-end { + @include flex(row, center, flex-end); +} + +@mixin flex-column($align: flex-start) { + @include flex(column, $align, flex-start); +} + +// RTL handling +@mixin rtl-support { + &.RTL { + direction: rtl; + } +} + +@mixin margin-side($size) { + &.RTL { + margin-right: $size; + } + + &:not(.RTL) { + margin-left: $size; + } +} + +// Transitions +@mixin transition($properties...) { + transition: $properties; +} + +// Common styling +@mixin icon-base($size: 1rem) { + width: $size; + height: $size; + @include flex-center; + + svg { + width: 100%; + height: 100%; + } +} + +// Status indicators +@mixin status-indicator($color, $text-color: #fff) { + background: $color; + color: $text-color; +} diff --git a/src/components/styles/_variables.scss b/src/components/styles/_variables.scss new file mode 100644 index 0000000..fa4a414 --- /dev/null +++ b/src/components/styles/_variables.scss @@ -0,0 +1,20 @@ +// Variables for theming and styling +$primary-color: var(--rc-wiz-primary); +$background-color: var(--rc-wiz-background); +$text-color: var(--rc-wiz-textColor); +$success-color: var(--rc-wiz-success); +$fail-color: var(--rc-wiz-fail); +$warning-color: var(--rc-wiz-warning); +$tab-color: var(--rc-wiz-tabColor); +$tab-line-color: var(--rc-wiz-tabLineColor); +$form-field-background: var(--rc-wiz-formFieldBackground); +$form-field-border: var(--rc-wiz-formFieldBorder); +$input-background: var(--rc-wiz-inputBackground); +$input-text-color: var(--rc-wiz-inputTextColor); + +// Spacing variables +$spacing-xs: 0.25rem; +$spacing-sm: 0.5rem; +$spacing-md: 1rem; +$spacing-lg: 1.5rem; +$spacing-xl: 2rem; diff --git a/src/components/styles/index.scss b/src/components/styles/index.scss new file mode 100644 index 0000000..28d03dd --- /dev/null +++ b/src/components/styles/index.scss @@ -0,0 +1,2 @@ +// Styles index file to forward all mixins and variables +@forward '_mixins'; diff --git a/src/components/wizard-finish.module.scss b/src/components/wizard-finish.module.scss index f1042f3..a2dbd84 100644 --- a/src/components/wizard-finish.module.scss +++ b/src/components/wizard-finish.module.scss @@ -1,29 +1,21 @@ +@use './styles' as s; + .wizard_finish { - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; } .message { - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; font-size: 1.5rem; color: var(--rc-wiz-textColor); margin-left: 0.5rem; } .icon { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; + @include s.icon-base(2rem); color: var(--rc-wiz-textColor); svg { - width: 100%; - height: 100%; fill: var(--rc-wiz-primary); } } diff --git a/src/components/wizard-footer/wizard-footer.module.scss b/src/components/wizard-footer/wizard-footer.module.scss index ad461ac..8112cd8 100644 --- a/src/components/wizard-footer/wizard-footer.module.scss +++ b/src/components/wizard-footer/wizard-footer.module.scss @@ -1,19 +1,15 @@ +@use '../styles' as s; + .wizard_footer { - display: flex; - align-items: center; - justify-content: flex-end; + @include s.flex-end; border-top: 1px solid #e8e8e8; padding-top: 1rem; - - &.RTL { - direction: rtl; - } + + @include s.rtl-support; } .button_controls { - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; &.RTL { margin-right: auto; @@ -32,7 +28,6 @@ .button { border: 0; - background: none; border-radius: 4px; font-size: 1rem; font-weight: normal; @@ -42,7 +37,6 @@ cursor: pointer; min-width: 70px; min-height: 35px; - display: grid; justify-items: center; align-items: center; @@ -55,12 +49,14 @@ grid-template-columns: 70% 30%; } - &.RTL:not(:last-child) { - margin-left: 0.5rem; - } - - &:not(.RTL):not(:last-child) { - margin-right: 0.5rem; + &:not(:last-child) { + &.RTL { + margin-left: 0.5rem; + } + + &:not(.RTL) { + margin-right: 0.5rem; + } } &.disabled { @@ -69,16 +65,8 @@ cursor: not-allowed; pointer-events: none; } - - &.RTL { - direction: rtl; - // border: 1px solid red; - } - - &.RTL:not(:last-child) { - // margin-left: 0.5rem; - // border: 1px solid red; - } + + @include s.rtl-support; } .RTL { @@ -88,14 +76,5 @@ } .btn_icon { - width: 1rem; - height: 1rem; - display: flex; - align-items: center; - justify-content: center; - - svg { - width: 100%; - height: 100%; - } + @include s.icon-base(1rem); } diff --git a/src/components/wizard-header/wizard-header.module.scss b/src/components/wizard-header/wizard-header.module.scss index 10e41d2..16f8032 100644 --- a/src/components/wizard-header/wizard-header.module.scss +++ b/src/components/wizard-header/wizard-header.module.scss @@ -1,22 +1,18 @@ +@use '../styles' as s; + .wrapper { - display: flex; - align-items: center; - justify-content: flex-start; + @include s.flex-start; &.stepper_title_enabled { margin-bottom: 2rem; } - - &.RTL { - direction: rtl; - } + + @include s.rtl-support; } .tabs { + @include s.flex-start; list-style: none; - display: flex; - align-items: center; - justify-content: flex-start; padding: 0; margin: 0; } @@ -24,14 +20,12 @@ .tab { border-radius: 50%; color: #000; - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; height: 2rem; cursor: pointer; font-size: 1rem; position: relative; - transition: background 0.1s ease-in, color 0.1s ease-in; + @include s.transition(background 0.1s ease-in, color 0.1s ease-in); width: var(--rc-wiz-tab-width); &.disabled { @@ -50,19 +44,43 @@ &.selected { outline-width: 2px; outline-offset: 3px; - } - - &.selected::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - width: calc(100% + 4px); - height: calc(100% + 4px); - border-radius: 50%; - transition: opacity 0.1s ease-in; - z-index: 1; + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + width: calc(100% + 4px); + height: calc(100% + 4px); + border-radius: 50%; + transition: opacity 0.1s ease-in; + z-index: 1; + } + + &:last-child::after { + background: var(--rc-wiz-primary); + } + + &.highlight:not(:last-child) { + &::after { + background: linear-gradient( + to right, + var(--rc-wiz-primary) 0%, + var(--rc-wiz-primary) 50%, + var(--rc-wiz-tabLineColor) 100% + ); + } + + &.RTL::after { + background: linear-gradient( + to left, + var(--rc-wiz-primary) 0%, + var(--rc-wiz-primary) 50%, + var(--rc-wiz-tabLineColor) 100% + ); + } + } } &::after { @@ -82,37 +100,13 @@ background: var(--rc-wiz-primary); } - &.selected.highlight:not(:last-child)::after { - background: linear-gradient( - to right, - var(--rc-wiz-primary) 0%, - var(--rc-wiz-primary) 50%, - var(--rc-wiz-tabLineColor) 100% - ); - } - - &.selected.highlight:not(:last-child).RTL::after { - background: linear-gradient( - to left, - var(--rc-wiz-primary) 0%, - var(--rc-wiz-primary) 50%, - var(--rc-wiz-tabLineColor) 100% - ); - } - - &.selected:last-child::after { - background: var(--rc-wiz-primary); - } - &:not(.highlight)::after { background: var(--rc-wiz-tabLineColor); } } .icon_container { - display: flex; - align-items: center; - justify-content: center; + @include s.flex-center; height: 1.25rem; width: 1.25rem; z-index: 1; diff --git a/src/components/wizard.module.scss b/src/components/wizard.module.scss index f46f32c..5aabe69 100644 --- a/src/components/wizard.module.scss +++ b/src/components/wizard.module.scss @@ -1,10 +1,10 @@ +@use './styles' as s; + $padding: 1.5rem; +$wrapper-width: calc(100% - $padding); .wrapper { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; + @include s.flex(column, flex-start, center); width: 100%; background: var(--rc-wiz-background); padding: $padding; @@ -12,14 +12,17 @@ $padding: 1.5rem; box-shadow: 1px 1px 10px 2px #dcdcdc; } -.header_wrapper { +%common-wrapper { + width: $wrapper-width; margin: 0.5rem 0; - width: calc(100% - $padding); +} + +.header_wrapper { + @extend %common-wrapper; } .body_wrapper { - width: calc(100% - $padding); - margin: 0.5rem 0; + @extend %common-wrapper; position: relative; z-index: 1; overflow: hidden; @@ -27,15 +30,12 @@ $padding: 1.5rem; } .pages_wrapper { - display: flex; - align-items: flex-start; - justify-content: flex-start; + @include s.flex(row, flex-start, flex-start); position: absolute; z-index: 0; transition: transform 0.3s ease-in-out; } .footer_wrapper { - width: calc(100% - $padding); - margin: 0.5rem 0; + @extend %common-wrapper; } diff --git a/vite.config.ts b/vite.config.ts index b1b5f91..8a076cd 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,38 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()] + plugins: [react()], + css: { + modules: { + // Enable CSS modules for .module.scss and .module.css files + localsConvention: 'camelCaseOnly', + generateScopedName: '[name]__[local]__[hash:base64:5]', + }, + preprocessorOptions: { + scss: { + // Add global imports for Sass variables and mixins + additionalData: ` + @use "src/components/styles/_variables.scss" as *; + @use "src/components/styles/_mixins.scss" as *; + `, + includePaths: [ + path.resolve(__dirname, 'src'), + path.resolve(__dirname, 'src/components/styles'), + ], + silenceDeprecations: ['legacy-js-api'], // Silence Sass deprecation warnings + }, + }, + // PostCSS config will be automatically loaded from postcss.config.js + postcss: {}, + }, + resolve: { + alias: { + '@': path.resolve(__dirname, 'src'), + '@components': path.resolve(__dirname, 'src/components'), + '@styles': path.resolve(__dirname, 'src/components/styles'), + }, + }, }) diff --git a/webpack.config.js b/webpack.config.js index db54c37..2bad48d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,7 +4,6 @@ import autoprefixer from 'autoprefixer'; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import path from 'path'; import { fileURLToPath } from 'url'; -import PostCSSpresetEnv from 'postcss-preset-env'; import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import NodeExternals from 'webpack-node-externals'; import { createRequire } from 'module'; @@ -93,21 +92,68 @@ const config = { test: /\.s[ac]ss$/i, use: [ stylesHandler, - "css-loader", + { + loader: "css-loader", + options: { + modules: { + auto: true, // Enable CSS modules for .module.scss files + localIdentName: isProduction + ? '[hash:base64:8]' + : '[name]__[local]__[hash:base64:5]', + }, + sourceMap: !isProduction, + importLoaders: 3, // Apply loaders to @import resources + }, + }, { loader: "postcss-loader", options: { - postcssOptions: { - plugins: [autoprefixer(), PostCSSpresetEnv()], + sourceMap: !isProduction, + // PostCSS config will be automatically loaded from postcss.config.js + }, + }, + { + loader: "sass-loader", + options: { + sourceMap: !isProduction, + sassOptions: { + outputStyle: isProduction ? 'compressed' : 'expanded', + includePaths: [ + path.resolve(__dirname, 'src'), + path.resolve(__dirname, 'src/components/styles'), + path.resolve(__dirname, 'node_modules'), + ], + silenceDeprecations: ['legacy-js-api'], // Silence Sass deprecation warnings }, }, }, - "sass-loader", ], }, { test: /\.css$/i, - use: [stylesHandler, "css-loader", "postcss-loader"], + use: [ + stylesHandler, + { + loader: "css-loader", + options: { + modules: { + auto: true, // Enable CSS modules for .module.css files + localIdentName: isProduction + ? '[hash:base64:8]' + : '[name]__[local]__[hash:base64:5]', + }, + sourceMap: !isProduction, + importLoaders: 1, + }, + }, + { + loader: "postcss-loader", + options: { + sourceMap: !isProduction, + // PostCSS config will be automatically loaded from postcss.config.js + }, + }, + ], }, { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, From 39d7b60f0163a679d734074075d2083f23b452de Mon Sep 17 00:00:00 2001 From: prabhuignoto Date: Mon, 9 Jun 2025 00:04:13 +0530 Subject: [PATCH 2/2] fix: Change path import to use namespace import syntax --- vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 8a076cd..641c9db 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,6 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' -import path from 'path' +import * as path from 'path' // https://vitejs.dev/config/ export default defineConfig({