Repository: webpack-contrib/css-loader
Pull request #984 (2019-08-06 11:53:20)

feat: support es modules for assets loader
<!--
  HOLY CRAP a Pull Request. We ❤️ those!

  If you remove or skip this template, you'll make the 🐼 sad and the mighty god
  of Github will appear and pile-drive the close button from a great height
  while making animal noises.

  Please place an x (no spaces!) in all [ ] that apply
-->

This PR contains a:

- [ ] **bugfix**
- [x] new **feature**
- [ ] **code refactor**
- [x] **test update** <!-- if bug or feature is checked, this should be too -->
- [ ] **typo fix**
- [ ] **metadata update**

### Motivation / Use-Case

no you can use `export default` for asset loader (fox example file-loader)

### Breaking Changes

No

### Additional Info

No


Patch:
diff --git a/src/runtime/getUrl.js b/src/runtime/getUrl.js
index 1053c9d..9b8b136 100644
--- a/src/runtime/getUrl.js
+++ b/src/runtime/getUrl.js
@@ -1,4 +1,7 @@
 module.exports = (url, needQuotes) => {
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  url = url.__esModule ? url.default : url;
+
   if (typeof url !== 'string') {
     return url;
   }


Test patch:
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
index fdf3f54..9c865cf 100644
--- a/test/__snapshots__/loader.test.js.snap
+++ b/test/__snapshots__/loader.test.js.snap
@@ -103,6 +103,9 @@ exports[`loader should compile with \`css\` entry point (with \`modules\` and sc
 
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`global\`): escape 1`] = `
 "module.exports = (url, needQuotes) => {
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  url = url.__esModule ? url.default : url;
+
   if (typeof url !== 'string') {
     return url;
   }
@@ -393,6 +396,9 @@ exports[`loader should compile with \`css\` entry point (with \`modules\` and sc
 
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`local\`): escape 1`] = `
 "module.exports = (url, needQuotes) => {
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  url = url.__esModule ? url.default : url;
+
   if (typeof url !== 'string') {
     return url;
   }
@@ -707,6 +713,9 @@ exports[`loader should compile with \`css\` entry point: errors 1`] = `Array []`
 
 exports[`loader should compile with \`css\` entry point: escape 1`] = `
 "module.exports = (url, needQuotes) => {
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  url = url.__esModule ? url.default : url;
+
   if (typeof url !== 'string') {
     return url;
   }
@@ -997,6 +1006,9 @@ exports[`loader should compile with \`js\` entry point: errors 1`] = `Array []`;
 
 exports[`loader should compile with \`js\` entry point: escape 1`] = `
 "module.exports = (url, needQuotes) => {
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  url = url.__esModule ? url.default : url;
+
   if (typeof url !== 'string') {
     return url;
   }
diff --git a/test/runtime/__snapshots__/getUrl.test.js.snap b/test/runtime/__snapshots__/getUrl.test.js.snap
index b26876d..f03378f 100644
--- a/test/runtime/__snapshots__/getUrl.test.js.snap
+++ b/test/runtime/__snapshots__/getUrl.test.js.snap
@@ -23,3 +23,25 @@ exports[`escape should escape url 10`] = `"\\"image.png\\""`;
 exports[`escape should escape url 11`] = `"\\"image other.png\\""`;
 
 exports[`escape should escape url 12`] = `"\\"image other.png\\""`;
+
+exports[`escape should escape url 13`] = `"image.png"`;
+
+exports[`escape should escape url 14`] = `"image.png"`;
+
+exports[`escape should escape url 15`] = `"image.png"`;
+
+exports[`escape should escape url 16`] = `"\\"image other.png\\""`;
+
+exports[`escape should escape url 17`] = `"\\"image other.png\\""`;
+
+exports[`escape should escape url 18`] = `"\\"image other.png\\""`;
+
+exports[`escape should escape url 19`] = `"\\"image\\\\\\"other.png\\""`;
+
+exports[`escape should escape url 20`] = `"\\"image\\\\nother.png\\""`;
+
+exports[`escape should escape url 21`] = `"\\"image.png\\""`;
+
+exports[`escape should escape url 22`] = `"\\"image.png\\""`;
+
+exports[`escape should escape url 23`] = `"\\"image.png\\""`;
diff --git a/test/runtime/api.test.js b/test/runtime/api.test.js
index 86b3372..b407af5 100644
--- a/test/runtime/api.test.js
+++ b/test/runtime/api.test.js
@@ -21,46 +21,62 @@ describe('api', () => {
 
   it('should toString a single module', () => {
     const m = api();
+
     m.push([1, 'body { a: 1; }', '']);
+
     expect(m.toString()).toMatchSnapshot();
   });
+
   it('should toString multiple modules', () => {
     const m = api();
+
     m.push([2, 'body { b: 2; }', '']);
     m.push([1, 'body { a: 1; }', '']);
+
     expect(m.toString()).toMatchSnapshot();
   });
+
   it('should toString with media query', () => {
     const m = api();
+
     m.push([1, 'body { a: 1; }', 'screen']);
+
     expect(m.toString()).toMatchSnapshot();
   });
+
   it('should import modules', () => {
     const m = api();
     const m1 = [1, 'body { a: 1; }', 'screen'];
     const m2 = [2, 'body { b: 2; }', ''];
     const m3 = [3, 'body { c: 3; }', ''];
     const m4 = [4, 'body { d: 4; }', ''];
+
     m.i([m2, m3], '');
     m.i([m2], '');
     m.i([m2, m4], 'print');
     m.push(m1);
+
     expect(m.toString()).toMatchSnapshot();
   });
+
   it('should import named modules', () => {
     const m = api();
     const m1 = ['./module1', 'body { a: 1; }', 'screen'];
     const m2 = ['./module2', 'body { b: 2; }', ''];
     const m3 = ['./module3', 'body { c: 3; }', ''];
     const m4 = ['./module4', 'body { d: 4; }', ''];
+
     m.i([m2, m3], '');
     m.i([m2], '');
     m.i([m2, m4], 'print');
     m.push(m1);
+
     expect(m.toString()).toMatchSnapshot();
   });
+
   it('should toString with source mapping', () => {
     const m = api(true);
+
     m.push([
       1,
       'body { a: 1; }',
@@ -72,11 +88,15 @@ describe('api', () => {
         sourceRoot: 'webpack://',
       },
     ]);
+
     expect(m.toString()).toMatchSnapshot();
   });
+
   it('should toString without source mapping if btoa not avalibale', () => {
     global.btoa = null;
+
     const m = api(true);
+
     m.push([
       1,
       'body { a: 1; }',
@@ -88,6 +108,7 @@ describe('api', () => {
         sourceRoot: 'webpack://',
       },
     ]);
+
     expect(m.toString()).toMatchSnapshot();
   });
 });
diff --git a/test/runtime/getUrl.test.js b/test/runtime/getUrl.test.js
index efd9f8c..6f3304d 100644
--- a/test/runtime/getUrl.test.js
+++ b/test/runtime/getUrl.test.js
@@ -15,5 +15,40 @@ describe('escape', () => {
     expect(getUrl('image.png', true)).toMatchSnapshot();
     expect(getUrl("'image other.png'", true)).toMatchSnapshot();
     expect(getUrl('"image other.png"', true)).toMatchSnapshot();
+
+    expect(
+      getUrl({ default: 'image.png', __esModule: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: "'image.png'", __esModule: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: '"image.png"', __esModule: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: 'image other.png', __esModule: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: '"image other.png"', __esModule: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: "'image other.png'", __esModule: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: 'image"other.png', __esModule: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: 'image\nother.png', __esModule: true })
+    ).toMatchSnapshot();
+
+    expect(
+      getUrl({ default: 'image.png', __esModule: true }, true)
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: "'image.png'", __esModule: true }, true)
+    ).toMatchSnapshot();
+    expect(
+      getUrl({ default: '"image.png"', __esModule: true }, true)
+    ).toMatchSnapshot();
   });
 });