fix: esModule option issue (#476)

Author: dangreen

src/index.js

@@ -26,8 +26,12 @@ loaderApi.pitch = function loader(request) {
   const injectType = options.injectType || 'styleTag';
   const esModule =
     typeof options.esModule !== 'undefined' ? options.esModule : false;
-
-  delete options.esModule;
+  const runtimeOptions = {
+    injectType: options.injectType,
+    attributes: options.attributes,
+    insert: options.insert,
+    base: options.base,
+  };
 
   switch (injectType) {
     case 'linkTag': {
@@ -80,7 +84,7 @@ if (module.hot) {
             content = content.__esModule ? content.default : content;`
       }
 
-var options = ${JSON.stringify(options)};
+var options = ${JSON.stringify(runtimeOptions)};
 
 options.insert = ${insert};
 
@@ -177,7 +181,7 @@ if (module.hot) {
 
 var refs = 0;
 var update;
-var options = ${JSON.stringify(options)};
+var options = ${JSON.stringify(runtimeOptions)};
 
 options.insert = ${insert};
 options.singleton = ${isSingleton};
@@ -287,7 +291,7 @@ if (module.hot) {
             }`
       }
 
-var options = ${JSON.stringify(options)};
+var options = ${JSON.stringify(runtimeOptions)};
 
 options.insert = ${insert};
 options.singleton = ${isSingleton};

test/esModule-option.test.js

@@ -17,8 +17,16 @@ describe('"esModule" option', () => {
     'lazySingletonStyleTag',
     'linkTag',
   ];
+  const commonjsExports = {
+    styleTag: 'module.exports = content.locals || {}',
+    singletonStyleTag: 'module.exports = content.locals || {}',
+    lazyStyleTag: 'module.exports = exported',
+    lazySingletonStyleTag: 'module.exports = exported',
+  };
 
   injectTypes.forEach((injectType) => {
+    const commonjsExport = commonjsExports[injectType];
+
     it(`should work when not specified and when the "injectType" option is "${injectType}"`, async () => {
       const entry = getEntryByInjectType('simple.js', injectType);
       const compiler = getCompiler(entry, { injectType });
@@ -37,8 +45,12 @@ describe('"esModule" option', () => {
       const compiler = getCompiler(entry, { injectType, esModule: true });
       const stats = await compile(compiler);
 
-      runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+      runInJsDom('main.bundle.js', compiler, stats, (dom, bundle) => {
         expect(dom.serialize()).toMatchSnapshot('DOM');
+
+        if (commonjsExport) {
+          expect(bundle).not.toEqual(expect.stringContaining(commonjsExport));
+        }
       });
 
       expect(getWarnings(stats)).toMatchSnapshot('warnings');
@@ -74,8 +86,12 @@ describe('"esModule" option', () => {
       );
       const stats = await compile(compiler);
 
-      runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+      runInJsDom('main.bundle.js', compiler, stats, (dom, bundle) => {
         expect(dom.serialize()).toMatchSnapshot('DOM');
+
+        if (commonjsExport) {
+          expect(bundle).not.toEqual(expect.stringContaining(commonjsExport));
+        }
       });
 
       expect(getWarnings(stats)).toMatchSnapshot('warnings');
@@ -117,8 +133,12 @@ describe('"esModule" option', () => {
       );
       const stats = await compile(compiler);
 
-      runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+      runInJsDom('main.bundle.js', compiler, stats, (dom, bundle) => {
         expect(dom.serialize()).toMatchSnapshot('DOM');
+
+        if (commonjsExport) {
+          expect(bundle).not.toEqual(expect.stringContaining(commonjsExport));
+        }
       });
 
       expect(getWarnings(stats)).toMatchSnapshot('warnings');
@@ -130,8 +150,12 @@ describe('"esModule" option', () => {
       const compiler = getCompiler(entry, { injectType, esModule: false });
       const stats = await compile(compiler);
 
-      runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+      runInJsDom('main.bundle.js', compiler, stats, (dom, bundle) => {
         expect(dom.serialize()).toMatchSnapshot('DOM');
+
+        if (commonjsExport) {
+          expect(bundle).toEqual(expect.stringContaining(commonjsExport));
+        }
       });
 
       expect(getWarnings(stats)).toMatchSnapshot('warnings');
@@ -167,8 +191,12 @@ describe('"esModule" option', () => {
       );
       const stats = await compile(compiler);
 
-      runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+      runInJsDom('main.bundle.js', compiler, stats, (dom, bundle) => {
         expect(dom.serialize()).toMatchSnapshot('DOM');
+
+        if (commonjsExport) {
+          expect(bundle).toEqual(expect.stringContaining(commonjsExport));
+        }
       });
 
       expect(getWarnings(stats)).toMatchSnapshot('warnings');
@@ -210,8 +238,12 @@ describe('"esModule" option', () => {
       );
       const stats = await compile(compiler);
 
-      runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+      runInJsDom('main.bundle.js', compiler, stats, (dom, bundle) => {
         expect(dom.serialize()).toMatchSnapshot('DOM');
+
+        if (commonjsExport) {
+          expect(bundle).toEqual(expect.stringContaining(commonjsExport));
+        }
       });
 
       expect(getWarnings(stats)).toMatchSnapshot('warnings');

test/fixtures/simple.js

@@ -1,2 +1,2 @@
-import './style.css';
-import './style-other.css';
+import a from './style.css';
+import b from './style-other.css';

test/helpers/runInJsDom.js

@@ -32,7 +32,7 @@ function runInJsDom(assetName, compiler, stats, testFn) {
 
     dom.window.eval(bundle);
 
-    testFn(dom);
+    testFn(dom, bundle);
 
     // free memory associated with the window
     dom.window.close();