Add ESM support

karma.conf.js

@@ -165,9 +165,13 @@ module.exports = (config) => {
             }),
             coverage && rollupPluginInstrumentTsCode(),
             rollupPluginInjectCode({
-              'index.js': {
-                line: 3,
-                code: "    if ('adoptedStyleSheets' in document) { return; }\n",
+              insertions: {
+                'index.js': [
+                  {
+                    line: 3,
+                    code: "    if ('adoptedStyleSheets' in document) { return; }\n",
+                  },
+                ],
               },
             }),
           ].filter(Boolean),

package.json

@@ -3,12 +3,20 @@
   "version": "3.0.6",
   "description": "Constructible style sheets/adopted style sheets polyfill",
   "main": "dist/adoptedStyleSheets.js",
-  "module": "dist/adoptedStyleSheets.js",
+  "module": "dist/adoptedStyleSheets.mjs",
   "types": "dist/adoptedStyleSheets.d.ts",
   "files": [
     "dist/adoptedStyleSheets.js",
-    "dist/adoptedStyleSheets.d.ts"
+    "dist/adoptedStyleSheets.d.ts",
+    "dist/adoptedStyleSheets.mjs"
   ],
+  "exports": {
+    ".": {
+      "import": "dist/adoptedStyleSheets.mjs",
+      "require": "dist/adoptedStyleSheets.js",
+      "types": "dist/adoptedStyleSheets.d.ts"
+    }
+  },
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "test": "karma start",

plugins/rollup-plugin-inject-code.js

@@ -1,13 +1,26 @@
-module.exports = (options) => ({
+module.exports = ({insertions, processLine = (line) => line}) => ({
   name: 'inject-code',
   async generateBundle(_, assets) {
-    for (const chunkName in options) {
+    Object.entries(insertions).forEach(([chunkName, chunkInsertions]) => {
       const chunk = assets[chunkName];
-      const {line, code} = options[chunkName];
 
-      const lines = chunk.code.split('\n');
-      lines.splice(line, 0, code);
-      chunk.code = lines.join('\n');
-    }
-  }
+      const lines = chunk.code.split('\n').map(processLine);
+
+      for (const {line, code} of chunkInsertions) {
+        switch (line) {
+          case -Infinity:
+            lines.unshift(code);
+            break;
+          case Infinity:
+            lines.push(code);
+            break;
+          default:
+            lines.splice(line, 0, code);
+            break;
+        }
+
+        chunk.code = lines.join('\n');
+      }
+    });
+  },
 });

rollup.config.js

@@ -8,11 +8,48 @@ const extensions = ['.ts', '.js'];
 
 module.exports = {
   input: 'src/index.ts',
-  output: {
-    file: 'dist/adoptedStyleSheets.js',
-    format: 'iife',
-    name: 'adoptedStyleSheets',
-  },
+  output: [
+    {
+      file: 'dist/adoptedStyleSheets.js',
+      format: 'iife',
+      name: 'adoptedStyleSheets',
+      plugins: [
+        injectCode({
+          insertions: {
+            'adoptedStyleSheets.js': [
+              {
+                line: 3,
+                code: "    if (typeof document === 'undefined' || 'adoptedStyleSheets' in document) { return; }\n",
+              },
+            ],
+          },
+        }),
+      ],
+    },
+    {
+      file: 'dist/adoptedStyleSheets.mjs',
+      format: 'esm',
+      plugins: [
+        injectCode({
+          insertions: {
+            'adoptedStyleSheets.mjs': [
+              {
+                line: -Infinity,
+                code: "if (typeof document === 'undefined' || 'adoptedStyleSheets' in document) {\n",
+              },
+              {
+                line: Infinity,
+                code: '}',
+              },
+            ],
+          },
+          processLine(line) {
+            return `    ${line}`;
+          },
+        }),
+      ],
+    },
+  ],
   plugins: [
     nodeResolve({
       extensions,
@@ -33,12 +70,5 @@ module.exports = {
         },
       ],
     }),
-    injectCode({
-      'adoptedStyleSheets.js': {
-        line: 3,
-        code:
-          "    if (typeof document === 'undefined' || 'adoptedStyleSheets' in document) { return; }\n",
-      },
-    }),
   ],
 };