fix: support ES module syntax (#435)

webpack-contrib · Dec 17, 2019 · dcbfadb · dcbfadb
1 parent d515edc
commit dcbfadb
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "babel-jest": "^24.9.0",
     "commitlint-azure-pipelines-cli": "^1.0.2",
     "cross-env": "^6.0.3",
-    "css-loader": "^3.3.2",
+    "css-loader": "webpack-contrib/css-loader#master",
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
     "es-check": "^5.1.0",

diff --git a/src/index.js b/src/index.js
@@ -32,7 +32,13 @@ if (module.hot) {
   module.hot.accept(
     ${loaderUtils.stringifyRequest(this, `!!${request}`)},
     function() {
-      update(require(${loaderUtils.stringifyRequest(this, `!!${request}`)}));
+      var newContent = require(${loaderUtils.stringifyRequest(
+        this,
+        `!!${request}`
+      )});
+      newContent = newContent.__esModule ? newContent.default : newContent;
+
+      update(newContent);
     }
   );
 
@@ -46,13 +52,13 @@ if (module.hot) {
 
 options.insert = ${insert};
 
+var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)});
+content = content.__esModule ? content.default : content;
+
 var update = require(${loaderUtils.stringifyRequest(
         this,
         `!${path.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`
-      )})(require(${loaderUtils.stringifyRequest(
-        this,
-        `!!${request}`
-      )}), options);
+      )})(content, options);
 ${hmrCode}`;
     }
 
@@ -90,6 +96,8 @@ if (module.hot) {
       return `var refs = 0;
 var dispose;
 var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)});
+content = content.__esModule ? content.default : content;
+
 var options = ${JSON.stringify(options)};
 
 options.insert = ${insert};
@@ -140,6 +148,7 @@ if (module.hot) {
           this,
           `!!${request}`
         )});
+        newContent = newContent.__esModule ? newContent.default : newContent;
 
         if (typeof newContent === 'string') {
           newContent = [[module.id, newContent, '']];
@@ -160,6 +169,7 @@ if (module.hot) {
         this,
         `!!${request}`
       )});
+content = content.__esModule ? content.default : content;
 
 if (typeof content === 'string') {
   content = [[module.id, content, '']];

diff --git a/src/runtime/injectStylesIntoLinkTag.js b/src/runtime/injectStylesIntoLinkTag.js
@@ -44,7 +44,7 @@ module.exports = (url, options) => {
   const link = document.createElement('link');
 
   link.rel = 'stylesheet';
-  link.href = url.__esModule ? url.default : url;
+  link.href = url;
 
   Object.keys(options.attributes).forEach((key) => {
     link.setAttribute(key, options.attributes[key]);

diff --git a/test/loader.test.js b/test/loader.test.js
@@ -170,6 +170,46 @@ describe('loader', () => {
       expect(stats.compilation.errors).toMatchSnapshot('errors');
     });
 
+    // Uncomment after `css-loader` release the `esModule` option
+    // if (
+    //   [
+    //     'styleTag',
+    //     'singletonStyleTag',
+    //     'lazyStyleTag',
+    //     'lazySingletonStyleTag',
+    //   ].includes(injectType)
+    // ) {
+    //   it(`should work when the "injectType" option is "${injectType}" and "css-loader" uses ES module syntax`, async () => {
+    //     const testId = getTestId('simple.js', injectType);
+    //     const stats = await compile(testId, {
+    //       loader: { options: { injectType } },
+    //       cssLoader: { options: { esModule: true } },
+    //     });
+    //
+    //     runTestInJsdom(stats, (dom) => {
+    //       expect(dom.serialize()).toMatchSnapshot('DOM');
+    //     });
+    //
+    //     expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    //     expect(stats.compilation.errors).toMatchSnapshot('errors');
+    //   });
+    //
+    //   it(`should work when the "injectType" option is "${injectType}" and "css-loader" uses CommonJS module syntax`, async () => {
+    //     const testId = getTestId('simple.js', injectType);
+    //     const stats = await compile(testId, {
+    //       loader: { options: { injectType } },
+    //       cssLoader: { options: { esModule: true } },
+    //     });
+    //
+    //     runTestInJsdom(stats, (dom) => {
+    //       expect(dom.serialize()).toMatchSnapshot('DOM');
+    //     });
+    //
+    //     expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    //     expect(stats.compilation.errors).toMatchSnapshot('errors');
+    //   });
+    // }
+
     if (['lazyStyleTag', 'lazySingletonStyleTag'].includes(injectType)) {
       it(`should work when ref is negative when the "injectType" option is "${injectType}"`, async () => {
         expect.assertions(3);

diff --git a/test/manual/src/index.js b/test/manual/src/index.js
@@ -1,5 +1,5 @@
 /* eslint-env browser */
-
+/* eslint-disable no-console */
 import './style.css';
 import './other-style.scss';
 import component from './component.module.css';
@@ -9,6 +9,12 @@ import componentLazy from './component.lazy.module.css';
 import './style.link.css';
 import './custom-square';
 
+console.log('___LOCALS___');
+console.log(component);
+
+console.log('___LOCALS_LAZY___');
+console.log(componentLazy);
+
 styleLazy.use();
 otherStyleLazy.use();
 

diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js
@@ -5,6 +5,11 @@ const ENABLE_SOURCE_MAP =
     ? Boolean(process.env.SOURCE_MAP)
     : false;
 
+const ENABLE_ES_MODULE =
+  typeof process.env.ES_MODULE !== 'undefined'
+    ? Boolean(process.env.ES_MODULE)
+    : false;
+
 module.exports = {
   devtool: ENABLE_SOURCE_MAP ? 'source-map' : false,
   mode: 'development',
@@ -29,6 +34,7 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: ENABLE_SOURCE_MAP,
+              esModule: ENABLE_ES_MODULE,
             },
           },
         ],
@@ -44,6 +50,7 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: ENABLE_SOURCE_MAP,
+              esModule: ENABLE_ES_MODULE,
               modules: true,
             },
           },
@@ -60,6 +67,7 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: ENABLE_SOURCE_MAP,
+              esModule: ENABLE_ES_MODULE,
             },
           },
         ],
@@ -75,6 +83,7 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: ENABLE_SOURCE_MAP,
+              esModule: ENABLE_ES_MODULE,
               modules: true,
             },
           },
@@ -104,6 +113,7 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: ENABLE_SOURCE_MAP,
+              esModule: ENABLE_ES_MODULE,
             },
           },
           {
@@ -127,6 +137,7 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: ENABLE_SOURCE_MAP,
+              esModule: ENABLE_ES_MODULE,
             },
           },
           {