feat: limit option can be boolean (#181)

Author: evilebottnawi

README.md

@@ -91,16 +91,18 @@ For example, to set the quality option of a responsive-loader above use:
 
 ### `limit`
 
-Type: `Number`
+Type: `Number|Boolean`
 Default: `undefined`
 
+The limit can be specified via loader options and defaults to no limit.
+
+#### `Number`
+
 A `Number` specifying the maximum size of a file in bytes. If the file size is
 **equal** or **greater** than the limit [`file-loader`](https://github.com/webpack-contrib/file-loader) 
 will be used (by default) and all query parameters are passed to it. 
 Using an alternative to `file-loader` is enabled via the `fallback` option.
 
-The limit can be specified via loader options and defaults to no limit.
-
 ```js
 // webpack.config.js
 {
@@ -111,6 +113,21 @@ The limit can be specified via loader options and defaults to no limit.
 }
 ```
 
+#### `Boolean`
+
+Enable or disable transform files into base64.
+
+```js
+// webpack.config.js
+{
+  loader: 'url-loader',
+  options: {
+    // Disable transformation to base64
+    limit: false
+  }
+}
+```
+
 ### `mimetype`
 
 Type: `String`

src/index.js

@@ -11,17 +11,26 @@ import mime from 'mime';
 import normalizeFallback from './utils/normalizeFallback';
 import schema from './options.json';
 
+function shouldTransform(limit, size) {
+  if (typeof limit === 'boolean') {
+    return limit;
+  }
+
+  if (typeof limit === 'number') {
+    return size <= parseInt(limit, 10);
+  }
+
+  return true;
+}
+
 export default function loader(src) {
   // Loader Options
   const options = getOptions(this) || {};
 
   validateOptions(schema, options, 'URL Loader');
 
-  // Set limit for resource inlining (file size)
-  const limit = options.limit ? parseInt(options.limit, 10) : options.limit;
-
   // No limit or within the specified limit
-  if ((!limit && typeof limit !== 'number') || src.length <= limit) {
+  if (shouldTransform(options.limit, src.length)) {
     const file = this.resourcePath;
     // Get MIME type
     const mimetype = options.mimetype || mime.getType(file);

src/options.json

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

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

@@ -3,25 +3,18 @@
 exports[`validation 1`] = `
 "URL Loader Invalid Options
 
-options.limit should be number
+options.limit should be boolean,number
 "
 `;
 
 exports[`validation 2`] = `
 "URL Loader Invalid Options
 
-options.limit should be number
-"
-`;
-
-exports[`validation 3`] = `
-"URL Loader Invalid Options
-
 options.mimetype should be string
 "
 `;
 
-exports[`validation 4`] = `
+exports[`validation 3`] = `
 "URL Loader Invalid Options
 
 options.fallback should be string

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

@@ -1,7 +1,7 @@
 import webpack from './helpers/compiler';
 
 describe('limit option', () => {
-  it('{undefined}', async () => {
+  it('not specify', async () => {
     const config = {
       loader: {
         test: /\.png$/,
@@ -15,7 +15,7 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (0)', async () => {
+  it('0 ({Number})', async () => {
     // Image size is 6777
     const config = {
       loader: {
@@ -32,7 +32,7 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (0.1)', async () => {
+  it('0.1 ({Number})', async () => {
     // Image size is 6777
     const config = {
       loader: {
@@ -49,7 +49,7 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (6776)', async () => {
+  it('6776 ({Number})', async () => {
     // Image size is 6777
     const config = {
       loader: {
@@ -66,7 +66,7 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (6777)', async () => {
+  it('6777 ({Number})', async () => {
     // Image size is 6777
     const config = {
       loader: {
@@ -83,7 +83,7 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (6778)', async () => {
+  it('6778 ({Number})', async () => {
     // Image size is 6777
     const config = {
       loader: {
@@ -100,7 +100,7 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (Number.MAX_SAFE_INTEGER)', async () => {
+  it('Number.MAX_SAFE_INTEGER ({Number})', async () => {
     const config = {
       loader: {
         test: /\.png$/,
@@ -116,7 +116,7 @@ describe('limit option', () => {
     expect(source).toMatchSnapshot();
   });
 
-  it('{Number} (Number.MIN_SAFE_INTEGER)', async () => {
+  it('Number.MIN_SAFE_INTEGER ({Number})', async () => {
     const config = {
       loader: {
         test: /\.png$/,
@@ -131,4 +131,36 @@ describe('limit option', () => {
 
     expect(source).toMatchSnapshot();
   });
+
+  it('true ({Boolean})', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: true,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
+
+  it('false ({Boolean})', async () => {
+    const config = {
+      loader: {
+        test: /\.png$/,
+        options: {
+          limit: false,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [{ source }] = stats.toJson().modules;
+
+    expect(source).toMatchSnapshot();
+  });
 });

test/limit-option.test.js

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