fix: support ES module syntax

Author: alexander-akait

package-lock.json

@@ -27,7 +27,7 @@
     "test:only": "cross-env NODE_ENV=test jest",
     "test:watch": "cross-env NODE_ENV=test jest --watch",
     "test:coverage": "cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage",
-    "test:manual": "webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
+    "test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
     "pretest": "npm run lint",
     "test": "cross-env NODE_ENV=test npm run test:coverage",
     "defaults": "webpack-defaults"
@@ -45,9 +45,9 @@
     "webpack-sources": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.0",
-    "@babel/core": "^7.5.4",
-    "@babel/preset-env": "^7.5.4",
+    "@babel/cli": "^7.7.5",
+    "@babel/core": "^7.7.5",
+    "@babel/preset-env": "^7.7.6",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
     "@webpack-contrib/defaults": "^5.0.2",
@@ -56,23 +56,23 @@
     "babel-jest": "^24.8.0",
     "commitlint-azure-pipelines-cli": "^1.0.2",
     "cross-env": "^5.2.0",
-    "css-loader": "^3.0.0",
+    "css-loader": "^3.3.2",
     "del": "^4.1.1",
     "del-cli": "^1.1.0",
     "es-check": "^5.0.0",
-    "eslint": "^6.0.1",
+    "eslint": "^6.7.2",
     "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-import": "^2.19.1",
     "file-loader": "^4.0.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
-    "jest-junit": "^6.4.0",
-    "lint-staged": "^9.2.0",
+    "jest-junit": "^10.0.0",
+    "lint-staged": "^9.5.0",
     "memory-fs": "^0.4.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.18.2",
-    "standard-version": "^6.0.1",
-    "webpack": "^4.35.3",
+    "prettier": "^1.19.1",
+    "standard-version": "^7.0.1",
+    "webpack": "^4.41.3",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"
   },

package.json

@@ -179,7 +179,9 @@ export function pitch(request) {
 
     try {
       let dependencies;
-      const exports = evalModuleCode(this, source, request);
+      let exports = evalModuleCode(this, source, request);
+      // eslint-disable-next-line no-underscore-dangle
+      exports = exports.__esModule ? exports.default : exports;
       locals = exports && exports.locals;
       if (!Array.isArray(exports)) {
         dependencies = [[null, exports]];

src/loader.js

@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+

test/cases/simple-commonjs-syntax/expected/main.css

@@ -0,0 +1 @@
+import './style.css';

test/cases/simple-commonjs-syntax/index.js

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

test/cases/simple-commonjs-syntax/style.css

@@ -0,0 +1,25 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          {
+            loader: 'css-loader',
+            // TODO Uncomment after `css-loader` release the `esModule` option
+            // options: { esModule: false },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/simple-commonjs-syntax/webpack.config.js

@@ -0,0 +1,12 @@
+.a {
+  background: red;
+}
+
+.foo__style__b {
+  color: green;
+}
+
+.c {
+  color: blue;
+}
+

test/cases/simple-css-modules-mode-global/expected/main.css

@@ -0,0 +1 @@
+import './style.css';

test/cases/simple-css-modules-mode-global/index.js

@@ -0,0 +1,11 @@
+.a {
+  background: red;
+}
+
+:local(.b) {
+  color: green;
+}
+
+:global(.c) {
+  color: blue;
+}

test/cases/simple-css-modules-mode-global/style.css

@@ -0,0 +1,29 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                mode: 'global',
+                localIdentName: 'foo__[name]__[local]',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/simple-css-modules-mode-global/webpack.config.js

@@ -0,0 +1,12 @@
+.foo__style__a {
+  background: red;
+}
+
+.foo__style__b {
+  color: green;
+}
+
+.c {
+  color: blue;
+}
+

test/cases/simple-css-modules-mode-local/expected/main.css

@@ -0,0 +1 @@
+import './style.css';

test/cases/simple-css-modules-mode-local/index.js

@@ -0,0 +1,11 @@
+.a {
+  background: red;
+}
+
+:local(.b) {
+  color: green;
+}
+
+:global(.c) {
+  color: blue;
+}

test/cases/simple-css-modules-mode-local/style.css

@@ -0,0 +1,29 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                mode: 'local',
+                localIdentName: 'foo__[name]__[local]',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/simple-css-modules-mode-local/webpack.config.js

@@ -0,0 +1,4 @@
+.foo__style__a {
+  background: red;
+}
+

test/cases/simple-css-modules-mode-pure/expected/main.css

@@ -0,0 +1 @@
+import './style.css';

test/cases/simple-css-modules-mode-pure/index.js

@@ -0,0 +1,3 @@
+.a {
+  background: red;
+}

test/cases/simple-css-modules-mode-pure/style.css

@@ -0,0 +1,29 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                mode: 'pure',
+                localIdentName: 'foo__[name]__[local]',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/simple-css-modules-mode-pure/webpack.config.js

@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+

test/cases/simple-es-module-syntax/expected/main.css

@@ -0,0 +1 @@
+import './style.css';

test/cases/simple-es-module-syntax/index.js

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

test/cases/simple-es-module-syntax/style.css

@@ -0,0 +1,25 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          {
+            loader: 'css-loader',
+            // TODO Uncomment after `css-loader` release the `esModule` option
+            // options: { esModule: true },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/simple-es-module-syntax/webpack.config.js

@@ -29,6 +29,18 @@
   <div class="test initial-css">
     Initial CSS: Must be green
   </div>
+  <div class="hot-reload">
+    <p>Hot Module Replacement</p>
+    <div class="r">RED</div>
+    <div class="g">GREEN</div>
+    <div class="b">BLUE</div>
+  </div>
+  <div class="hot-reload">
+    <p>Hot Module Replacement + CSS modules</p>
+    <div class="rr">RED</div>
+    <div class="gg">GREEN</div>
+    <div class="bb">BLUE</div>
+  </div>
   <div class="test lazy-css">
     <p>Lazy CSS: Must be red, but turn green when <button class="lazy-button">pressing this button</button>.</p>
     <p>But turn orange, when <button class="lazy-button2">pressing this button</button>. Additional clicks have no effect.</p>

test/manual/index.html

@@ -3,6 +3,25 @@
 /* eslint-disable no-console, camelcase, no-global-assign */
 
 import './initial.css';
+import './simple.css';
+import classes from './simple.module.css';
+
+console.log('___CLASSES__');
+console.log(classes);
+
+function replaceClass(originalClass, newClass) {
+  const nodes = document.querySelectorAll(`.${originalClass}`);
+
+  nodes.forEach((node) => {
+    const { classList } = node;
+    classList.remove(originalClass);
+    classList.add(newClass);
+  });
+}
+
+Object.keys(classes).forEach((localClass) => {
+  replaceClass(localClass, classes[localClass]);
+});
 
 const handleError = (err) => {
   document.querySelector('.errors').textContent += `\n${err.toString()}`;

test/manual/src/index.js

@@ -0,0 +1,11 @@
+.r {
+  color: red;
+}
+
+.g {
+  color: green;
+}
+
+.b {
+  color: blue;
+}

test/manual/src/simple.css

@@ -0,0 +1,11 @@
+.rr {
+  color: red;
+}
+
+.gg {
+  color: green;
+}
+
+.bb {
+  color: blue;
+}