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