2.0.0

.editorconfig

@@ -1,12 +1,12 @@
-# editorconfig.org
 root = true
 
 [*]
-indent_style = tab
-end_of_line = lf
 charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
 
 [*.md]
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

.gitignore

@@ -29,4 +29,5 @@ npm-debug.log
 # --------------------------
 
 .idea
-tests/cache
+/tests/actual
+yarn.lock

.npmignore

@@ -11,3 +11,5 @@ npm-debug.log
 
 .idea
 tests
+
+yarn.lock

README.md

@@ -1,9 +1,6 @@
 # base64-inline-loader
 
-> Base64 loader for Webpack
-
-This loader supports the most popular file extensions and can be injected directly into a file as base64 string.
-
+A Base64 loader for webpack. Encodes all binary files to Base64 strings.
 
 ### Installation
 
@@ -13,93 +10,103 @@ This loader supports the most popular file extensions and can be injected direct
 npm install base64-inline-loader --save
 ```
 
-or
+or 
 
-**package.json**
+**yarn**
 
-```js
-"devDependencies": {
- "base64-inline-loader": "^1.x"
-}
+```
+yarn add -D base64-inline-loader
 ```
 
+
 ### Usage
 
 #### Config
 
 ```js
-let path = require('path');
-
-let Webpack = require('webpack');
-const DIR_NAME = path.join(__dirname, '..');
-
-module.exports = {
- entry: [
- './index.jsx'
- ],
-
- output: {
- path: `${DIR_NAME}/cache`,
- filename: 'build.js',
- publicPath: '/'
- },
-
- resolve: {
- extensions: ['.js', '.jsx', '.json', '.css'],
- },
-
- target : 'web',
-
- module: {
- rules: [
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader' ]
- },
-
- {
- test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
- use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
- }
- ]
- }
-};
+
+const path = require('path');
+
+module.exports = [
+ {
+ ...
+
+ module: {
+ rules: [
+ {
+ test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+ use: ['base64-inline-loader']
+ }
+ ]
+ }
+
+ ...
+ }
+];
 ```
 
 #### Input
 
 ```css
 @font-face {
- font-family: 'icons';
- src: url('./icon.woff');
+ font-family: 'icons';
+ src: url('./icon.woff');
 }
 
 body {
- background-image: url('./image.png');
+ background-image: url('./image.png');
 }
 ```
 
 #### Output
 
 ```css
 @font-face {
- font-family: 'icons';
- src: url('data:application/x-font-woff;charset=utf-8;base64,[BASE_64_STRING...]')
+ font-family: 'icons';
+ src: url('data:application/x-font-woff;charset=utf-8;base64,[BASE_64_STRING...]')
 }
 
 body {
- background-image: url('data:application/png;charset=utf-8;base64,[BASE_64_STRING...]');
+ background-image: url('data:application/png;charset=utf-8;base64,[BASE_64_STRING...]');
 }
 ```
 
 ### Options
 
-* `limit` — The limit can be specified with a query parameter. (Defaults to no limit).<br />
-If the file is greater than the limit (in bytes) the file-loader is used and all query parameters are passed to it.
+* `limit` — The limit can be specified with a query parameter.<br />
+
+```typescript
+{
+ use: {
+ loader: 'base64-inline-loader',
+ options: {
+ limit: 1000
+ }
+ }
+}
+```
+
+* `typeMapper` — use this option to fix your non-standard MIME types<br />
 
-* `name` — The name is a standard option.
+```js
+{
+ use: [
+ {
+ loader: 'base64-inline-loader',
+ options: {
+ typeMapper: {
+ 'text/less': 'text/css'
+ }
+ }
+ },
+ 'less-loader'
+ ]
+}
+```
 
-For more information about webpack loaders see official [documentation](http://webpack.github.io/docs/using-loaders.html). 
+```html
+<link rel="stylesheet" href="data:text/less;charset=utf-8;base64,Lm54dC1lcnJvci1wYW..." />
+````
 
 ## Tests
 

index.js

@@ -1,43 +1,36 @@
-'use strict';
-
-let loaderUtils = require('loader-utils');
-let fileLoader = require('file-loader');
-let mimeType = require('mime-types');
+const loaderUtils = require('loader-utils');
+const mimeTypes = require('mime-types');
 
 module.exports = function (content) {
- if (this.cacheable) {
- this.cacheable();
- }
-
- let extension = loaderUtils.interpolateName(this, '[ext]', {
- context: this.query.context || this.rootContext,
- content: content,
- regExp: this.query.regExp
- });
-
- extension = extension.toLowerCase();
+ const {
+ regExp,
+ limit = 0,
+ typeMapper = {},
+ context = this.rootContext
+ } = this.query;
 
- let type = mimeType.lookup(extension),
- data = content.toString('base64');
+ if (this.cacheable) {
+ this.cacheable();
+ }
 
- if (!type) {
- throw new Error(`${extension} type is not supported`);
- }
+ let extension = loaderUtils
+ .interpolateName(this, '[ext]', {context, content, regExp})
+ .toLowerCase();
 
- let { limit = 0 } = this.query;
+ let mimeType = mimeTypes.lookup(extension);
 
- try {
- ({ dataUrlLimit: limit } = this.query.url);
- }
- catch (error) { }
+ if (!mimeType) {
+ throw new Error(`${extension} type is not supported.`);
+ }
 
- if (limit <= 0 || content.length < limit) {
- let url = JSON.stringify(`data:${type};charset=utf-8;base64,${data}`);
+ if (limit && content.length > limit) {
+ throw new Error(`Exceeded the recommended limit (${limit}Kb). This can impact your performance.`);
+ }
 
- return `module.exports = ${url}`;
- }
+ const base64 = content.toString('base64');
+ const data = JSON.stringify(`data:${typeMapper[mimeType] || mimeType};charset=utf-8;base64,${base64}`);
 
- return fileLoader.call(this, content);
-}
+ return `module.exports = ${data}`;
+};
 
 module.exports.raw = true;