Initial Drupal 11 with DDEV setup

web/core/scripts/css/compile.js

@@ -0,0 +1,83 @@
+const log = require('./log');
+const fs = require('node:fs');
+const postcss = require('postcss');
+const postcssImport = require('postcss-import');
+const postcssHeader = require('postcss-header');
+const postcssUrl = require('postcss-url');
+const postcssPresetEnv = require('postcss-preset-env');
+// cspell:ignore pxtorem
+const postcssPixelsToRem = require('postcss-pxtorem');
+const prettier = require('prettier');
+const removeUnwantedComments = require('./remove-unwanted-comments');
+
+module.exports = (filePath, callback) => {
+  // Transform the file.
+  fs.readFile(filePath, (err, css) => {
+    postcss([
+      postcssImport({
+        plugins: [
+          removeUnwantedComments,
+        ],
+      }),
+      postcssPresetEnv({
+        stage: 1,
+        preserve: false,
+        autoprefixer: {
+          cascade: false,
+          grid: 'no-autoplace',
+        },
+        features: {
+          'blank-pseudo-class': false,
+          'focus-visible-pseudo-class': false,
+          'focus-within-pseudo-class': false,
+          'has-pseudo-class': false,
+          'image-set-function': false,
+          'prefers-color-scheme-query': false,
+          'content-alt-text': false,
+          'nesting-rules': { edition: '2021' },
+        }
+      }),
+      postcssPixelsToRem({
+          propList: [
+            '*',
+            '!background-position',
+            '!border',
+            '!border-width',
+            '!box-shadow',
+            '!border-top*',
+            '!border-right*',
+            '!border-bottom*',
+            '!border-left*',
+            '!border-start*',
+            '!border-end*',
+            '!outline*',
+          ],
+          mediaQuery: true,
+          minPixelValue: 3,
+          // Prevent converting PX to REM for icon styles. These files have been
+          // added to use the `postcssUrl` plugin, but aren't compatible with
+          // `postcssPixelsToRem`.
+          exclude: (filePath) => filePath.match(/core\/modules.*\.icons\..*\.pcss\.css$/)
+
+      }),
+      postcssHeader({
+        header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/3084859\n * @preserve\n */\n`,
+      }),
+      postcssUrl({
+        filter: '**/*.svg',
+        url: 'inline',
+        optimizeSvgEncode: true,
+      })
+    ])
+    .process(css, { from: filePath })
+    .then(async result => {
+      const config = await prettier.resolveConfig(filePath);
+      return await prettier.format(result.css, config);
+    })
+    .then(callback)
+    .catch(error => {
+      log(error);
+      process.exitCode = 1;
+    });
+  });
+};