wc-compiler 0.12.1 → 0.13.0

package/dist/wcc.dist.cjs

@@ -4,6 +4,14 @@ var fs = require('fs');
 
 function noop() { }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
+class CSSStyleSheet {
+  insertRule() { }
+  deleteRule() { }
+  replace() { }
+  replaceSync() { }
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
 class EventTarget {
   constructor() {
@@ -97,6 +105,7 @@ class ShadowRoot extends DocumentFragment {
   constructor(options) {
     super();
     this.mode = options.mode || 'closed';
+    this.adoptedStyleSheets = [];
   }
 }
 
@@ -151,6 +160,7 @@ globalThis.addEventListener = globalThis.addEventListener ?? noop;
 globalThis.document = globalThis.document ?? new Document();
 globalThis.customElements = globalThis.customElements ?? new CustomElementsRegistry();
 globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
+globalThis.CSSStyleSheet = globalThis.CSSStyleSheet ?? CSSStyleSheet;
 
 // Reserved word lists for various dialects of the language
 
@@ -1199,7 +1209,7 @@ pp$8.parseForStatement = function(node) {
 
 pp$8.parseFunctionStatement = function(node, isAsync, declarationPosition) {
   this.next();
-  return this.parseFunction(node, FUNC_STATEMENT | (declarationPosition ? 0 : FUNC_HANGING_STATEMENT), false, isAsync)
+  return this.parseFunction(node, FUNC_STATEMENT$1 | (declarationPosition ? 0 : FUNC_HANGING_STATEMENT), false, isAsync)
 };
 
 pp$8.parseIfStatement = function(node) {
@@ -1463,7 +1473,7 @@ pp$8.parseVarId = function(decl, kind) {
   this.checkLValPattern(decl.id, kind === "var" ? BIND_VAR : BIND_LEXICAL, false);
 };
 
-var FUNC_STATEMENT = 1, FUNC_HANGING_STATEMENT = 2, FUNC_NULLABLE_ID = 4;
+var FUNC_STATEMENT$1 = 1, FUNC_HANGING_STATEMENT = 2, FUNC_NULLABLE_ID$1 = 4;
 
 // Parse a function declaration or literal (depending on the
 // `statement & FUNC_STATEMENT`).
@@ -1479,8 +1489,8 @@ pp$8.parseFunction = function(node, statement, allowExpressionBody, isAsync, for
   if (this.options.ecmaVersion >= 8)
     { node.async = !!isAsync; }
 
-  if (statement & FUNC_STATEMENT) {
-    node.id = (statement & FUNC_NULLABLE_ID) && this.type !== types$1.name ? null : this.parseIdent();
+  if (statement & FUNC_STATEMENT$1) {
+    node.id = (statement & FUNC_NULLABLE_ID$1) && this.type !== types$1.name ? null : this.parseIdent();
     if (node.id && !(statement & FUNC_HANGING_STATEMENT))
       // If it is a regular function declaration in sloppy mode, then it is
       // subject to Annex B semantics (BIND_FUNCTION). Otherwise, the binding
@@ -1495,7 +1505,7 @@ pp$8.parseFunction = function(node, statement, allowExpressionBody, isAsync, for
   this.awaitIdentPos = 0;
   this.enterScope(functionFlags(node.async, node.generator));
 
-  if (!(statement & FUNC_STATEMENT))
+  if (!(statement & FUNC_STATEMENT$1))
     { node.id = this.type === types$1.name ? this.parseIdent() : null; }
 
   this.parseFunctionParams(node);
@@ -1504,7 +1514,7 @@ pp$8.parseFunction = function(node, statement, allowExpressionBody, isAsync, for
   this.yieldPos = oldYieldPos;
   this.awaitPos = oldAwaitPos;
   this.awaitIdentPos = oldAwaitIdentPos;
-  return this.finishNode(node, (statement & FUNC_STATEMENT) ? "FunctionDeclaration" : "FunctionExpression")
+  return this.finishNode(node, (statement & FUNC_STATEMENT$1) ? "FunctionDeclaration" : "FunctionExpression")
 };
 
 pp$8.parseFunctionParams = function(node) {
@@ -1810,7 +1820,7 @@ pp$8.parseExport = function(node, exports) {
       var fNode = this.startNode();
       this.next();
       if (isAsync) { this.next(); }
-      node.declaration = this.parseFunction(fNode, FUNC_STATEMENT | FUNC_NULLABLE_ID, false, isAsync);
+      node.declaration = this.parseFunction(fNode, FUNC_STATEMENT$1 | FUNC_NULLABLE_ID$1, false, isAsync);
     } else if (this.type === types$1._class) {
       var cNode = this.startNode();
       node.declaration = this.parseClass(cNode, "nullableID");
@@ -5739,7 +5749,7 @@ function tokenizer$1(input, options) {
   return Parser$2.tokenizer(input, options)
 }
 
-var acorn = /*#__PURE__*/Object.freeze({
+var _acorn = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Node: Node,
   Parser: Parser$2,
@@ -7085,7 +7095,7 @@ var Syntax,
     quotes,
     escapeless,
     newline,
-    space,
+    space$1,
     parentheses,
     semicolons,
     safeConcatenation,
@@ -7565,7 +7575,7 @@ function toSourceNodeWhenNeeded(generated, node) {
 }
 
 function noEmptySpace() {
-    return (space) ? space : ' ';
+    return (space$1) ? space$1 : ' ';
 }
 
 function join(left, right) {
@@ -7595,7 +7605,7 @@ function join(left, right) {
             code.isWhiteSpace(rightCharCode) || code.isLineTerminator(rightCharCode)) {
         return [left, right];
     }
-    return [left, space, right];
+    return [left, space$1, right];
 }
 
 function addIndent(stmt) {
@@ -7861,7 +7871,7 @@ CodeGenerator.prototype.maybeBlock = function(stmt, flags) {
     noLeadingComment = !extra.comment || !stmt.leadingComments;
 
     if (stmt.type === Syntax.BlockStatement && noLeadingComment) {
-        return [space, this.generateStatement(stmt, flags)];
+        return [space$1, this.generateStatement(stmt, flags)];
     }
 
     if (stmt.type === Syntax.EmptyStatement && noLeadingComment) {
@@ -7881,7 +7891,7 @@ CodeGenerator.prototype.maybeBlock = function(stmt, flags) {
 CodeGenerator.prototype.maybeBlockSuffix = function (stmt, result) {
     var ends = endsWithLineTerminator(toSourceNodeWhenNeeded(result).toString());
     if (stmt.type === Syntax.BlockStatement && (!extra.comment || !stmt.leadingComments) && !ends) {
-        return [result, space];
+        return [result, space$1];
     }
     if (ends) {
         return [result, base];
@@ -7894,12 +7904,12 @@ function generateIdentifier(node) {
 }
 
 function generateAsyncPrefix(node, spaceRequired) {
-    return node.async ? 'async' + (spaceRequired ? noEmptySpace() : space) : '';
+    return node.async ? 'async' + (spaceRequired ? noEmptySpace() : space$1) : '';
 }
 
 function generateStarSuffix(node) {
     var isGenerator = node.generator && !extra.moz.starlessGenerator;
-    return isGenerator ? '*' + space : '';
+    return isGenerator ? '*' + space$1 : '';
 }
 
 function generateMethodPrefix(prop) {
@@ -7945,13 +7955,13 @@ CodeGenerator.prototype.generateFunctionParams = function (node) {
                 result.push(this.generatePattern(node.params[i], Precedence.Assignment, E_TTT));
             }
             if (i + 1 < iz) {
-                result.push(',' + space);
+                result.push(',' + space$1);
             }
         }
 
         if (node.rest) {
             if (node.params.length) {
-                result.push(',' + space);
+                result.push(',' + space$1);
             }
             result.push('...');
             result.push(generateIdentifier(node.rest));
@@ -7969,12 +7979,12 @@ CodeGenerator.prototype.generateFunctionBody = function (node) {
     result = this.generateFunctionParams(node);
 
     if (node.type === Syntax.ArrowFunctionExpression) {
-        result.push(space);
+        result.push(space$1);
         result.push('=>');
     }
 
     if (node.expression) {
-        result.push(space);
+        result.push(space$1);
         expr = this.generateExpression(node.body, Precedence.Assignment, E_TTT);
         if (expr.toString().charAt(0) === '{') {
             expr = ['(', expr, ')'];
@@ -7988,7 +7998,7 @@ CodeGenerator.prototype.generateFunctionBody = function (node) {
 };
 
 CodeGenerator.prototype.generateIterationForStatement = function (operator, stmt, flags) {
-    var result = ['for' + (stmt.await ? noEmptySpace() + 'await' : '') + space + '('], that = this;
+    var result = ['for' + (stmt.await ? noEmptySpace() + 'await' : '') + space$1 + '('], that = this;
     withIndent(function () {
         if (stmt.left.type === Syntax.VariableDeclaration) {
             withIndent(function () {
@@ -8033,7 +8043,7 @@ CodeGenerator.prototype.generateAssignment = function (left, right, operator, pr
     return parenthesize(
         [
             this.generateExpression(left, Precedence.Call, flags),
-            space + operator + space,
+            space$1 + operator + space$1,
             this.generateExpression(right, Precedence.Assignment, flags)
         ],
         Precedence.Assignment,
@@ -8183,7 +8193,7 @@ CodeGenerator.Statement = {
             fragment = join('extends', this.generateExpression(stmt.superClass, Precedence.Unary, E_TTT));
             result = join(result, fragment);
         }
-        result.push(space);
+        result.push(space$1);
         result.push(this.generateStatement(stmt.body, S_TFFT));
         return result;
     },
@@ -8200,7 +8210,7 @@ CodeGenerator.Statement = {
         var result = join('do', this.maybeBlock(stmt.body, S_TFFF));
         result = this.maybeBlockSuffix(stmt.body, result);
         return join(result, [
-            'while' + space + '(',
+            'while' + space$1 + '(',
             this.generateExpression(stmt.test, Precedence.Sequence, E_TTT),
             ')' + this.semicolon(flags)
         ]);
@@ -8213,7 +8223,7 @@ CodeGenerator.Statement = {
 
             if (stmt.param) {
                 result = [
-                    'catch' + space + '(',
+                    'catch' + space$1 + '(',
                     that.generateExpression(stmt.param, Precedence.Sequence, E_TTT),
                     ')'
                 ];
@@ -8269,7 +8279,7 @@ CodeGenerator.Statement = {
         // export ExportClause ;
         if (stmt.specifiers) {
             if (stmt.specifiers.length === 0) {
-                result = join(result, '{' + space + '}');
+                result = join(result, '{' + space$1 + '}');
             } else if (stmt.specifiers[0].type === Syntax.ExportBatchSpecifier) {
                 result = join(result, this.generateExpression(stmt.specifiers[0], Precedence.Sequence, E_TTT));
             } else {
@@ -8293,7 +8303,7 @@ CodeGenerator.Statement = {
 
             if (stmt.source) {
                 result = join(result, [
-                    'from' + space,
+                    'from' + space$1,
                     // ModuleSpecifier
                     this.generateExpression(stmt.source, Precedence.Sequence, E_TTT),
                     this.semicolon(flags)
@@ -8308,9 +8318,9 @@ CodeGenerator.Statement = {
     ExportAllDeclaration: function (stmt, flags) {
         // export * FromClause ;
         return [
-            'export' + space,
-            '*' + space,
-            'from' + space,
+            'export' + space$1,
+            '*' + space$1,
+            'from' + space$1,
             // ModuleSpecifier
             this.generateExpression(stmt.source, Precedence.Sequence, E_TTT),
             this.semicolon(flags)
@@ -8390,7 +8400,7 @@ CodeGenerator.Statement = {
             // import ModuleSpecifier ;
             return [
                 'import',
-                space,
+                space$1,
                 // ModuleSpecifier
                 this.generateExpression(stmt.source, Precedence.Sequence, E_TTT),
                 this.semicolon(flags)
@@ -8419,18 +8429,18 @@ CodeGenerator.Statement = {
             if (stmt.specifiers[cursor].type === Syntax.ImportNamespaceSpecifier) {
                 // NameSpaceImport
                 result = join(result, [
-                        space,
+                        space$1,
                         this.generateExpression(stmt.specifiers[cursor], Precedence.Sequence, E_TTT)
                 ]);
             } else {
                 // NamedImports
-                result.push(space + '{');
+                result.push(space$1 + '{');
 
                 if ((stmt.specifiers.length - cursor) === 1) {
                     // import { ... } from "...";
-                    result.push(space);
+                    result.push(space$1);
                     result.push(this.generateExpression(stmt.specifiers[cursor], Precedence.Sequence, E_TTT));
-                    result.push(space + '}' + space);
+                    result.push(space$1 + '}' + space$1);
                 } else {
                     // import {
                     //    ...,
@@ -8450,13 +8460,13 @@ CodeGenerator.Statement = {
                     if (!endsWithLineTerminator(toSourceNodeWhenNeeded(result).toString())) {
                         result.push(newline);
                     }
-                    result.push(base + '}' + space);
+                    result.push(base + '}' + space$1);
                 }
             }
         }
 
         result = join(result, [
-            'from' + space,
+            'from' + space$1,
             // ModuleSpecifier
             this.generateExpression(stmt.source, Precedence.Sequence, E_TTT),
             this.semicolon(flags)
@@ -8469,9 +8479,9 @@ CodeGenerator.Statement = {
         if (stmt.init) {
             return [
                 this.generateExpression(stmt.id, Precedence.Assignment, itemFlags),
-                space,
+                space$1,
                 '=',
-                space,
+                space$1,
                 this.generateExpression(stmt.init, Precedence.Assignment, itemFlags)
             ];
         }
@@ -8504,7 +8514,7 @@ CodeGenerator.Statement = {
                     result.push(',' + newline);
                     result.push(addIndent(that.generateStatement(node, bodyFlags)));
                 } else {
-                    result.push(',' + space);
+                    result.push(',' + space$1);
                     result.push(that.generateStatement(node, bodyFlags));
                 }
             }
@@ -8579,9 +8589,9 @@ CodeGenerator.Statement = {
         var result, fragment, i, iz, bodyFlags, that = this;
         withIndent(function () {
             result = [
-                'switch' + space + '(',
+                'switch' + space$1 + '(',
                 that.generateExpression(stmt.discriminant, Precedence.Sequence, E_TTT),
-                ')' + space + '{' + newline
+                ')' + space$1 + '{' + newline
             ];
         });
         if (stmt.cases) {
@@ -8644,7 +8654,7 @@ CodeGenerator.Statement = {
         var result, bodyFlags, semicolonOptional, that = this;
         withIndent(function () {
             result = [
-                'if' + space + '(',
+                'if' + space$1 + '(',
                 that.generateExpression(stmt.test, Precedence.Sequence, E_TTT),
                 ')'
             ];
@@ -8671,7 +8681,7 @@ CodeGenerator.Statement = {
     ForStatement: function (stmt, flags) {
         var result, that = this;
         withIndent(function () {
-            result = ['for' + space + '('];
+            result = ['for' + space$1 + '('];
             if (stmt.init) {
                 if (stmt.init.type === Syntax.VariableDeclaration) {
                     result.push(that.generateStatement(stmt.init, S_FFFF));
@@ -8685,7 +8695,7 @@ CodeGenerator.Statement = {
             }
 
             if (stmt.test) {
-                result.push(space);
+                result.push(space$1);
                 result.push(that.generateExpression(stmt.test, Precedence.Sequence, E_TTT));
                 result.push(';');
             } else {
@@ -8693,7 +8703,7 @@ CodeGenerator.Statement = {
             }
 
             if (stmt.update) {
-                result.push(space);
+                result.push(space$1);
                 result.push(that.generateExpression(stmt.update, Precedence.Sequence, E_TTT));
                 result.push(')');
             } else {
@@ -8791,7 +8801,7 @@ CodeGenerator.Statement = {
         var result, that = this;
         withIndent(function () {
             result = [
-                'while' + space + '(',
+                'while' + space$1 + '(',
                 that.generateExpression(stmt.test, Precedence.Sequence, E_TTT),
                 ')'
             ];
@@ -8804,7 +8814,7 @@ CodeGenerator.Statement = {
         var result, that = this;
         withIndent(function () {
             result = [
-                'with' + space + '(',
+                'with' + space$1 + '(',
                 that.generateExpression(stmt.object, Precedence.Sequence, E_TTT),
                 ')'
             ];
@@ -8830,7 +8840,7 @@ CodeGenerator.Expression = {
         for (i = 0, iz = expr.expressions.length; i < iz; ++i) {
             result.push(this.generateExpression(expr.expressions[i], Precedence.Assignment, flags));
             if (i + 1 < iz) {
-                result.push(',' + space);
+                result.push(',' + space$1);
             }
         }
         return parenthesize(result, Precedence.Sequence, precedence);
@@ -8851,9 +8861,9 @@ CodeGenerator.Expression = {
         return parenthesize(
             [
                 this.generateExpression(expr.test, Precedence.Coalesce, flags),
-                space + '?' + space,
+                space$1 + '?' + space$1,
                 this.generateExpression(expr.consequent, Precedence.Assignment, flags),
-                space + ':' + space,
+                space$1 + ':' + space$1,
                 this.generateExpression(expr.alternate, Precedence.Assignment, flags)
             ],
             Precedence.Conditional,
@@ -8922,7 +8932,7 @@ CodeGenerator.Expression = {
         for (i = 0, iz = expr['arguments'].length; i < iz; ++i) {
             result.push(this.generateExpression(expr['arguments'][i], Precedence.Assignment, E_TTT));
             if (i + 1 < iz) {
-                result.push(',' + space);
+                result.push(',' + space$1);
             }
         }
         result.push(')');
@@ -8962,7 +8972,7 @@ CodeGenerator.Expression = {
             for (i = 0, iz = length; i < iz; ++i) {
                 result.push(this.generateExpression(expr['arguments'][i], Precedence.Assignment, E_TTT));
                 if (i + 1 < iz) {
-                    result.push(',' + space);
+                    result.push(',' + space$1);
                 }
             }
             result.push(')');
@@ -9023,7 +9033,7 @@ CodeGenerator.Expression = {
         var result, fragment, rightCharCode, leftSource, leftCharCode;
         fragment = this.generateExpression(expr.argument, Precedence.Unary, E_TTT);
 
-        if (space === '') {
+        if (space$1 === '') {
             result = join(expr.operator, fragment);
         } else {
             result = [expr.operator];
@@ -9104,7 +9114,7 @@ CodeGenerator.Expression = {
             result.push(generateStarSuffix(expr) || noEmptySpace());
             result.push(generateIdentifier(expr.id));
         } else {
-            result.push(generateStarSuffix(expr) || space);
+            result.push(generateStarSuffix(expr) || space$1);
         }
         result.push(this.generateFunctionBody(expr));
         return result;
@@ -9136,7 +9146,7 @@ CodeGenerator.Expression = {
                     result.push(that.generateExpression(expr.elements[i], Precedence.Assignment, E_TTT));
                 }
                 if (i + 1 < iz) {
-                    result.push(',' + (multiline ? newline : space));
+                    result.push(',' + (multiline ? newline : space$1));
                 }
             }
         });
@@ -9162,7 +9172,7 @@ CodeGenerator.Expression = {
             fragment = join('extends', this.generateExpression(expr.superClass, Precedence.Unary, E_TTT));
             result = join(result, fragment);
         }
-        result.push(space);
+        result.push(space$1);
         result.push(this.generateStatement(expr.body, S_TFFT));
         return result;
     },
@@ -9170,7 +9180,7 @@ CodeGenerator.Expression = {
     MethodDefinition: function (expr, precedence, flags) {
         var result, fragment;
         if (expr['static']) {
-            result = ['static' + space];
+            result = ['static' + space$1];
         } else {
             result = [];
         }
@@ -9215,7 +9225,7 @@ CodeGenerator.Expression = {
 
         return [
             this.generatePropertyKey(expr.key, expr.computed),
-            ':' + space,
+            ':' + space$1,
             this.generateExpression(expr.value, Precedence.Assignment, E_TTT)
         ];
     },
@@ -9242,7 +9252,7 @@ CodeGenerator.Expression = {
             //   dejavu.Class.declare({method2: function () {
             //       }});
             if (!hasLineTerminator(toSourceNodeWhenNeeded(fragment).toString())) {
-                return [ '{', space, fragment, space, '}' ];
+                return [ '{', space$1, fragment, space$1, '}' ];
             }
         }
 
@@ -9309,7 +9319,7 @@ CodeGenerator.Expression = {
                 result.push(multiline ? indent : '');
                 result.push(that.generateExpression(expr.properties[i], Precedence.Sequence, E_TTT));
                 if (i + 1 < iz) {
-                    result.push(',' + (multiline ? newline : space));
+                    result.push(',' + (multiline ? newline : space$1));
                 }
             }
         });
@@ -9342,7 +9352,7 @@ CodeGenerator.Expression = {
         var result = ['*'];
         var id = expr.id || expr.local;
         if (id) {
-            result.push(space + 'as' + noEmptySpace() + generateIdentifier(id));
+            result.push(space$1 + 'as' + noEmptySpace() + generateIdentifier(id));
         }
         return result;
     },
@@ -9445,7 +9455,7 @@ CodeGenerator.Expression = {
         }
 
         if (expr.filter) {
-            result = join(result, 'if' + space);
+            result = join(result, 'if' + space$1);
             fragment = this.generateExpression(expr.filter, Precedence.Sequence, E_TTT);
             result = join(result, [ '(', fragment, ')' ]);
         }
@@ -9474,7 +9484,7 @@ CodeGenerator.Expression = {
         fragment = join(fragment, expr.of ? 'of' : 'in');
         fragment = join(fragment, this.generateExpression(expr.right, Precedence.Sequence, E_TTT));
 
-        return [ 'for' + space + '(', fragment, ')' ];
+        return [ 'for' + space$1 + '(', fragment, ')' ];
     },
 
     SpreadElement: function (expr, precedence, flags) {
@@ -9508,9 +9518,9 @@ CodeGenerator.Expression = {
         for (i = 0, iz = expr.quasis.length; i < iz; ++i) {
             result.push(this.generateExpression(expr.quasis[i], Precedence.Primary, E_TTT));
             if (i + 1 < iz) {
-                result.push('${' + space);
+                result.push('${' + space$1);
                 result.push(this.generateExpression(expr.expressions[i], Precedence.Sequence, E_TTT));
-                result.push(space + '}');
+                result.push(space$1 + '}');
             }
         }
         result.push('`');
@@ -9619,9 +9629,9 @@ function generate(node, options) {
     quotes = json ? 'double' : options.format.quotes;
     escapeless = options.format.escapeless;
     newline = options.format.newline;
-    space = options.format.space;
+    space$1 = options.format.space;
     if (options.format.compact) {
-        newline = space = indent = base = '';
+        newline = space$1 = indent = base = '';
     }
     parentheses = options.format.parentheses;
     semicolons = options.format.semicolons;
@@ -9998,7 +10008,7 @@ function getQualifiedJSXName(object) {
 function acornJsx(options) {
   options = options || {};
   return function(Parser) {
-    return plugin({
+    return plugin$1({
       allowNamespaces: options.allowNamespaces !== false,
       allowNamespacedObjects: !!options.allowNamespacedObjects
     }, Parser);
@@ -10008,13 +10018,13 @@ function acornJsx(options) {
 // This can be different instances from the actual `tokTypes` this plugin uses.
 Object.defineProperty(acornJsx, "tokTypes", {
   get: function get_tokTypes() {
-    return getJsxTokens(acorn).tokTypes
+    return getJsxTokens(_acorn).tokTypes
   },
   configurable: true,
   enumerable: true
 });
 
-function plugin(options, Parser) {
+function plugin$1(options, Parser) {
   const acorn = Parser.acorn || require("acorn");
   const acornJsx = getJsxTokens(acorn);
   const tt = acorn.tokTypes;
@@ -18331,6 +18341,294 @@ var serialize = function(node, options) {
     return serializer.serialize();
 };
 
+const leftCurlyBrace = "{".charCodeAt(0);
+const space = " ".charCodeAt(0);
+
+const withKeyword = "with";
+const assertKeyword = "assert";
+const FUNC_STATEMENT = 1, FUNC_NULLABLE_ID = 4;
+
+const importAttributes = plugin({ keyword: "with" });
+
+function plugin(options) {
+  return function(Parser) {
+    return pluginImpl(options, Parser);
+  };
+}
+
+function pluginImpl(options, Parser) {
+  // Use supplied version acorn version if present, to avoid
+  // reference mismatches due to different acorn versions. This
+  // allows this plugin to be used with Rollup which supplies
+  // its own internal version of acorn and thereby sidesteps
+  // the package manager.
+  const acorn = Parser.acorn || _acorn;
+  const { tokTypes: tt, TokenType } = acorn;
+  const { keyword } = options;
+  const isWithKeyword = keyword.includes(withKeyword);
+  const isAssertKeyword = keyword.includes(assertKeyword);
+  const isWithOrAssertKeyword = isWithKeyword && isAssertKeyword;
+
+  return class extends Parser {
+    constructor(...args) {
+      super(...args);
+      this.withToken = isWithKeyword && new TokenType(withKeyword);
+      this.assertToken = isAssertKeyword && new TokenType(assertKeyword);
+    }
+
+    _codeAt(i) {
+      return this.input.charCodeAt(i);
+    }
+
+    _eat(t) {
+      if (this.type !== t) {
+        this.unexpected();
+      }
+      this.next();
+    }
+
+    _matchKeywordToken() {
+      return (isWithOrAssertKeyword && (this.type === this.withToken || this.type === this.assertToken))
+        || (isWithKeyword && this.type === this.withToken)
+        || (isAssertKeyword && this.type === this.assertToken)
+    }
+
+    _getProperty() {
+      if (isWithOrAssertKeyword) {
+        return this.type === this.withToken ? "attributes" : "assertions";
+      }
+      return isWithKeyword ? "attributes" : "assertions";
+    }
+
+    readToken(code) {
+      let i = 0;
+      let keyword;
+      let token;
+      if (isWithOrAssertKeyword) {
+        if (this.input.slice(this.pos, this.pos + withKeyword.length) === withKeyword) {
+          keyword = withKeyword;
+          token = this.withToken;
+        } else if (this.input.slice(this.pos, this.pos + assertKeyword.length) === assertKeyword) {
+          keyword = assertKeyword;
+          token = this.assertToken;
+        } else {
+          return super.readToken(code);
+        }
+        i += keyword.length;
+      } else {
+        keyword = isWithKeyword ? withKeyword : assertKeyword;
+        token = isWithKeyword ? this.withToken : this.assertToken;
+        for (; i < keyword.length; i++) {
+          if (this._codeAt(this.pos + i) !== keyword.charCodeAt(i)) {
+            return super.readToken(code);
+          }
+        }
+      }
+
+      // ensure that the keyword is at the correct location
+      // ie `with{...` or `with {...`
+      for (;; i++) {
+        if (this._codeAt(this.pos + i) === leftCurlyBrace) {
+          // Found '{'
+          break;
+        } else if (this._codeAt(this.pos + i) === space) {
+          // white space is allowed between `with` and `{`, so continue.
+          continue;
+        } else {
+          return super.readToken(code);
+        }
+      }
+
+      // If we're inside a dynamic import expression we'll parse
+      // the `with` keyword as a standard object property name
+      // ie `import(""./foo.json", { with: { type: "json" } })`
+      if (this.type.label === "{") {
+        return super.readToken(code);
+      }
+
+      this.pos += keyword.length;
+      return this.finishToken(token);
+    }
+
+    parseDynamicImport(node) {
+      this.next(); // skip `(`
+
+      // Parse node.source.
+      node.source = this.parseMaybeAssign();
+
+      if (this.eat(tt.comma)) {
+        const expr = this.parseExpression();
+        node.arguments = [expr];
+      }
+      this._eat(tt.parenR);
+      return this.finishNode(node, "ImportExpression");
+    }
+
+    // ported from acorn/src/statement.js pp.parseExport
+    parseExport(node, exports) {
+      this.next();
+      // export * from '...'
+      if (this.eat(tt.star)) {
+        if (this.options.ecmaVersion >= 11) {
+          if (this.eatContextual("as")) {
+            node.exported = this.parseIdent(true);
+            this.checkExport(exports, node.exported.name, this.lastTokStart);
+          } else {
+            node.exported = null;
+          }
+        }
+        this.expectContextual("from");
+        if (this.type !== tt.string) { this.unexpected(); }
+        node.source = this.parseExprAtom();
+
+        if (this._matchKeywordToken()) {
+          const property = this._getProperty();
+          this.next();
+          const attributes = this.parseImportAttributes();
+          if (attributes) {
+            node[property] = attributes;
+          }
+        }
+
+        this.semicolon();
+        return this.finishNode(node, "ExportAllDeclaration")
+      }
+      if (this.eat(tt._default)) { // export default ...
+        this.checkExport(exports, "default", this.lastTokStart);
+        var isAsync;
+        if (this.type === tt._function || (isAsync = this.isAsyncFunction())) {
+          var fNode = this.startNode();
+          this.next();
+          if (isAsync) { this.next(); }
+          node.declaration = this.parseFunction(fNode, FUNC_STATEMENT | FUNC_NULLABLE_ID, false, isAsync);
+        } else if (this.type === tt._class) {
+          var cNode = this.startNode();
+          node.declaration = this.parseClass(cNode, "nullableID");
+        } else {
+          node.declaration = this.parseMaybeAssign();
+          this.semicolon();
+        }
+        return this.finishNode(node, "ExportDefaultDeclaration")
+      }
+      // export var|const|let|function|class ...
+      if (this.shouldParseExportStatement()) {
+        node.declaration = this.parseStatement(null);
+        if (node.declaration.type === "VariableDeclaration")
+          { this.checkVariableExport(exports, node.declaration.declarations); }
+        else
+          { this.checkExport(exports, node.declaration.id.name, node.declaration.id.start); }
+        node.specifiers = [];
+        node.source = null;
+      } else { // export { x, y as z } [from '...']
+        node.declaration = null;
+        node.specifiers = this.parseExportSpecifiers(exports);
+        if (this.eatContextual("from")) {
+          if (this.type !== tt.string) { this.unexpected(); }
+          node.source = this.parseExprAtom();
+
+          if (this._matchKeywordToken()) {
+            const property = this._getProperty();
+            this.next();
+            const attributes = this.parseImportAttributes();
+            if (attributes) {
+              node[property] = attributes;
+            }
+          }
+        } else {
+          for (var i = 0, list = node.specifiers; i < list.length; i += 1) {
+            // check for keywords used as local names
+            var spec = list[i];
+
+            this.checkUnreserved(spec.local);
+            // check if export is defined
+            this.checkLocalExport(spec.local);
+          }
+
+          node.source = null;
+        }
+        this.semicolon();
+      }
+      return this.finishNode(node, "ExportNamedDeclaration")
+    }
+
+    parseImport(node) {
+      this.next();
+      // import '...'
+      if (this.type === tt.string) {
+        node.specifiers = [];
+        node.source = this.parseExprAtom();
+      } else {
+        node.specifiers = this.parseImportSpecifiers();
+        this.expectContextual("from");
+        node.source =
+          this.type === tt.string ? this.parseExprAtom() : this.unexpected();
+      }
+
+      if (this._matchKeywordToken()) {
+        const property = this._getProperty();
+        this.next();
+        const attributes = this.parseImportAttributes();
+        if (attributes) {
+          node[property] = attributes;
+        }
+      }
+      this.semicolon();
+      return this.finishNode(node, "ImportDeclaration");
+    }
+
+    parseImportAttributes() {
+      this._eat(tt.braceL);
+      const attrs = this.parsewithEntries();
+      this._eat(tt.braceR);
+      return attrs;
+    }
+
+    parsewithEntries() {
+      const attrs = [];
+      const attrNames = new Set();
+
+      do {
+        if (this.type === tt.braceR) {
+          break;
+        }
+
+        const node = this.startNode();
+
+        // parse withionKey : IdentifierName, StringLiteral
+        let withionKeyNode;
+        if (this.type === tt.string) {
+          withionKeyNode = this.parseLiteral(this.value);
+        } else {
+          withionKeyNode = this.parseIdent(true);
+        }
+        this.next();
+        node.key = withionKeyNode;
+
+        // check if we already have an entry for an attribute
+        // if a duplicate entry is found, throw an error
+        // for now this logic will come into play only when someone declares `type` twice
+        if (attrNames.has(node.key.name)) {
+          this.raise(this.pos, "Duplicated key in attributes");
+        }
+        attrNames.add(node.key.name);
+
+        if (this.type !== tt.string) {
+          this.raise(
+            this.pos,
+            "Only string is supported as an attribute value"
+          );
+        }
+
+        node.value = this.parseLiteral(this.value);
+
+        attrs.push(this.finishNode(node, "ImportAttribute"));
+      } while (this.eat(tt.comma));
+
+      return attrs;
+    }
+  };
+}
+
 /* eslint-disable max-depth, complexity */
 // https://nodejs.org/api/esm.html#esm_loaders
 
@@ -18354,7 +18652,7 @@ function getParser(moduleURL) {
   }
 
   return {
-    parser: Parser$2.extend(acornJsx()),
+    parser: Parser$2.extend(acornJsx(), importAttributes),
     config: {
       // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
       ...base$1,
@@ -18561,7 +18859,7 @@ function parseJsx(moduleURL) {
   const hasOwnObservedAttributes = undefined;
   let inferredObservability = false;
   let observedAttributes = [];
-  let tree = Parser$2.extend(acornJsx()).parse(moduleContents, {
+  let tree = Parser$2.extend(acornJsx(), importAttributes).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   });
@@ -18750,12 +19048,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 : Parser$2;
   const config = customParser ? customParser.config : {
     ...base$1
   };
 
-  simple(parser.parse(moduleContents, {
+  simple(parser.extend(importAttributes).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -18795,13 +19093,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 : Parser$2;
   const config = customParser ? customParser.config : {
     ...base$1
   };
   let tagName;
 
-  simple(parser.parse(moduleContents, {
+  simple(parser.extend(importAttributes).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -18822,9 +19120,10 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
   }
 
   // https://github.com/ProjectEvergreen/wcc/pull/67/files#r902061804
-  const { pathname } = elementURL;
-  const element = customElements.get(tagName) ?? (await import(pathname)).default;
-  const dataLoader = (await import(pathname)).getData;
+  // https://github.com/ProjectEvergreen/wcc/pull/159
+  const { href } = elementURL;
+  const element = customElements.get(tagName) ?? (await import(href)).default;
+  const dataLoader = (await import(href)).getData;
   const data = props
     ? props
     : dataLoader

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
@@ -28,14 +28,14 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
+    "lint": "eslint --ignore-pattern \"*.json\" \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
     "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
     "docs:build": "node ./build.js",
     "docs:serve": "npm run clean && npm run docs:build && http-server ./dist --open",
-    "sandbox": "npm run clean && concurrently \"nodemon --experimental-loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "sandbox": "npm run clean && concurrently \"nodemon --loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
     "start": "npm run docs:serve",
     "test": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
-    "test:exp": "c8 node --experimental-loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
+    "test:exp": "c8 node --loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
     "test:tdd": "npm run test -- --watch",
     "test:tdd:exp": "npm run test:exp -- --watch",
     "dist": "rollup -c rollup.config.js",
@@ -45,10 +45,15 @@
     "@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"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/plugin-syntax-import-assertions": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
     "@ls-lint/ls-lint": "^1.10.0",
     "@mapbox/rehype-prism": "^0.8.0",
     "@rollup/plugin-commonjs": "^25.0.7",

package/src/dom-shim.js

@@ -1,5 +1,13 @@
 function noop() { }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
+class CSSStyleSheet {
+  insertRule() { }
+  deleteRule() { }
+  replace() { }
+  replaceSync() { }
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
 class EventTarget {
   constructor() {
@@ -93,6 +101,7 @@ class ShadowRoot extends DocumentFragment {
   constructor(options) {
     super();
     this.mode = options.mode || 'closed';
+    this.adoptedStyleSheets = [];
   }
 }
 
@@ -146,4 +155,5 @@ class CustomElementsRegistry {
 globalThis.addEventListener = globalThis.addEventListener ?? noop;
 globalThis.document = globalThis.document ?? new Document();
 globalThis.customElements = globalThis.customElements ?? new CustomElementsRegistry();
-globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
+globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
+globalThis.CSSStyleSheet = globalThis.CSSStyleSheet ?? CSSStyleSheet;

package/src/jsx-loader.js

@@ -6,6 +6,8 @@ import { generate } from '@projectevergreen/escodegen-esm';
 import fs from 'fs';
 import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
+// Need an acorn plugin for now - https://github.com/ProjectEvergreen/greenwood/issues/1218
+import { importAttributes } from 'acorn-import-attributes';
 
 const jsxRegex = /\.(jsx)$/;
 
@@ -29,7 +31,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 +238,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'
   });

package/src/wcc.js

@@ -7,6 +7,8 @@ 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';
+// Need an acorn plugin for now - https://github.com/ProjectEvergreen/greenwood/issues/1218
+import { importAttributes } from 'acorn-import-attributes';
 import fs from 'fs';
 
 function getParse(html) {
@@ -61,12 +63,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 +108,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'
   }), {
@@ -133,9 +135,10 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
   }
 
   // https://github.com/ProjectEvergreen/wcc/pull/67/files#r902061804
-  const { pathname } = elementURL;
-  const element = customElements.get(tagName) ?? (await import(pathname)).default;
-  const dataLoader = (await import(pathname)).getData;
+  // https://github.com/ProjectEvergreen/wcc/pull/159
+  const { href } = elementURL;
+  const element = customElements.get(tagName) ?? (await import(href)).default;
+  const dataLoader = (await import(href)).getData;
   const data = props
     ? props
     : dataLoader