fix: bundle CSS is not injected properly

CHANGELOG.md

@@ -147,7 +147,7 @@ Breaking changes in this release:
 - New debug API, by [@compulim](https://github.com/compulim) in PR [#5663](https://github.com/microsoft/BotFramework-WebChat/pull/5663) and PR [#5664](https://github.com/microsoft/BotFramework-WebChat/pull/5664), see [`DEBUGGING.md`](docs/DEBUGGING.md) for more
    - Debug into element: open <kbd>F12</kbd>, select the subject in Element pane, type `$0.webChat.debugger`
    - Breakpoint: open <kbd>F12</kbd>, select the subject in Element pane, type `$0.webChat.breakpoint.incomingActivity`
-- The `botframework-webchat` package now uses CSS modules for styling purposes, in PR [#5666](https://github.com/microsoft/BotFramework-WebChat/pull/5666), by [@OEvgeny](https://github.com/OEvgeny)
+- The `botframework-webchat` package now uses CSS modules for styling purposes, in PR [#5666](https://github.com/microsoft/BotFramework-WebChat/pull/5666), in PR [#5677](https://github.com/microsoft/BotFramework-WebChat/pull/5677) by [@OEvgeny](https://github.com/OEvgeny)
 - 👷🏻 Added `npm run build-browser` script for building test harness package only, in PR [#5667](https://github.com/microsoft/BotFramework-WebChat/pull/5667), by [@compulim](https://github.com/compulim)
 
 ### Changed

packages/api/package.json

@@ -78,7 +78,7 @@
     "build": "npm run --if-present build:pre && npm run build:run && npm run --if-present build:post",
     "build:post": "npm run build:post:dtsroll && npm run build:post:validate:dts",
     "build:post:dtsroll": "dtsroll ./dist/*.d.*",
-    "build:post:validate:dts": "if grep -q -P '@msinternal\\/' dist/*.d.* 2>/dev/null; then echo \"Error: dist/*.d.* is not compiled by dtsroll\" >&2; exit 1; fi",
+    "build:post:validate:dts": "vg ast-check dist-types ./dist/*.d.*",
     "build:pre": "npm run build:pre:local-dependencies && npm run build:pre:watch && npm run build:pre:globalize",
     "build:pre:globalize": "node scripts/createPrecompiledGlobalize.mjs",
     "build:pre:local-dependencies": "../../scripts/npm/build-local-dependencies.sh",

packages/bundle/package.json

@@ -100,9 +100,12 @@
   },
   "scripts": {
     "build": "npm run --if-present build:pre && npm run build:run && npm run --if-present build:post",
-    "build:post": "npm run build:post:dtsroll && npm run build:post:validate:dts",
+    "build:post": "npm run build:post:dtsroll && npm run build:post:validate",
     "build:post:dtsroll": "dtsroll ./dist/*.d.*",
-    "build:post:validate:dts": "if grep -q -P '@msinternal\\/' dist/*.d.* 2>/dev/null; then echo \"Error: dist/*.d.* is not compiled by dtsroll\" >&2; exit 1; fi",
+    "build:post:validate": "npm run build:post:validate:css && npm run build:post:validate:inject-css && npm run build:post:validate:dts",
+    "build:post:validate:css": "vg ast-check lightning-css ./dist/*.css",
+    "build:post:validate:inject-css": "vg ast-check css-inject dist/*.js dist/*.mjs static/*.js",
+    "build:post:validate:dts": "vg ast-check dist-types ./dist/*.d.*",
     "build:pre": "npm run build:pre:local-dependencies && npm run build:pre:watch",
     "build:pre:local-dependencies": "../../scripts/npm/build-local-dependencies.sh",
     "build:pre:watch": "../../scripts/npm/build-watch.sh",

packages/bundle/tsup.config.ts

@@ -66,7 +66,10 @@ export default defineConfig([
     },
     esbuildPlugins: [
       ...(commonConfig.esbuildPlugins ?? []),
-      injectCSSPlugin({ stylesPlaceholder: bundleStyleContentPlaceholder }),
+      injectCSSPlugin({
+        stylesPlaceholder: bundleStyleContentPlaceholder,
+        getCSSText: (_source, cssFiles) => cssFiles.find(({ path }) => path.endsWith('botframework-webchat.css'))?.text
+      }),
       resolveReact
     ],
     format: 'iife',

packages/core/package.json

@@ -80,7 +80,7 @@
     "build": "npm run --if-present build:pre && npm run build:run && npm run --if-present build:post",
     "build:post": "npm run build:post:dtsroll && npm run build:post:validate:dts",
     "build:post:dtsroll": "dtsroll ./dist/*.d.*",
-    "build:post:validate:dts": "if grep -q -P '@msinternal\\/' dist/*.d.* 2>/dev/null; then echo \"Error: dist/*.d.* is not compiled by dtsroll\" >&2; exit 1; fi",
+    "build:post:validate:dts": "vg ast-check dist-types ./dist/*.d.*",
     "build:pre": "npm run build:pre:local-dependencies && npm run build:pre:watch",
     "build:pre:local-dependencies": "../../scripts/npm/build-local-dependencies.sh",
     "build:pre:watch": "../../scripts/npm/build-watch.sh",

packages/fluent-theme/package.json

@@ -43,8 +43,9 @@
     "build": "npm run --if-present build:pre && npm run build:run && npm run --if-present build:post",
     "build:post": "npm run build:post:dtsroll && npm run build:post:validate",
     "build:post:dtsroll": "dtsroll ./dist/*.d.*",
-    "build:post:validate": "npm run build:post:validate:css && npm run build:post:validate:dts",
+    "build:post:validate": "npm run build:post:validate:css && npm run build:post:validate:inject-css && npm run build:post:validate:dts",
     "build:post:validate:css": "vg ast-check lightning-css ./dist/*.css",
+    "build:post:validate:inject-css": "vg ast-check css-inject dist/*.js dist/*.mjs static/*.js",
     "build:post:validate:dts": "vg ast-check dist-types ./dist/*.d.*",
     "build:pre": "npm run build:pre:local-dependencies && npm run build:pre:watch",
     "build:pre:local-dependencies": "../../scripts/npm/build-local-dependencies.sh",

packages/vibe-grep/src/rules/css-inject.yaml

@@ -0,0 +1,14 @@
+---
+
+# This rule checks that CSS is injected properly by verifying there are no placeholders
+
+id: css-inject-placeholder
+language: JavaScript
+rule:
+  kind: string
+  regex: "\\@\\-\\-[A-Z\\-]+\\-\\-\\@"
+
+description: "Ensure CSS placeholders are replaced during bundling"
+message: "Found CSS placeholder. Ensure CSS is properly injected during bundling."
+severity: error
+args: [dist/*.js dist/*.mjs static/*.js]