Breaking: Switch to modules for PostCSS and TailwindCSS

Installer/Distribution/Defaults/.postcssrc.mjs

@@ -0,0 +1,28 @@
+export default function (ctx) {
+    return {
+        plugins: {
+            "postcss-import": {
+                resolve: ctx.resolve,
+            },
+            "tailwindcss/nesting": true,
+            tailwindcss: ctx.tailwindcss,
+            "postcss-assets": {
+                cachebuster: false,
+                basePath: `${ctx.basePath}/`,
+                baseUrl: "/_Resources/Static/Packages",
+                loadPaths: ["**/Resources/Public/**/*"],
+            },
+            "postcss-clip-path-polyfill": true,
+            "postcss-sort-media-queries": true,
+            autoprefixer: true,
+            cssnano: ctx.minify
+                ? {
+                      preset: ["default", { discardComments: { removeAll: true }, svgo: false }],
+                  }
+                : false,
+            "postcss-reporter": {
+                clearReportedMessages: true,
+            },
+        },
+    };
+}

Installer/Distribution/Defaults/tailwind.config.js → Installer/Distribution/Defaults/tailwind.config.mjs

@@ -1,7 +1,7 @@
-const content = require("./Build/Carbon.Pipeline/purge");
+import content from "./Build/Carbon.Pipeline/content";
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
     content,
     theme: {
         extend: {},

defaults.yaml

@@ -63,7 +63,7 @@ sassOptions: null
 # Pass options to the postcss config file
 postcssOptions:
   tailwindcss:
-    config: './tailwind.config.js'
+    config: './tailwind.config.mjs'
   additionalPackagePathPrefixes: []
 
 esbuild: