use custom babel plugin to fix linaria

packages/taler-wallet-webextension/babel.config-linaria.json

@@ -25,5 +25,6 @@
 {
   "presets": [
     "preact-cli/babel",
-  ]
-}
+  ],
+  "plugins": ["./trim-extension.cjs"],
+}

packages/taler-wallet-webextension/package.json

@@ -4,6 +4,7 @@
   "description": "GNU Taler Wallet browser extension",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
+  "type": "module",
   "author": "Florian Dold",
   "license": "AGPL-3.0-or-later",
   "private": false,
@@ -46,6 +47,7 @@
     "@babel/core": "7.18.9",
     "@babel/plugin-transform-modules-commonjs": "7.18.6",
     "@babel/plugin-transform-react-jsx-source": "7.18.6",
+    "@babel/plugin-transform-typescript": "^7.20.13",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "7.18.9",
     "@gnu-taler/pogen": "workspace:*",

packages/taler-wallet-webextension/src/mui/Alert.tsx

@@ -23,11 +23,9 @@ import InfoOutlinedIcon from "../svg/info_outlined_24px.svg";
 import ReportProblemOutlinedIcon from "../svg/report_problem_outlined_24px.svg";
 import SuccessOutlinedIcon from "../svg/success_outlined_24px.svg";
 import { IconButton } from "./Button.js";
-// eslint-disable-next-line import/extensions
-import { darken, lighten } from "./colors/manipulation";
+import { darken, lighten } from "./colors/manipulation.js";
 import { Paper } from "./Paper.js";
-// eslint-disable-next-line import/extensions
-import { theme } from "./style";
+import { theme } from "./style.jsx";
 import { Typography } from "./Typography.js";
 
 const defaultIconMapping = {

packages/taler-wallet-webextension/src/mui/Avatar.tsx

@@ -16,7 +16,7 @@
 import { css } from "@linaria/core";
 import { h, JSX, VNode, ComponentChildren } from "preact";
 // eslint-disable-next-line import/extensions
-import { theme } from "./style";
+import { theme } from "./style.jsx";
 
 const root = css`
   position: relative;

packages/taler-wallet-webextension/src/mui/Menu.tsx

@@ -19,7 +19,7 @@ import { buttonBaseStyle } from "./Button.js";
 import { alpha } from "./colors/manipulation.js";
 import { Paper } from "./Paper.js";
 // eslint-disable-next-line import/extensions
-import { Colors, ripple, theme } from "./style";
+import { Colors, ripple, theme } from "./style.js";
 
 interface Props {
   children: ComponentChildren;

packages/taler-wallet-webextension/trim-extension.cjs

@@ -0,0 +1,23 @@
+// Simple plugin to trim extensions from the filename of relative import statements.
+// Required to get linaria to work with `moduleResulution: "Node16"` imports.
+// @author Florian Dold
+module.exports = function({ types: t }) {
+  return {
+    name: "trim-extension",
+    visitor: {
+      ImportDeclaration: (x) => {
+        const src = x.node.source;
+        if (src.value.startsWith("./")) {
+          if (src.value.endsWith(".js")) {
+            const newVal = src.value.replace(/[.]js$/, "")
+            x.node.source = t.stringLiteral(newVal);
+          }
+        }
+        if (src.value.endsWith(".jsx")) {
+          const newVal = src.value.replace(/[.]jsx$/, "")
+          x.node.source = t.stringLiteral(newVal);
+        }
+      },
+    }
+  };
+}