feat(ui): drop autoprefixer on build -> no longer necessary

Author: rstoenescu

ui/build/build.utils.js

@@ -31,11 +31,6 @@ function getBuildTargets() {
         `${target.name}${target.major}${target.minor ? `.${target.minor}` : ''}`
     ),
 
-    AUTOPREFIXER: targets.map(
-      target =>
-        `${target.name} >= ${target.major}${target.minor ? `.${target.minor}` : ''}`
-    ),
-
     LIGHTNING_CSS: targets.reduce((acc, target) => {
       acc[target.name] =
         (target.major << 16) + (target.minor ? target.minor << 8 : 0)

ui/build/script.build.css.js

@@ -1,7 +1,6 @@
 import { compileAsync } from 'sass-embedded'
 import rtl from 'postcss-rtlcss'
 import postcss from 'postcss'
-import autoprefixer from 'autoprefixer'
 import { transform } from 'lightningcss'
 
 import {
@@ -13,6 +12,7 @@ import {
 } from './build.utils.js'
 import prepareDiff from './prepare-diff.js'
 
+const postCssRtl = postcss([rtl({})])
 const sassUseRE = /@use\s+['"][^'"]+['"]/g
 
 function moveUseStatementsToTop(code) {
@@ -73,28 +73,14 @@ function generateUMD(code, middleName, ext = '') {
 }
 
 function renderAsset(cssCode, middleName = '') {
-  return postcss([
-    autoprefixer({
-      overrideBrowserslist: BUILD_TARGETS.AUTOPREFIXER
-    })
+  return Promise.all([
+    generateUMD(cssCode, middleName),
+    postCssRtl
+      .process(cssCode, { from: void 0 })
+      .then(transformedCode =>
+        generateUMD(transformedCode.css, middleName, '.rtl')
+      )
   ])
-    .process(cssCode, { from: void 0 })
-    .then(code => {
-      code.warnings().forEach(warn => {
-        console.warn(warn.toString())
-      })
-      return code.css
-    })
-    .then(code =>
-      Promise.all([
-        generateUMD(code, middleName),
-        postcss([rtl({})])
-          .process(code, { from: void 0 })
-          .then(transformedCode =>
-            generateUMD(transformedCode.css, middleName, '.rtl')
-          )
-      ])
-    )
 }
 
 async function generateBase(source) {

ui/package.json

@@ -77,7 +77,6 @@
   },
   "devDependencies": {
     "@quasar/extras": "workspace:*",
-    "autoprefixer": "^10.4.27",
     "cli-highlight": "^2.1.11",
     "cross-env": "^10.1.0",
     "diff": "^8.0.3",

ui/playground/package.json

@@ -19,7 +19,6 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "workspace:*",
-    "autoprefixer": "^10.4.27",
     "postcss": "^8.5.8"
   },
   "engines": {

ui/playground/postcss.config.js

@@ -1,24 +1,9 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 
-import autoprefixer from 'autoprefixer'
 // import rtlcss from 'postcss-rtlcss'
 
 export default {
   plugins: [
-    // https://github.com/postcss/autoprefixer
-    autoprefixer({
-      overrideBrowserslist: [
-        'last 4 Chrome versions',
-        'last 4 Firefox versions',
-        'last 4 Edge versions',
-        'last 4 Safari versions',
-        'last 4 Android versions',
-        'last 4 ChromeAndroid versions',
-        'last 4 FirefoxAndroid versions',
-        'last 4 iOS versions'
-      ]
-    })
-
     // https://github.com/elchininet/postcss-rtlcss
     // If you want to support RTL css, then
     // 1. yarn/pnpm/bun/npm install postcss-rtlcss

ui/src/components/field/QField.sass

@@ -401,14 +401,13 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
         opacity: 0
 
       .q-field__native, .q-field__input
-        &::-webkit-input-placeholder
-          color: transparent
-        &::-moz-placeholder
-          color: transparent
+
         &:-ms-input-placeholder
           color: transparent !important
-        &::-ms-input-placeholder
-          color: transparent
+
+        &::-webkit-input-placeholder,
+        &::-moz-placeholder,
+        &::-ms-input-placeholder,
         &::placeholder
           color: transparent
 

ui/src/css/core/helpers.sass

@@ -13,18 +13,13 @@
   background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .04)) !important
 
 .q-placeholder
-  &::-webkit-input-placeholder
-    color: inherit
-    opacity: .7
-  &::-moz-placeholder
-    color: inherit
-    opacity: .7
   &:-ms-input-placeholder
     color: inherit !important
     opacity: .7 !important
-  &::-ms-input-placeholder
-    color: inherit
-    opacity: .7
+
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder,
+  &::-ms-input-placeholder,
   &::placeholder
     color: inherit
     opacity: .7