import attributes syntax parsing

package.json

@@ -45,6 +45,7 @@
     "@projectevergreen/acorn-jsx-esm": "~0.1.0",
     "@projectevergreen/escodegen-esm": "~0.1.0",
     "acorn": "^8.7.0",
+    "acorn-import-attributes": "^1.9.5",
     "acorn-walk": "^8.2.0",
     "parse5": "^6.0.1"
   },

src/jsx-loader.js

@@ -6,6 +6,7 @@ import { generate } from '@projectevergreen/escodegen-esm';
 import fs from 'fs';
 import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
+import { importAttributes } from 'acorn-import-attributes';
 
 const jsxRegex = /\.(jsx)$/;
 
@@ -29,7 +30,7 @@ export function getParser(moduleURL) {
   }
 
   return {
-    parser: acorn.Parser.extend(jsx()),
+    parser: acorn.Parser.extend(jsx(), importAttributes),
     config: {
       // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
       ...walk.base,
@@ -236,7 +237,7 @@ export function parseJsx(moduleURL) {
   const hasOwnObservedAttributes = undefined;
   let inferredObservability = false;
   let observedAttributes = [];
-  let tree = acorn.Parser.extend(jsx()).parse(moduleContents, {
+  let tree = acorn.Parser.extend(jsx(), importAttributes).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   });

src/wcc.js

@@ -7,6 +7,7 @@ import * as walk from 'acorn-walk';
 import { generate } from '@projectevergreen/escodegen-esm';
 import { getParser, parseJsx } from './jsx-loader.js';
 import { parse, parseFragment, serialize } from 'parse5';
+import { importAttributes } from 'acorn-import-attributes';
 import fs from 'fs';
 
 function getParse(html) {
@@ -61,12 +62,12 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
   const nextDepth = depth += 1;
   const customParser = getParser(moduleURL);
-  const parser = customParser ? customParser.parser : acorn;
+  const parser = customParser ? customParser.parser : acorn.Parser;
   const config = customParser ? customParser.config : {
     ...walk.base
   };
 
-  walk.simple(parser.parse(moduleContents, {
+  walk.simple(parser.extend(importAttributes).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -106,13 +107,13 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
 async function getTagName(moduleURL) {
   const moduleContents = await fs.promises.readFile(moduleURL, 'utf-8');
   const customParser = getParser(moduleURL);
-  const parser = customParser ? customParser.parser : acorn;
+  const parser = customParser ? customParser.parser : acorn.Parser;
   const config = customParser ? customParser.config : {
     ...walk.base
   };
   let tagName;
 
-  walk.simple(parser.parse(moduleContents, {
+  walk.simple(parser.extend(importAttributes).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {