Maintenance: Add plugin for multiple Tailwind configs.

Co-authored-by: Dominik Klein <dk@zammad.com>
Co-authored-by: Dusan Vuckovic <dv@zammad.com>

app/frontend/apps/desktop/pages/error/views/Error.vue

@@ -5,5 +5,5 @@
 </script>
 
 <template>
-  <div>ERROR 404</div>
+  <div>ERROR XYZ</div>
 </template>

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue

@@ -353,13 +353,6 @@ const onContextClick = () => {
 </template>
 
 <style scoped>
-/*
-  NB: Explicitly import the global app stylesheet.
-    This will avoid the build issue with the wrong app-specific Tailwind config being applied.
-    Investigate if this can be also done automatically via Vite or PostCSS config.
-*/
-@import '#mobile/styles/main.css';
-
 .Content {
   word-break: break-word;
 }

app/frontend/build/multipleTailwindConfigPlugin.js

@@ -0,0 +1,18 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+const tailwindcss = require('tailwindcss')
+const { minimatch } = require('minimatch')
+const mobileConfig = require('../apps/mobile/styles/tailwind.mobile.js')
+const desktopConfig = require('../apps/desktop/styles/tailwind.desktop.js')
+
+/** @type {import('postcss').TransformCallback} */
+module.exports = (root, result) => {
+  // Check the current module against content globs in available app-specific Tailwind configs.
+  //   This avoids the build issue with the wrong Tailwind config being applied.
+  if (
+    mobileConfig.content.some((glob) => minimatch(root.source.input.file, glob))
+  )
+    return tailwindcss(mobileConfig).plugins[0](root, result)
+
+  return tailwindcss(desktopConfig).plugins[0](root, result)
+}

package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-vue": "^9.20.1",
     "eslint-plugin-zammad": "file:.eslint-plugin-zammad",
     "jsdom": "^23.2.0",
+    "minimatch": "^9.0.3",
     "mock-apollo-client": "^1.2.1",
     "postcss": "^8.4.33",
     "postcss-html": "^1.6.0",

postcss.config.js

@@ -1,18 +1,16 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 const tailwindcssNesting = require('tailwindcss/nesting')
-const tailwindcss = require('tailwindcss')
 const autoprefixer = require('autoprefixer')
-const mobileConfig = require('./app/frontend/apps/mobile/styles/tailwind.mobile.js')
-const desktopConfig = require('./app/frontend/apps/desktop/styles/tailwind.desktop.js')
+const multipleTailwindConfigPlugin = require('./app/frontend/build/multipleTailwindConfigPlugin.js')
 
+/** @type {import('postcss-load-config').Config} */
 module.exports = {
   plugins: [
     // Vite is pre-configured to support CSS @import inlining via postcss-import.
     //   https://vitejs.dev/guide/features.html#import-inlining-and-rebasing
     tailwindcssNesting,
-    tailwindcss(mobileConfig),
-    tailwindcss(desktopConfig),
+    multipleTailwindConfigPlugin,
     autoprefixer,
   ],
 }