fix: sanitized the css linting process

.stylelintrc.json

@@ -3,7 +3,8 @@
     "stylelint-config-standard"
   ],
   "plugins": [
-    "stylelint-order"
+    "stylelint-order",
+    "stylelint-no-unsupported-browser-features"
   ],
   "rules": {
     "order/properties-alphabetical-order": true,
@@ -13,6 +14,9 @@
         "first-nested"
       ],
       "ignore": ["after-comment"]
+    }],
+    "plugin/no-unsupported-browser-features": [true, {
+      "ignorePartialSupport": true
     }]
   },
   "reportDescriptionlessDisables": true,

package.json

@@ -35,7 +35,7 @@
     "dev:remix": "cross-env NODE_ENV=development remix watch",
     "int": "playwright test",
     "lint": "run-p \"lint:*\"",
-    "lint:css": "postcss src/**/*.css -d .cache/postcss && rimraf .cache/postcss",
+    "lint:css": "stylelint --fix --cache-location .cache/stylelint --cache -c .stylelintrc.json src/**/*.css src/**/*.md src/*.md",
     "lint:eslint": "eslint --ext .ts,.tsx,.json **/*.{ts,tsx,json}",
     "lint:typecheck": "tsc",
     "playwright:install": "playwright install --with-deps",
@@ -152,10 +152,8 @@
     "autoprefixer": "10.4.14",
     "aws-cdk": "2.72.1",
     "c8": "7.13.0",
-    "colorguard": "1.2.1",
     "config-ini-parser": "1.6.1",
     "cssnano": "6.0.0",
-    "doiuse": "4.4.1",
     "esbuild-copy-static-files": "0.1.0",
     "esbuild-plugin-env": "1.0.5",
     "esbuild-plugin-environment": "0.2.4",
@@ -181,7 +179,6 @@
     "postcss-nested": "6.0.1",
     "postcss-preset-env": "8.3.0",
     "postcss-reporter": "7.0.5",
-    "postcss-scss": "4.0.6",
     "postcss-sorting": "8.0.2",
     "react-docgen-typescript": "2.2.2",
     "reflect-metadata": "0.1.13",
@@ -195,6 +192,7 @@
     "storybook-dark-mode-v7": "3.0.0-alpha.0",
     "stylelint": "15.4.0",
     "stylelint-config-standard": "32.0.0",
+    "stylelint-no-unsupported-browser-features": "6.1.0",
     "stylelint-order": "6.0.3",
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.2.0",

postcss.config.js

@@ -10,21 +10,10 @@ module.exports = (cfg) => {
       'postcss-preset-env': {
         stage: 0
       },
-      'colorguard': {},
-      'doiuse': {
-        browsers: packageJson.browserslist,
-        ignoreFiles: [
-          '**/node_modules/**/*'
-        ]
-      },
       'autoprefixer': {
         grid: true
       },
       'cssnano': dev ? false : {},
-      'stylelint': {
-        configFile: '.stylelintrc.json',
-        fix: true
-      },
       'postcss-reporter': {},
       'postcss-custom-media': {},
     }

src/styles/Atoms/_all.css

@@ -1,2 +1,2 @@
-@import './icons.css';
-@import './toggle.css';
+@import url('./icons.css');
+@import url('./toggle.css');

src/styles/Atoms/toggle.css

@@ -1,11 +1,12 @@
 .toggle-component {
+  display: inline-block;
+
   /* The switch - the box around the slider */
 
   font-size: 17px;
+  height: 2rem;
   position: relative;
-  display: inline-block;
   width: 3.5rem;
-  height: 2rem;
 
   /* Hide default HTML checkbox */
 
@@ -16,28 +17,27 @@
   /* The slider */
 
   & .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background-color: #fff;
     border: 1px solid #adb5bd;
     border-radius: 30px;
+    inset: 0;
+    cursor: pointer;
+    position: absolute;
+
     @media (--motion-ok) {
       transition: .4s;
     }
 
-    &:before {
-      position: absolute;
+    &::before {
+      background-color: #adb5bd;
+      border-radius: 20px;
+      bottom: 0.25rem;
       content: "";
       height: 1.4rem;
-      width: 1.4rem;
-      border-radius: 20px;
       left: 0.27rem;
-      bottom: 0.25rem;
-      background-color: #adb5bd;
+      position: absolute;
+      width: 1.4rem;
+
       @media (--motion-ok) {
         transition: .4s;
       }
@@ -48,25 +48,26 @@
     background-color: var(--accent-1);
     border: 1px solid var(--text-2);
 
-    &:before {
-      transform: translateX(1.4rem);
+    &::before {
       background-color: #fff;
+      transform: translateX(1.4rem);
     }
   }
 
   & input:disabled + .slider {
     background-color: gray;
     cursor: initial;
 
-    &:before {
+    &::before {
       background-color: transparent;
       border: 1px solid white;
     }
   }
 
   &:has(input:focus-visible) .slider {
     background-color: var(--accent-1-200);
-    &:before {
+
+    &::before {
       background-color: #fff;
     }
   }

src/styles/app.css

@@ -13,18 +13,18 @@ html {
   block-size: 100%;
   font-family: 'IBM Plex Sans', sans-serif;
 
-  /* stylelint-disable-next-line number-max-precision */
+  /* stylelint-disable-next-line number-max-precision -- This precision is required for the exact font sizes */
   font-size: calc(15px + 0.390625vw);
   height: 100dvh;
   margin: 0;
+
   --accent-1: #16a799;
   --accent-1-200: #8BD3CC;
   --accent-2: #FF8A65;
 }
 
 body {
   align-items: center;
-
   display: grid;
   grid-template-rows: 1fr auto;
   height: inherit;
@@ -34,7 +34,7 @@ body {
 
 button {
   font-size: inherit;
-  padding: .5rem 1.2rem .5rem 1.2rem;
+  padding: .5rem 1.2rem;
 }
 
 button.primary {
@@ -45,6 +45,7 @@ button.primary {
   @media (--motion-ok) {
     animation: slide-in-fwd-center 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
   }
+
   text-align: center;
 }
 
@@ -96,11 +97,12 @@ button.primary {
  */
 @keyframes slide-in-bottom {
   0% {
-    transform: translateY(1000px);
     opacity: 0;
+    transform: translateY(1000px);
   }
+
   100% {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }

src/styles/dark.css

@@ -3,5 +3,6 @@
   --color-primary: #fff;
   --color-secondary: #1C1C27;
   --text-2: #607080;
+
   color-scheme: dark;
 }

src/styles/light.css

@@ -3,5 +3,6 @@
   --color-primary: #2E2E33;
   --color-secondary: #fff;
   --text-2: #435660;
+
   color-scheme: light;
 }