ember.nvp 1.1.0 → 1.2.0

package/.release-plan.json

@@ -2,21 +2,13 @@
   "solution": {
     "ember.nvp": {
       "impact": "minor",
-      "oldVersion": "1.0.0",
-      "newVersion": "1.1.0",
+      "oldVersion": "1.1.0",
+      "newVersion": "1.2.0",
       "tagName": "latest",
       "constraints": [
         {
           "impact": "minor",
           "reason": "Appears in changelog section :rocket: Enhancement"
-        },
-        {
-          "impact": "patch",
-          "reason": "Appears in changelog section :memo: Documentation"
-        },
-        {
-          "impact": "patch",
-          "reason": "Appears in changelog section :house: Internal"
         }
       ],
       "pkgJSONPath": "./package.json"
@@ -26,8 +18,8 @@
     },
     "@nullvoxpopuli/ember-rolldown": {
       "impact": "minor",
-      "oldVersion": "2.0.0",
-      "newVersion": "2.1.0",
+      "oldVersion": "2.1.0",
+      "newVersion": "2.2.0",
       "tagName": "latest",
       "constraints": [
         {
@@ -36,11 +28,7 @@
         },
         {
           "impact": "patch",
-          "reason": "Appears in changelog section :memo: Documentation"
-        },
-        {
-          "impact": "patch",
-          "reason": "Appears in changelog section :house: Internal"
+          "reason": "Appears in changelog section :bug: Bug Fix"
         }
       ],
       "pkgJSONPath": "./packages/rolldown/package.json"
@@ -49,5 +37,5 @@
       "oldVersion": "1.1.0"
     }
   },
-  "description": "## Release (2026-07-22)\n\n* ember.nvp 1.1.0 (minor)\n* @nullvoxpopuli/ember-rolldown 2.1.0 (minor)\n\n#### :rocket: Enhancement\n* `@nullvoxpopuli/ember-rolldown`\n  * [#97](https://github.com/NullVoxPopuli/ember.nvp/pull/97) Add appReexports plugin as a separate ember-rolldown entrypoint ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))\n  * [#95](https://github.com/NullVoxPopuli/ember.nvp/pull/95) enable declaration maps in the rolldown plugin ([@NullVoxPopuli](https://github.com/NullVoxPopuli))\n* `ember.nvp`\n  * [#91](https://github.com/NullVoxPopuli/ember.nvp/pull/91) Add a browser extension project type (minimal-extension base) ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))\n\n#### :memo: Documentation\n* `@nullvoxpopuli/ember-rolldown`, `ember.nvp`\n  * [#96](https://github.com/NullVoxPopuli/ember.nvp/pull/96) rolldown: document + test co-located CSS support ([@NullVoxPopuli](https://github.com/NullVoxPopuli))\n\n#### :house: Internal\n* `@nullvoxpopuli/ember-rolldown`, `ember.nvp`\n  * [#93](https://github.com/NullVoxPopuli/ember.nvp/pull/93) More tests ([@NullVoxPopuli](https://github.com/NullVoxPopuli))\n* `ember.nvp`\n  * [#92](https://github.com/NullVoxPopuli/ember.nvp/pull/92) Move check layers into their own permutation matrix ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))\n  * [#90](https://github.com/NullVoxPopuli/ember.nvp/pull/90) Remove pinYukuParser test helper ([@Copilot](https://github.com/apps/copilot-swe-agent))\n  * [#89](https://github.com/NullVoxPopuli/ember.nvp/pull/89) refactor(test): extract shared listFiles/read helpers to #test-helpers ([@Copilot](https://github.com/apps/copilot-swe-agent))\n  * [#87](https://github.com/NullVoxPopuli/ember.nvp/pull/87) Convert Greeting declaration check to inline snapshot assertion ([@Copilot](https://github.com/apps/copilot-swe-agent))\n\n#### Committers: 3\n- @NullVoxPopuli's reduced-access machine account for AI usage ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))\n- Copilot [Bot] ([@copilot-swe-agent](https://github.com/apps/copilot-swe-agent))\n- [@NullVoxPopuli](https://github.com/NullVoxPopuli)\n"
+  "description": "## Release (2026-07-22)\n\n* ember.nvp 1.2.0 (minor)\n* @nullvoxpopuli/ember-rolldown 2.2.0 (minor)\n\n#### :rocket: Enhancement\n* `@nullvoxpopuli/ember-rolldown`, `ember.nvp`\n  * [#98](https://github.com/NullVoxPopuli/ember.nvp/pull/98) Integration-test ember-scoped-css; add babel.templateTransforms ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))\n\n#### :bug: Bug Fix\n* `@nullvoxpopuli/ember-rolldown`\n  * [#99](https://github.com/NullVoxPopuli/ember.nvp/pull/99) rolldown: fix virtual .gts declaration resolution + specifier-rewrite sourcemaps ([@NullVoxPopuli](https://github.com/NullVoxPopuli))\n\n#### Committers: 2\n- @NullVoxPopuli's reduced-access machine account for AI usage ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))\n- [@NullVoxPopuli](https://github.com/NullVoxPopuli)\n"
 }

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## Release (2026-07-22)
 
