feat: support es modules for assets loader (#984)

Author: evilebottnawi

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/__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;
   }

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\\""`;

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();
   });
 });

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();
   });
 });