fix: PostCSS processing order issue for widget (#463)

* fix: PostCSS processing issue for widget

* fix: regenerate widget version 2.36.0

package.json

@@ -104,6 +104,7 @@
     "next-router-mock": "^0.9.13",
     "patch-package": "^8.0.0",
     "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^10.1.1",
     "postinstall-postinstall": "^2.1.0",

scripts/build-widget.sh

@@ -10,4 +10,21 @@ for orgId in atb nfk fram troms vkt farte; do
   echo "Building widget for $orgId"
   NEXT_PUBLIC_PLANNER_ORG_ID=$orgId yarn build:widget
   NEXT_PUBLIC_PLANNER_ORG_ID=$orgId node ./scripts/generate-widget-stat.js
-done
+done
+
+# Workaround for PostCSS processing issue
+# Issue: PostCSS does not allow control over plugin execution order, meaning the "composes" 
+# CSS is not processed before other plugins. As a result, parts of the CSS remain unprocessed.
+#
+# Workaround: Run PostCSS twice to ensure CSS imported using "composes" also is processed properly.
+
+BASE_DIR="public/widget"
+VERSION=$(node -p "require('./package.json').version")
+
+for FOLDER in "$BASE_DIR"/*/; do
+  FOLDER_NAME=$(basename "$FOLDER")
+  FILE_NAME="$BASE_DIR/$FOLDER_NAME/$VERSION/planner-web.css"
+  npx postcss "$FILE_NAME" -o "$FILE_NAME"
+done
+
+echo "Post processing completed"

src/widget/widget.module.css

@@ -1,3 +1,4 @@
+@import '@atb/theme/theme.css';
 @value assistant: "../page-modules/assistant/assistant.module.css";
 @value departures: "../page-modules/departures/departures.module.css";
 @value search: "../components/search/search.module.css";