+* ember.nvp 1.2.0 (minor)
+* @nullvoxpopuli/ember-rolldown 2.2.0 (minor)
+
+#### :rocket: Enhancement
+* `@nullvoxpopuli/ember-rolldown`, `ember.nvp`
+  * [#98](https://github.com/NullVoxPopuli/ember.nvp/pull/98) Integration-test ember-scoped-css; add babel.templateTransforms ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))
+
+#### :bug: Bug Fix
+* `@nullvoxpopuli/ember-rolldown`
+  * [#99](https://github.com/NullVoxPopuli/ember.nvp/pull/99) rolldown: fix virtual .gts declaration resolution + specifier-rewrite sourcemaps ([@NullVoxPopuli](https://github.com/NullVoxPopuli))
+
+#### Committers: 2
+- @NullVoxPopuli's reduced-access machine account for AI usage ([@NullVoxPopuli-ai-agent](https://github.com/NullVoxPopuli-ai-agent))
+- [@NullVoxPopuli](https://github.com/NullVoxPopuli)
+
+## Release (2026-07-22)
+
 * ember.nvp 1.1.0 (minor)
 * @nullvoxpopuli/ember-rolldown 2.1.0 (minor)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember.nvp",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "ember project generator, alternative to the official blueprints, but more modern -- hopefully one day to upstream back in to ember-cli / official blueprints",
   "repository": {
     "type": "git",

package/packages/rolldown/README.md

@@ -99,9 +99,42 @@ because the importing component module never loads, any declaration that
 references that component dangles, surfacing as misleading
 `UNLOADABLE_DEPENDENCY` errors on `<component>.d.ts` files.
 
-Scoping/transforming the CSS itself (e.g.
-[ember-scoped-css](https://github.com/soxhub/ember-scoped-css)) is separate
-from bundling and runs via its own plugins.
+### ember-scoped-css
+
+[ember-scoped-css](https://github.com/auditboard/ember-scoped-css) works with
+this pipeline: its template transform rides along via `ember()`'s
+`babel.templateTransforms` option, and its unplugin (`ember-scoped-css/rollup`)
+resolves the scoped CSS requests the transform injects:
+
+```js
+import { defineConfig } from "tsdown";
+import { ember } from "@nullvoxpopuli/ember-rolldown";
+import { scopedCSS } from "ember-scoped-css/rollup";
+import { scopedCSS as scopedCssBabel } from "ember-scoped-css/babel";
+
+export default defineConfig({
+  entry: ["./src/index.ts"],
+  css: { inject: true },
+  plugins: [
+    ember({
+      babel: {
+        plugins: [scopedCssBabel()],
+        templateTransforms: [scopedCssBabel.template({})],
+      },
+    }),
+    scopedCSS(),
+  ],
+});
+```
+
+This scopes co-located `.css` files, inline `<style scoped>` blocks, and the
+`scopedClass` pseudo-helper (that last one is what the `babel.plugins` entry
+handles — leave it off if you don't use `scopedClass` in module code).
+
+`css.inject` matters for libraries: it keeps the `import "./style.css"`
+statement in `dist/index.js`, so consuming apps pull the styles in through
+the module graph — without it the bundled CSS is emitted but nothing loads
+it.
 
 ## What `ember()` does
 
@@ -128,12 +161,17 @@ ember({
     configFile: "./babel.config.js",
     babelHelpers: "bundled",
     plugins: [],
+    templateTransforms: [],
     filter: { include: { imports: ["ember-concurrency"], code: [] } },
   },
 });
 ```
 
-Each option is documented on `BabelOptions`.
+Each option is documented on `BabelOptions`. `templateTransforms` feeds
+template AST transforms to the default template-compilation step; it can't be
+combined with a babel config file — a config lists
+`babel-plugin-ember-template-compilation` itself, so its transforms belong
+there.
 
 ## App re-exports
 

package/packages/rolldown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nullvoxpopuli/ember-rolldown",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Meta plugin for building ember v2 libraries/addons with rolldown & tsdown.",
   "type": "module",
   "main": "index.ts",

package/packages/rolldown/src/babel.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+
+import { emberBabel } from "./babel.ts";
+
+describe("emberBabel", () => {
+  it("rejects templateTransforms combined with a config file", () => {
+    expect(() =>
+      emberBabel({ configFile: "./babel.config.js", templateTransforms: ["some-transform"] }),
+    ).toThrow(/pass the transforms/);
+  });
+
+  it("allows templateTransforms when config files are opted out", () => {
+    expect(() =>
+      emberBabel({ configFile: false, templateTransforms: ["some-transform"] }),
+    ).not.toThrow();
+  });
+});

package/packages/rolldown/src/babel.ts

@@ -4,6 +4,7 @@ import templateCompilation from "babel-plugin-ember-template-compilation";
 import decoratorTransforms from "decorator-transforms";
 import { loadPartialConfigSync } from "@babel/core";
 import type { PluginItem } from "@babel/core";
+import type { Transform } from "babel-plugin-ember-template-compilation";
 import type { Plugin } from "rolldown";
 
 export interface BabelOptions {
@@ -24,6 +25,15 @@ export interface BabelOptions {
    * Extra babel plugins to run, appended after the config's plugins.
    */
   plugins?: PluginItem[];
+  /**
+   * Template AST transforms (e.g. ember-scoped-css's `scopedCSS.template()`)
+   * passed to the default `babel-plugin-ember-template-compilation` entry.
+   *
+   * Only valid without a babel config file: with your own config, you list
+   * `babel-plugin-ember-template-compilation` yourself, so its `transforms`
+   * belong there.
+   */
+  templateTransforms?: Transform[];
   /**
    * Opt additional files into babel (see maybeBabel's `filter`). Use this to
    * cover addons that ship code needing babel (e.g. `ember-concurrency`).
@@ -63,7 +73,7 @@ function detectConfigFile(): string | undefined {
  *   consuming app resolves it (the library keeps `decorator-transforms` as
  *   a real dependency).
  */
-function defaultPlugins(): PluginItem[] {
+function defaultPlugins(templateTransforms?: Transform[]): PluginItem[] {
   return [
     [
       transformTypeScript,
@@ -73,7 +83,7 @@ function defaultPlugins(): PluginItem[] {
         allowDeclareFields: true,
       },
     ],
-    [templateCompilation, { targetFormat: "hbs" }],
+    [templateCompilation, { targetFormat: "hbs", transforms: templateTransforms ?? [] }],
     [
       decoratorTransforms,
       {
@@ -118,6 +128,14 @@ export function emberBabel(options: BabelOptions = {}): Plugin {
   };
 
   if (configFile) {
+    if (options.templateTransforms?.length) {
+      throw new Error(
+        `\`babel.templateTransforms\` cannot be combined with a babel config file (found ${configFile}). ` +
+          `Your config lists babel-plugin-ember-template-compilation itself, so pass the transforms ` +
+          `to its \`transforms\` option there instead.`,
+      );
+    }
+
     return maybeBabel({
       ...shared,
       configFile,
@@ -131,6 +149,6 @@ export function emberBabel(options: BabelOptions = {}): Plugin {
     // for one -- we provide the whole plugin list inline.
     configFile: false,
     babelrc: false,
-    plugins: defaultPlugins().concat(options.plugins ?? []),
+    plugins: defaultPlugins(options.templateTransforms).concat(options.plugins ?? []),
   }) as unknown as Plugin;
 }

package/packages/rolldown/src/dts.test.ts

@@ -6,13 +6,30 @@ import { afterEach, describe, expect, it } from "vitest";
 
 import { ember } from "../index.ts";
 
+interface Dist {
+  /** Sorted dist-relative paths of every emitted file. */
+  files: string[];
+  /** dist-relative path -> content, for every emitted .d.ts and .css file. */
+  contents: Record<string, string>;
+}
+
+let restoreCwd: (() => void) | undefined;
+
+afterEach(() => {
+  restoreCwd?.();
+  restoreCwd = undefined;
+});
+
 /**
  * Drives `ember()` through a real tsdown build (the dts pipeline included).
  * `files` is a map of relative path -> source, written into a temp dir that
  * becomes the cwd for the build (the externals and isolated-declarations
  * plugins read package.json / tsconfig.json from cwd, like the tsdown CLI).
+ *
+ * Returns the emitted file list plus the full contents of every declaration
+ * and css file (js output is covered by transform.test.ts).
  */
-async function buildFixture(files: Record<string, string>, entry: string[]): Promise<string> {
+async function buildFixture(files: Record<string, string>, entry: string[]): Promise<Dist> {
   const dir = await mkdtemp(path.join(tmpdir(), "ember-rolldown-dts-"));
 
   const withDefaults: Record<string, string> = {
@@ -45,33 +62,40 @@ async function buildFixture(files: Record<string, string>, entry: string[]): Pro
     plugins: [ember()],
   });
 
-  return dir;
-}
+  const distDir = path.join(dir, "dist");
+  const dist: Dist = { files: [], contents: {} };
 
-let restoreCwd: (() => void) | undefined;
+  for (const entry of await readdir(distDir, { withFileTypes: true, recursive: true })) {
+    if (!entry.isFile()) continue;
 
-afterEach(() => {
-  restoreCwd?.();
-  restoreCwd = undefined;
-});
+    const relative = path.relative(distDir, path.join(entry.parentPath, entry.name));
+    dist.files.push(relative);
 
-async function listFiles(dir: string): Promise<string[]> {
-  const out: string[] = [];
-  for (const entry of await readdir(dir, { withFileTypes: true, recursive: true })) {
-    if (entry.isFile()) {
-      out.push(path.relative(dir, path.join(entry.parentPath, entry.name)));
+    if (relative.endsWith(".d.ts") || relative.endsWith(".css")) {
+      dist.contents[relative] = await readFile(path.join(distDir, relative), "utf8");
     }
   }
-  return out.sort();
+
+  dist.files.sort();
+
+  return dist;
+}
+
+/** One printable document of every captured file, for a single snapshot. */
+function printed(dist: Dist): string {
+  return Object.entries(dist.contents)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([file, content]) => `//=== ${file}\n${content}`)
+    .join("\n");
 }
 
 describe("declarations (full ember() via tsdown)", () => {
   it("emits .d.ts for an entry that type-imports from a non-entry .gts", async () => {
-    // Mirrors the luna-core shape: the component is in the runtime graph via
+    // Mirrors a design-system shape: the component is in the runtime graph via
     // the index entry, while a second entry (a service) only *type*-imports
     // from it. The service's declaration then references the component's
     // (virtual) .d.ts, which only exists in the bundler's module graph.
-    const dir = await buildFixture(
+    const dist = await buildFixture(
       {
         "src/index.ts": `export { default as Popup } from './popup.gts';`,
         "src/service.ts": [
@@ -103,17 +127,164 @@ describe("declarations (full ember() via tsdown)", () => {
       ["./src/index.ts", "./src/service.ts"],
     );
 
-    const dist = await listFiles(path.join(dir, "dist"));
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.js",
+        "index.js.map",
+        "popup-CjMmUEVb.d.ts",
+        "popup-CjMmUEVb.d.ts.map",
+        "service.d.ts",
+        "service.d.ts.map",
+        "service.js",
+        "service.js.map",
+      ]
+    `);
 
-    expect(dist).toContain("index.d.ts");
-    expect(dist).toContain("service.d.ts");
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== index.d.ts
+      import { t as Popup } from "./popup-CjMmUEVb.js";
+      export { Popup };
+      //=== popup-CjMmUEVb.d.ts
+      import Component from "@glimmer/component";
+      //#region src/popup.d.ts
+      interface PopupBlock {
+        open: () => void;
+      }
+      interface PopupSignature {
+        Element: HTMLDivElement;
+        Blocks: {
+          default: [PopupBlock];
+        };
+      }
+      declare class Popup extends Component<PopupSignature> {}
+      //#endregion
+      export { PopupBlock as n, Popup as t };
+      //# sourceMappingURL=popup-CjMmUEVb.d.ts.map
+      //=== service.d.ts
+      import { n as PopupBlock } from "./popup-CjMmUEVb.js";
+      //#region src/service.d.ts
+      declare class TooltipService {
+        registerPopup(context: PopupBlock): void;
+      }
+      //#endregion
+      export { TooltipService };
+      //# sourceMappingURL=service.d.ts.map"
+    `);
+  });
 
-    const serviceDts = await readFile(path.join(dir, "dist/service.d.ts"), "utf8");
+  it("emits .d.ts when a .gts module is only ever type-imported", async () => {
+    // Nothing value-imports popup.gts, so its virtual module never enters the
+    // runtime graph: the only route to its declaration is the dts resolver
+    // loading it on demand. The declaration pipeline registers modules as
+    // their (virtual) source loads, so the import must resolve to the source
+    // id — a pre-rewritten `.d.ts` id skips that registration and dangles.
+    const dist = await buildFixture(
+      {
+        "src/service.ts": [
+          `import type { PopupBlock } from './components/popup.gts';`,
+          ``,
+          `export class TooltipService {`,
+          `  registerPopup(context: PopupBlock): void {`,
+          `    void context;`,
+          `  }`,
+          `}`,
+        ].join("\n"),
+        "src/components/popup.gts": [
+          `import Component from '@glimmer/component';`,
+          ``,
+          `export interface PopupBlock {`,
+          `  open: () => void;`,
+          `}`,
+          ``,
+          `export default class Popup extends Component {`,
+          `  <template>popup</template>`,
+          `}`,
+        ].join("\n"),
+      },
+      ["./src/service.ts"],
+    );
 
-    // The PopupBlock type must be reachable: either inlined into the bundled
-    // declaration or imported via a specifier that exists in dist.
-    expect(serviceDts).toContain("PopupBlock");
-    expect(serviceDts).not.toContain(".gts");
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "service.d.ts",
+        "service.d.ts.map",
+        "service.js",
+        "service.js.map",
+      ]
+    `);
+
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== service.d.ts
+      import "@glimmer/component";
+      //#region src/components/popup.d.ts
+      interface PopupBlock {
+        open: () => void;
+      }
+      //#endregion
+      //#region src/service.d.ts
+      declare class TooltipService {
+        registerPopup(context: PopupBlock): void;
+      }
+      //#endregion
+      export { TooltipService };
+      //# sourceMappingURL=service.d.ts.map"
+    `);
+  });
+
+  it("emits .d.ts for a .gts that type-imports another (otherwise unimported) .gts", async () => {
+    // A nested component type-imports a sibling from the parent directory;
+    // its declaration then carries a relative source specifier for a module
+    // that exists only in the bundler's graph (never on disk, never in the
+    // runtime graph).
+    const dist = await buildFixture(
+      {
+        "src/index.ts": `export { default as OptionList } from './components/select/option-list.gts';`,
+        "src/components/select/option-list.gts": [
+          `import Component from '@glimmer/component';`,
+          `import type { PopupBlock } from '../popup.gts';`,
+          ``,
+          `export interface OptionListArgs {`,
+          `  registerPopup: (context: PopupBlock) => void;`,
+          `}`,
+          ``,
+          `export default class OptionList extends Component {`,
+          `  <template>options</template>`,
+          `}`,
+        ].join("\n"),
+        "src/components/popup.gts": [
+          `import Component from '@glimmer/component';`,
+          ``,
+          `export interface PopupBlock {`,
+          `  open: () => void;`,
+          `}`,
+          ``,
+          `export default class Popup extends Component {`,
+          `  <template>popup</template>`,
+          `}`,
+        ].join("\n"),
+      },
+      ["./src/index.ts"],
+    );
+
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.d.ts.map",
+        "index.js",
+        "index.js.map",
+      ]
+    `);
+
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== index.d.ts
+      import Component from "@glimmer/component";
+      //#region src/components/select/option-list.d.ts
+      declare class OptionList extends Component {}
+      //#endregion
+      export { OptionList };
+      //# sourceMappingURL=index.d.ts.map"
+    `);
   });
 
   it("bundles co-located CSS (via @tsdown/css) without breaking declarations", async () => {
@@ -121,8 +292,8 @@ describe("declarations (full ember() via tsdown)", () => {
     // handling the build dies on tsdown's css-guard — and because the failing
     // component module never loads, every declaration that references it
     // dangles (surfacing as misleading UNLOADABLE_DEPENDENCY errors on
-    // <component>.d.ts). @tsdown/css (this package's peer) makes both work.
-    const dir = await buildFixture(
+    // <component>.d.ts). @tsdown/css makes both work.
+    const dist = await buildFixture(
       {
         "src/index.ts": `export { default as Popup } from './popup.gts';`,
         "src/service.ts": [
@@ -149,18 +320,47 @@ describe("declarations (full ember() via tsdown)", () => {
       ["./src/index.ts", "./src/service.ts"],
     );
 
-    const dist = await listFiles(path.join(dir, "dist"));
-
-    const cssFiles = dist.filter((file) => file.endsWith(".css"));
-    expect(cssFiles).toHaveLength(1);
-
-    const css = await readFile(path.join(dir, "dist", cssFiles[0]!), "utf8");
-    expect(css).toContain(".popup");
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.js",
+        "index.js.map",
+        "popup-CytznrQX.d.ts",
+        "popup-CytznrQX.d.ts.map",
+        "service.d.ts",
+        "service.d.ts.map",
+        "service.js",
+        "service.js.map",
+        "style.css",
+      ]
+    `);
 
-    // The cascade regression: the css-importing component's declaration must
-    // still be generated and reachable from the service's declaration.
-    const serviceDts = await readFile(path.join(dir, "dist/service.d.ts"), "utf8");
-    expect(serviceDts).toContain("PopupBlock");
-    expect(serviceDts).not.toContain(".gts");
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== index.d.ts
+      import { t as Popup } from "./popup-CytznrQX.js";
+      export { Popup };
+      //=== popup-CytznrQX.d.ts
+      import Component from "@glimmer/component";
+      //#region src/popup.d.ts
+      interface PopupBlock {
+        open: () => void;
+      }
+      declare class Popup extends Component {}
+      //#endregion
+      export { PopupBlock as n, Popup as t };
+      //# sourceMappingURL=popup-CytznrQX.d.ts.map
+      //=== service.d.ts
+      import { n as PopupBlock } from "./popup-CytznrQX.js";
+      //#region src/service.d.ts
+      declare function register(context: PopupBlock): void;
+      //#endregion
+      export { register };
+      //# sourceMappingURL=service.d.ts.map
+      //=== style.css
+      .popup {
+        color: red;
+      }
+      "
+    `);
   });
 });

package/packages/rolldown/src/transform.test.ts

@@ -170,4 +170,39 @@ describe("emberTransform (full plugin via rolldown)", () => {
       "
     `);
   });
+
+  it("emits sourcemaps for the specifier rewrite (no SOURCEMAP_BROKEN warnings)", async () => {
+    const dir = await mkdtemp(path.join(tmpdir(), "ember-rolldown-map-"));
+
+    const files = {
+      // index.ts contains a `.gts` specifier, so it goes through the rewrite.
+      "index.ts": `export { default as Foo } from './foo.gts';`,
+      "foo.gts": `<template>Foo</template>`,
+    };
+
+    for (const [relative, source] of Object.entries(files)) {
+      await writeFile(path.join(dir, relative), source, "utf8");
+    }
+
+    const warnings: string[] = [];
+    const build = await rolldown({
+      input: path.join(dir, "index.ts"),
+      plugins: [emberTransform()],
+      external: (id) => !(id.startsWith(".") || path.isAbsolute(id)),
+      onwarn(warning) {
+        warnings.push(warning.code ?? String(warning));
+      },
+    });
+
+    const { output } = await build.generate({ format: "es", sourcemap: true });
+
+    expect(warnings.filter((code) => code === "SOURCEMAP_BROKEN")).toEqual([]);
+
+    const chunk = output.find((entry) => entry.type === "chunk" && "map" in entry);
+    expect(chunk).toBeDefined();
+    // The composed map traces through the rewrite back to the original .gts
+    // source (content-tag's map survives the specifier-rewrite pass).
+    const sources = (chunk as { map?: { sources: string[] } }).map?.sources ?? [];
+    expect(sources.some((source) => source.endsWith("foo.gts"))).toBe(true);
+  });
 });

package/packages/rolldown/src/transform.ts

@@ -38,13 +38,32 @@ async function fixDtsExtensionsInDir(dir: string): Promise<void> {
   }
 }
 
+/**
+ * A sourcemap mapping every generated line to the same line of the input.
+ *
+ * `AAAA` is the [0, 0, 0, 0] VLQ segment (first line maps to source 0, line 0,
+ * column 0); `AACA` is [0, 0, +1, 0] (each following line advances the source
+ * line by one). Exact at line granularity, which is all the specifier rewrite
+ * can disturb.
+ */
+function lineIdentityMap(id: string, source: string) {
+  return {
+    version: 3,
+    sources: [id],
+    sourcesContent: [source],
+    names: [],
+    mappings: source
+      .split("\n")
+      .map((_, line) => (line === 0 ? "AAAA" : "AACA"))
+      .join(";"),
+  };
+}
+
 /**
  * Maps `.gts` -> `.ts` and `.gjs` -> `.js` (so rolldown can identify them as
  * ts/js) and preprocesses `<template>` via content-tag.
  */
 export function emberTransform(): Plugin {
-  const virtualFiles = new Set<string>();
-
   return {
     name: "ember:transform",
 
@@ -55,41 +74,39 @@ export function emberTransform(): Plugin {
 
         const fileName = path.join(path.dirname(importer), id);
 
-        if (id.endsWith(".gts") && !importer.endsWith(".d.ts")) {
-          virtualFiles.add(fileName);
+        if (id.endsWith(".gts")) {
           return {
             id: fileName.replace(/\.gts$/, ".ts"),
             meta: { fileName },
           };
         }
 
-        if (id.endsWith(".gjs") && !importer.endsWith(".d.ts")) {
-          virtualFiles.add(fileName);
+        if (id.endsWith(".gjs")) {
           return {
             id: fileName.replace(/\.gjs$/, ".js"),
             meta: { fileName },
           };
         }
 
-        if (id.endsWith(".d.ts") && importer.endsWith(".d.ts")) {
-          const gtsFile = fileName.replace(".d.ts", ".gts");
-          if (virtualFiles.has(gtsFile)) {
-            return fileName;
-          }
-        }
-
-        if (id.endsWith(".ts") && !importer.endsWith(".d.ts")) {
+        // A `.ts`/`.js` specifier whose only backing file is a `.gts`/`.gjs`
+        // resolves to the virtual module. This must also serve `.d.ts`
+        // importers: rolldown-plugin-dts resolves a declaration module's
+        // imports through the plugin pipeline (`this.resolve`), and — when the
+        // resolution is a source file — loads it (registering its declaration)
+        // before mapping the import to the declaration id. Virtual modules
+        // exist nowhere else, so if we don't answer here the import either
+        // fails to resolve (no file on disk) or, worse, resolves to a
+        // declaration id that was never registered.
+        if (id.endsWith(".ts")) {
           const gtsFileName = fileName.replace(/\.ts$/, ".gts");
           if (existsSync(gtsFileName) && !existsSync(fileName)) {
-            virtualFiles.add(gtsFileName);
             return { id: fileName, meta: { fileName: gtsFileName } };
           }
         }
 
-        if (id.endsWith(".js") && !importer.endsWith(".d.ts")) {
+        if (id.endsWith(".js")) {
           const gjsFileName = fileName.replace(/\.js$/, ".gjs");
           if (existsSync(gjsFileName) && !existsSync(fileName)) {
-            virtualFiles.add(gjsFileName);
             return { id: fileName, meta: { fileName: gjsFileName } };
           }
         }
@@ -105,7 +122,18 @@ export function emberTransform(): Plugin {
       },
       async handler(id) {
         const meta = this.getModuleInfo(id)?.meta ?? {};
-        const fileName = meta?.fileName;
+        let fileName = meta?.fileName;
+
+        // A virtual id can be loaded without having passed through our
+        // resolveId (rolldown-plugin-dts calls `this.load({ id })` with just
+        // the id), so no meta is attached: recover the backing file from disk.
+        if (!fileName && !existsSync(id)) {
+          if (id.endsWith(".ts") && existsSync(id.replace(/\.ts$/, ".gts"))) {
+            fileName = id.replace(/\.ts$/, ".gts");
+          } else if (id.endsWith(".js") && existsSync(id.replace(/\.js$/, ".gjs"))) {
+            fileName = id.replace(/\.js$/, ".gjs");
+          }
+        }
 
         if (fileName) {
           this.addWatchFile(fileName);
@@ -132,21 +160,26 @@ export function emberTransform(): Plugin {
         id: /\.(js|ts)$/,
       },
       handler(input, id) {
-        if (input.includes(".gts") && id.endsWith(".d.ts")) {
-          return input.replace(
-            /(['"`])((?:\.\.?\/|\/|@|[A-Za-z0-9_\-])[^'"]*?\.gts)\1/g,
-            (_m, q, p) => `${q}${p.replace(/\.gts$/, ".d.ts")}${q}`,
-          );
-        }
-
-        if (input.includes(".gts") && !id.endsWith(".d.ts")) {
-          return input.replace(
-            /(['"`])((?:\.\.?\/|\/|@|[A-Za-z0-9_\-])[^'"]*?\.gts)\1/g,
-            (_m, q, p) => `${q}${p.replace(/\.gts$/, ".ts")}${q}`,
-          );
+        // Rewrite `.gts` specifiers to `.ts` — the (virtual) source id — in
+        // runtime modules AND declaration modules alike. Declaration modules
+        // must NOT be rewritten to `.d.ts`: rolldown-plugin-dts's resolver
+        // treats a source-file resolution as "load it (registering its
+        // declaration), then map to the declaration id", while a `.d.ts` id is
+        // returned as-is — unloadable when the module isn't registered yet
+        // (e.g. the `.gts` is only ever type-imported).
+        const output = input.replace(
+          /(['"`])((?:\.\.?\/|\/|@|[A-Za-z0-9_\-])[^'"]*?\.gts)\1/g,
+          (_m, q, p) => `${q}${p.replace(/\.gts$/, ".ts")}${q}`,
+        );
+
+        if (output === input) {
+          return null;
         }
 
-        return input;
+        // The rewrite only shortens import specifiers in place, so a
+        // line-identity map is accurate to the line (and to the column for
+        // everything before the first rewritten specifier on a line).
+        return { code: output, map: lineIdentityMap(id, input) };
       },
     },
 

package/test/ember.nvp/scoped-css-library.test.ts

@@ -0,0 +1,211 @@
+import { describe, it, beforeAll, afterAll, expect } from "vitest";
+import { generate, listFiles } from "#test-helpers";
+import { execa } from "execa";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+
+import type { Project } from "ember.nvp";
+
+/**
+ * Integration test for building a library that uses ember-scoped-css through
+ * `@nullvoxpopuli/ember-rolldown` (tsdown):
+ *
+ * - the `scopedCSS()` unplugin (ember-scoped-css/rollup) resolves and rewrites
+ *   the `?scoped=` CSS requests the template transform injects
+ * - the template transform + babel plugin ride along via `ember()`'s
+ *   `babel.templateTransforms` / `babel.plugins` options
+ * - `@tsdown/css` with `css.inject` bundles the scoped CSS into
+ *   `dist/style.css` and keeps the import in `dist/index.js`, so consuming
+ *   apps load the styles through the module graph
+ *
+ * Covers all three authoring modes: co-located `.css`, inline
+ * `<style scoped>`, and the `scopedClass` pseudo-helper in module code.
+ */
+
+const source = {
+  "tsdown.config.js": `import { defineConfig } from "tsdown";
+import { ember } from "@nullvoxpopuli/ember-rolldown";
+import { scopedCSS } from "ember-scoped-css/rollup";
+import { scopedCSS as scopedCssBabel } from "ember-scoped-css/babel";
+
+export default defineConfig({
+  entry: ["./src/index.ts"],
+  css: { inject: true },
+  plugins: [
+    ember({
+      babel: {
+        plugins: [scopedCssBabel()],
+        templateTransforms: [scopedCssBabel.template({})],
+      },
+    }),
+    scopedCSS(),
+  ],
+});
+`,
+  "src/index.ts": `export { Badge, type BadgeSignature } from "./components/badge.gts";
+export { Banner, type BannerSignature } from "./components/banner.gts";
+export { Chip, type ChipSignature, chipClass } from "./components/chip.gts";
+`,
+  // co-located CSS
+  "src/components/badge.gts": `import type { TOC } from "@ember/component/template-only";
+
+export interface BadgeSignature {
+  Element: HTMLSpanElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export const Badge: TOC<BadgeSignature> = <template>
+  <span class="badge" ...attributes>{{yield}}</span>
+</template>;
+`,
+  "src/components/badge.css": `.badge {
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+`,
+  // inline <style scoped>
+  "src/components/banner.gts": `import type { TOC } from "@ember/component/template-only";
+
+export interface BannerSignature {
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export const Banner: TOC<BannerSignature> = <template>
+  <style scoped>
+    .banner {
+      border: 1px solid;
+    }
+  </style>
+  <div class="banner" ...attributes>{{yield}}</div>
+</template>;
+`,
+  // scopedClass pseudo-helper in module code
+  "src/components/chip.gts": `import type { TOC } from "@ember/component/template-only";
+import { scopedClass } from "ember-scoped-css";
+
+export const chipClass: string = scopedClass("chip");
+
+export interface ChipSignature {
+  Element: HTMLSpanElement;
+}
+
+export const Chip: TOC<ChipSignature> = <template>
+  <span class="chip" ...attributes></span>
+</template>;
+`,
+  "src/components/chip.css": `.chip {
+  display: inline-flex;
+}
+`,
+};
+
+async function writeSource(project: Project) {
+  for (let [filePath, contents] of Object.entries(source)) {
+    let target = join(project.directory, filePath);
+
+    await mkdir(dirname(target), { recursive: true });
+    await writeFile(target, contents);
+  }
+}
+
+async function addDependencies(project: Project) {
+  let manifestPath = join(project.directory, "package.json");
+  let manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+
+  // @tsdown/css releases in lockstep with tsdown; both ranges track 0.22.x
+  manifest.devDependencies["@tsdown/css"] = "^0.22.13";
+  manifest.devDependencies["ember-scoped-css"] = "^3.1.0";
+
+  await writeFile(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
+}
+
+describe("library with ember-scoped-css", () => {
+  let project: Project;
+
+  beforeAll(async () => {
+    project = await generate({ type: "library", name: "scoped-lib", layers: ["typescript"] });
+
+    await writeSource(project);
+    await addDependencies(project);
+
+    let install = await execa("pnpm install", { cwd: project.directory, shell: true });
+    expect(install.exitCode).toBe(0);
+
+    let build = await execa("pnpm build", { cwd: project.directory, shell: true });
+    expect(build.exitCode).toBe(0);
+  });
+
+  afterAll(async () => {
+    if (process.env.CI) return;
+
+    await rm(project.directory, { recursive: true, force: true, maxRetries: 3, retryDelay: 100 });
+  });
+
+  it("emits the expected files", async () => {
+    expect(await listFiles(join(project.directory, "dist"))).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.d.ts.map",
+        "index.js",
+        "index.js.map",
+        "style.css",
+      ]
+    `);
+  });
+
+  it("scopes classes in the precompiled templates and keeps the CSS import", async () => {
+    let output = await project.read("dist/index.js");
+
+    expect(output).toMatchInlineSnapshot(`
+      "import './style.css';
+      import { precompileTemplate } from "@ember/template-compilation";
+      import { setComponentTemplate } from "@ember/component";
+      import templateOnly from "@ember/component/template-only";
+      //#region src/components/badge.ts
+      const Badge = setComponentTemplate(precompileTemplate("<span class=\\"badge_e1025e732\\" ...attributes>{{yield}}</span>", { strictMode: true }), templateOnly());
+      //#endregion
+      //#region src/components/banner.ts
+      const Banner = setComponentTemplate(precompileTemplate("\\n<div class=\\"banner_e88952290\\" ...attributes>{{yield}}</div>", { strictMode: true }), templateOnly());
+      //#endregion
+      //#region src/components/chip.ts
+      const chipClass = "chip_ec34dd962";
+      const Chip = setComponentTemplate(precompileTemplate("<span class=\\"chip_ec34dd962\\" ...attributes></span>", { strictMode: true }), templateOnly());
+      //#endregion
+      export { Badge, Banner, Chip, chipClass };
+
+      //# sourceMappingURL=index.js.map"
+    `);
+
+    // the scopedClass import is compiled away; nothing of ember-scoped-css
+    // remains at runtime
+    expect(output).not.toContain("ember-scoped-css");
+  });
+
+  it("rewrites and bundles all three CSS sources", async () => {
+    expect(await project.read("dist/style.css")).toMatchInlineSnapshot(`
+      ".badge_e1025e732 {
+        border-radius: .25rem;
+        padding: .25rem .5rem;
+      }
+      .banner_e88952290 {
+        border: 1px solid;
+      }
+      .chip_ec34dd962 {
+        display: inline-flex;
+      }
+      "
+    `);
+  });
+
+  it("emits declarations untouched by scoping", async () => {
+    let declarations = await project.read("dist/index.d.ts");
+
+    expect(declarations).toContain("declare const Badge: TOC<BadgeSignature>");
+    expect(declarations).not.toContain("badge_");
+  });
+});