👽 [#724] Fix token imports (CJS -> ESM)

Having looked into various configurations and plugins to automatically
get the CommonJS transformed into ESM breaks either dev mode or
production builds of Storybook.

There are some external plugins for CommonJS transformations, but they
either looks sketchy or don't seem to work in obvious ways (in
particular @rollup/plugin-commonjs wasn't a success).

So I've opted for the simple solution - write a custom plugin that
just replaces the CJS export with an ESM export and it works
in both dev and prod modes without any additional fuss. In the
future, we will process other formats of these token exports,
for which the design-token-editor package needs to be upgraded.

src/components/Anchor/design-tokens.mdx

@@ -1,6 +1,6 @@
-import ofTokens from '@open-formulieren/design-tokens/dist/tokens';
+import * as ofTokens from '@open-formulieren/design-tokens/dist/tokens.js';
 import {Meta} from '@storybook/addon-docs';
-import utrechtTokens from '@utrecht/design-tokens/dist/tokens';
+import * as utrechtTokens from '@utrecht/design-tokens/dist/tokens.cjs';
 import TokensTable from 'design-token-editor/lib/esm/TokensTable';
 
 <Meta title="Pure React components/Anchor/Design tokens" />

src/components/Button/design-tokens.mdx

@@ -1,6 +1,6 @@
 import ofTokens from '@open-formulieren/design-tokens/dist/tokens';
 import {Meta} from '@storybook/addon-docs';
-import utrechtTokens from '@utrecht/design-tokens/dist/tokens';
+import * as utrechtTokens from '@utrecht/design-tokens/dist/tokens.cjs';
 import TokensTable from 'design-token-editor/lib/esm/TokensTable';
 
 <Meta title="Pure React components/OF Button" name="Design tokens" />

src/components/EditGrid/design-tokens.mdx

@@ -1,6 +1,6 @@
 import ofTokens from '@open-formulieren/design-tokens/dist/tokens';
 import {Meta} from '@storybook/addon-docs';
-import utrechtTokens from '@utrecht/design-tokens/dist/tokens';
+import * as utrechtTokens from '@utrecht/design-tokens/dist/tokens.cjs';
 import TokensTable from 'design-token-editor/lib/esm/TokensTable';
 
 <Meta title="Pure React components / EditGrid" name="Design tokens" />

vite.config.mts

@@ -22,7 +22,22 @@ const ejsPlugin = () => ({
       const src = await readFile(id, 'utf-8');
       // @ts-ignore
       const code = lodashTemplate(src, options);
-      return `export default ${code}`;
+      return {code: `export default ${code}`, map: null};
+    }
+  },
+});
+
+const cjsTokens = () => ({
+  name: 'process-cjs-tokens',
+  async transform(src, id) {
+    if (
+      id.endsWith('/design-tokens/dist/tokens.js') ||
+      id.endsWith('node_modules/@utrecht/design-tokens/dist/tokens.cjs')
+    ) {
+      return {
+        code: src.replace('module.exports = ', 'export default '),
+        map: null,
+      };
     }
   },
 });
@@ -37,13 +52,9 @@ export default defineConfig({
     // file extension to .jsx/.tsx
     react({babel: {babelrc: true}}),
     jsconfigPaths(),
+    cjsTokens(),
     ejsPlugin(),
   ],
-  build: {
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-  },
   test: {
     environment: 'jsdom',
     environmentOptions: {