@abgov/nx-adsp 13.15.0 → 13.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.15.0",
+  "version": "13.15.2",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/react-app/files/src/main.tsx__tmpl__

@@ -1,3 +1,8 @@
+// Design tokens must load before web-components' own CSS — every goa-*
+// element styles itself through --goa-* custom properties (spacing,
+// color, type) defined here; without them, headers/banners/buttons render
+// with no spacing at all rather than looking unbranded but boxy.
+import '@abgov/design-tokens/dist/tokens.css';
 import '@abgov/web-components';
 import '@abgov/web-components/index.css';
 import { StrictMode } from 'react';

package/src/generators/react-app/react-app.spec.ts

@@ -36,6 +36,19 @@ describe('React App Generator', () => {
     expect(host.exists('apps/test/nginx.conf')).toBeTruthy();
   }, 30000);
 
+  it('loads design tokens before web-components CSS, so goa-* elements are actually styled', async () => {
+    // @abgov/web-components' own CSS only defines rules in terms of --goa-*
+    // custom properties — without the tokens stylesheet also loaded, every
+    // goa-* element (header, banner, buttons) renders with no spacing at
+    // all, not just unbranded. Regression guard for exactly that gap.
+    const host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    await generator(host, options);
+
+    const mainTsx = host.read('apps/test/src/main.tsx').toString();
+    expect(mainTsx).toContain("import '@abgov/design-tokens/dist/tokens.css';");
+    expect(mainTsx).toContain("import '@abgov/web-components/index.css';");
+  }, 30000);
+
   it("runs nx-adsp's own workspace-root setup (ADSP SDK MCP server + VS Code settings)", async () => {
     const host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
     await generator(host, options);

package/src/generators/vue-app/files/src/main.ts__tmpl__

@@ -1,3 +1,8 @@
+// Design tokens must load before web-components' own CSS — every goa-*
+// element styles itself through --goa-* custom properties (spacing,
+// color, type) defined here; without them, headers/banners/buttons render
+// with no spacing at all rather than looking unbranded but boxy.
+import '@abgov/design-tokens/dist/tokens.css';
 import '@abgov/web-components';
 import '@abgov/web-components/index.css';
 import { createApp } from 'vue';

package/src/generators/vue-app/vue-app.spec.ts

@@ -63,6 +63,18 @@ describe('Vue App Generator', () => {
     expect(host.exists('.vscode/settings.json')).toBeTruthy();
   }, 30000);
 
+  it('loads design tokens before web-components CSS, so goa-* elements are actually styled', async () => {
+    // @abgov/web-components' own CSS only defines rules in terms of --goa-*
+    // custom properties — without the tokens stylesheet also loaded, every
+    // goa-* element (header, banner, buttons) renders with no spacing at
+    // all, not just unbranded. Regression guard for exactly that gap.
+    await generator(host, options);
+
+    const mainTs = host.read('apps/test/src/main.ts').toString();
+    expect(mainTs).toContain("import '@abgov/design-tokens/dist/tokens.css';");
+    expect(mainTs).toContain("import '@abgov/web-components/index.css';");
+  }, 30000);
+
   it('records the resolved env/tenant as project tags for the sandbox generator', async () => {
     await generator(host, options);
     const config = readProjectConfiguration(host, 'test');