fix styles and bump @embroider/addon-dev & babel-plugin-ember-template-compilation

Author: aklkv

addon/babel.config.json

@@ -10,7 +10,7 @@
     ],
     "@embroider/addon-dev/template-colocation-plugin",
     [
-      "babel-plugin-ember-template-compilation",
+      "module:babel-plugin-ember-template-compilation",
       {
         "targetFormat": "hbs",
         "transforms": []

addon/eslint.config.mjs

@@ -12,7 +12,7 @@
  *     npx eslint --inspect-config
  *
  */
-import babelParser from '@babel/eslint-parser';
+import babelParser from '@babel/eslint-parser/experimental-worker';
 import js from '@eslint/js';
 import prettier from 'eslint-config-prettier';
 import ember from 'eslint-plugin-ember/recommended';

addon/package.json

@@ -65,7 +65,7 @@
     "@babel/eslint-parser": "^7.27.5",
     "@babel/plugin-transform-typescript": "^7.27.1",
     "@babel/runtime": "^7.27.6",
-    "@embroider/addon-dev": "^7.1.4",
+    "@embroider/addon-dev": "^8.1.0",
     "@eslint/js": "^9.29.0",
     "@glimmer/component": "^2.0.0",
     "@glint/core": "^1.5.2",
@@ -74,7 +74,7 @@
     "@glint/template": "^1.5.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "^3.0.10",
-    "babel-plugin-ember-template-compilation": "^2.4.1",
+    "babel-plugin-ember-template-compilation": "^3.0.0",
     "concurrently": "^9.1.2",
     "ember-source": "^6.5.0",
     "ember-template-lint": "^7.9.1",
@@ -88,10 +88,11 @@
     "prettier-plugin-ember-template-tag": "^2.0.6",
     "rollup": "^4.43.0",
     "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-import-css": "^4.0.1",
     "stylelint": "^16.20.0",
     "stylelint-config-standard": "^38.0.0",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.34.0"
+    "typescript-eslint": "^8.34.1"
   },
   "ember": {
     "edition": "octane"
@@ -104,4 +105,4 @@
     "type": "addon",
     "version": 2
   }
-}
+}

addon/rollup.config.mjs

@@ -1,6 +1,7 @@
 import { Addon } from '@embroider/addon-dev/rollup';
 import { babel } from '@rollup/plugin-babel';
 import copy from 'rollup-plugin-copy';
+import css from 'rollup-plugin-import-css';
 
 const addon = new Addon({
   srcDir: 'src',
@@ -59,7 +60,13 @@ export default {
 
     // addons are allowed to contain imports of .css files, which we want rollup
     // to leave alone and keep in the published output.
-    addon.keepAssets(['**/*.css']),
+    // addon.keepAssets(['**/*.css']),
+
+    css({
+      output: 'styles/navigation-narrator.css',
+      preserveImports: true,
+      minify: true,
+    }),
 
     // Remove leftover build artifacts when starting a new build.
     addon.clean(),

addon/src/components/navigation-narrator.gts

@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { registerDestructor } from '@ember/destroyable';
 import { schedule, cancel } from '@ember/runloop';
 
+import '../styles/navigation-narrator.css';
 import { defaultValidator } from '../utils/validators.js';
 
 import type RouterService from '@ember/routing/router-service';
@@ -36,7 +37,6 @@ export interface NavigationNarratorSignature {
   Element: HTMLElement;
 }
 
-
 /**
  * 🎧 NavigationNarrator
  *