fix: allow using limit as string when you use loader with query string (#185)

Author: evilebottnawi

README.md

@@ -118,7 +118,7 @@ module.exports = {
 
 ### `limit`
 
-Type: `Number|Boolean`
+Type: `Number|Boolean|String`
 Default: `undefined`
 
 The limit can be specified via loader options and defaults to no limit.

src/index.js

@@ -16,7 +16,7 @@ function shouldTransform(limit, size) {
     return limit;
   }
 
-  if (typeof limit === 'number') {
+  if (typeof limit === 'number' || typeof limit === 'string') {
     return size <= parseInt(limit, 10);
   }
 

src/options.json

@@ -2,7 +2,7 @@
   "type": "object",
   "properties": {
     "limit": {
-      "type": ["boolean", "number"]
+      "type": ["boolean", "number", "string"]
     },
     "mimetype": {
       "type": "string"

test/__snapshots__/limit-option.test.js.snap

@@ -3,7 +3,7 @@
 exports[`validation 1`] = `
 "URL Loader Invalid Options
 
-options.limit should be boolean,number
+options.limit should be boolean,number,string
 "
 `;
 

test/__snapshots__/loader.test.js.snap

@@ -163,4 +163,89 @@ describe('limit option', () => {
 
     expect(source).toMatchSnapshot();
   });
+
+  it('0 ({String})', async () => {
+    // Image size is 6777
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: '0',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
+
+  it('0.1 ({String})', async () => {
+    // Image size is 6777
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: '0.1',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
+
+  it('6776 ({String})', async () => {
+    // Image size is 6777
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: '6776',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
+
+  it('6777 ({String})', async () => {
+    // Image size is 6777
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: '6777',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
+
+  it('6778 ({String})', async () => {
+    // Image size is 6777
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: '6778',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
 });

test/__snapshots__/mimetype-option.test.js.snap

@@ -10,8 +10,30 @@ describe('Loader', () => {
     };
 
     const stats = await webpack('fixture.js', config);
-    const [{ source }] = stats.toJson().modules;
+    const { modules, errors, warnings } = stats.toJson();
 
-    expect(source).toMatchSnapshot();
+    expect(modules[0].source).toMatchSnapshot();
+    expect(errors).toMatchSnapshot('errors');
+    expect(warnings).toMatchSnapshot('warnings');
+  });
+
+  it('should works when limit as a query string', async () => {
+    const config = {
+      rules: [
+        {
+          test: /\.png$/,
+          use: {
+            loader: `${require.resolve('../src')}?limit=10000`,
+          },
+        },
+      ],
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const { modules, errors, warnings } = stats.toJson();
+
+    expect(modules[0].source).toMatchSnapshot();
+    expect(errors).toMatchSnapshot('errors');
+    expect(warnings).toMatchSnapshot('warnings');
   });
 });

test/__snapshots__/validate-options.test.js.snap

@@ -30,4 +30,20 @@ describe('mimetype option', () => {
 
     expect(source).toMatchSnapshot();
   });
+
+  it('unknown ({String})', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          mimetype: 'unknown/unknown',
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
 });

test/limit-option.test.js

@@ -19,7 +19,8 @@ it('validation', async () => {
 
   expect(() => validate({ limit: 8192 })).not.toThrow();
   expect(() => validate({ limit: true })).not.toThrow();
-  expect(() => validate({ limit: '8192' })).toThrowErrorMatchingSnapshot();
+  expect(() => validate({ limit: '8192' })).not.toThrow();
+  expect(() => validate({ limit: [] })).toThrowErrorMatchingSnapshot();
 
   expect(() => validate({ mimetype: 'image/png' })).not.toThrow();
   expect(() => validate({ mimetype: true })).toThrowErrorMatchingSnapshot();