PostCSS: Use postcss-preset-env to polyfill newer CSS syntax to older browser targets (#8567)

see https://github.com/csstools/postcss-plugins/tree/1ac4688fdcc27fa894cb87b0074df6d873635cba/plugin-packs/postcss-preset-env

This ensures that we are using the right vendor prefixes where necessary (e.g. `-webkit-text-decoration` in addition to `text-decoration`).

Author: Turbo87

ember-cli-build.js

@@ -6,6 +6,8 @@ module.exports = function (defaults) {
   let env = EmberApp.env();
   let isProd = env === 'production';
 
+  let browsers = require('./config/targets').browsers;
+
   let app = new EmberApp(defaults, {
     '@embroider/macros': {
       setConfig: {
@@ -44,6 +46,7 @@ module.exports = function (defaults) {
       extension: 'module.css',
       plugins: {
         before: [require('postcss-nested')],
+        postprocess: [require('postcss-preset-env')({ browsers, preserve: false })],
       },
     },
     fingerprint: {

package.json

@@ -129,6 +129,7 @@
     "normalize.css": "8.0.1",
     "nyc": "15.1.0",
     "postcss-nested": "6.0.1",
+    "postcss-preset-env": "9.5.9",
     "prettier": "3.2.5",
     "qunit": "2.20.1",
     "qunit-console-grouper": "0.3.0",