dev: Configure the CSS autoprefixer NPM package

Probesys · Aug 31, 2023 · 9502721 · 9502721
1 parent b980a78
commit 9502721
Show file tree

Hide file tree

Showing 6 changed files with 231 additions and 21 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -9,8 +9,6 @@
     "rules": {
         "stylistic/indentation": 4,
 
-        "at-rule-no-vendor-prefix": null,
-
         "declaration-empty-line-before": [
             "always",
             {
@@ -34,8 +32,6 @@
 
         "selector-class-pattern": null,
 
-        "property-no-vendor-prefix": null,
-
         "order/properties-order": [
             {
                 "groupName": "heading",

diff --git a/.vite/vite.config.js b/.vite/vite.config.js
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import autoprefixer from 'autoprefixer';
 import emptyAssetsDirPlugin from './empty-assets-dir-plugin.js';
 
 const path = require('path');
@@ -41,5 +42,11 @@ export default defineConfig(({ mode }) => {
         },
 
         build: buildConfig,
+
+        css: {
+            postcss: {
+                plugins: [autoprefixer],
+            },
+        },
     };
 });
diff --git a/assets/stylesheets/components/forms.css b/assets/stylesheets/components/forms.css
@@ -187,8 +187,6 @@ select:not([multiple]) {
     background-position: right 0.75rem top 58%;
     background-size: 2rem;
 
-    -moz-appearance: none;
-    -webkit-appearance: none;
     appearance: none;
 }
 

diff --git a/assets/stylesheets/components/spinners.css b/assets/stylesheets/components/spinners.css
@@ -10,32 +10,17 @@
     background-color: var(--color-primary9);
     border-radius: 100%;
 
-    -webkit-animation: sk-scaleout 1s infinite ease-in-out;
     animation: sk-scaleout 1s infinite ease-in-out;
 }
 
-@-webkit-keyframes sk-scaleout {
-    0% {
-        -webkit-transform: scale(0);
-    }
-
-    100% {
-        opacity: 0;
-
-        -webkit-transform: scale(1);
-    }
-}
-
 @keyframes sk-scaleout {
     0% {
-        -webkit-transform: scale(0);
         transform: scale(0);
     }
 
     100% {
         opacity: 0;
 
-        -webkit-transform: scale(1);
         transform: scale(1);
     }
 }