This commit is contained in:
chrosey
2017-09-13 07:52:34 +02:00
parent a1f16c37f4
commit 2340b0226b
24621 changed files with 2912161 additions and 149 deletions
+27
View File
@@ -0,0 +1,27 @@
{
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"forin": false,
"freeze": false,
"immed": true,
"indent": 2,
"latedef": "nofunc",
"newcap": true,
"noarg": true,
"noempty": true,
"nonbsp": true,
"nonew": true,
"plusplus": false,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"maxparams": 20,
"maxdepth": 5,
"maxlen": 120,
"scripturl": true,
"node": true,
"jasmine": true
}
+3
View File
@@ -0,0 +1,3 @@
/.idea
/node_modules
/npm-debug.log
+21
View File
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2016 Ben Holloway
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+243
View File
@@ -0,0 +1,243 @@
/*
* MIT License http://opensource.org/licenses/MIT
* Author: Ben Holloway @bholloway
*/
'use strict';
var path = require('path'),
fs = require('fs'),
loaderUtils = require('loader-utils'),
rework = require('rework'),
visit = require('rework-visit'),
convert = require('convert-source-map'),
camelcase = require('camelcase'),
defaults = require('lodash.defaults'),
SourceMapConsumer = require('source-map').SourceMapConsumer;
var findFile = require('./lib/find-file'),
absoluteToRelative = require('./lib/sources-absolute-to-relative'),
adjustSourceMap = require('adjust-sourcemap-loader/lib/process');
var PACKAGE_NAME = require('./package.json').name;
/**
* A webpack loader that resolves absolute url() paths relative to their original source file.
* Requires source-maps to do any meaningful work.
* @param {string} content Css content
* @param {object} sourceMap The source-map
* @returns {string|String}
*/
function resolveUrlLoader(content, sourceMap) {
/* jshint validthis:true */
// details of the file being processed
var loader = this,
filePath = path.dirname(loader.resourcePath);
// webpack 1: prefer loader query, else options object
// webpack 2; prefer loader options
var options = defaults(loaderUtils.getOptions(loader), loader.options[camelcase(PACKAGE_NAME)], {
absolute : false,
sourceMap: false,
fail : false,
silent : false,
keepQuery: false,
debug : false,
root : null
});
// validate root directory
var resolvedRoot = (typeof options.root === 'string') && path.resolve(options.root) || undefined,
isValidRoot = resolvedRoot && fs.existsSync(resolvedRoot);
if (options.root && !isValidRoot) {
return handleException('"root" option does not resolve to a valid path');
}
// loader result is cacheable
loader.cacheable();
// incoming source-map
var sourceMapConsumer, contentWithMap, sourceRoot;
if (sourceMap) {
// support non-standard string encoded source-map (per less-loader)
if (typeof sourceMap === 'string') {
try {
sourceMap = JSON.parse(sourceMap);
}
catch (exception) {
return handleException('source-map error', 'cannot parse source-map string (from less-loader?)');
}
}
// Note the current sourceRoot before it is removed
// later when we go back to relative paths, we need to add it again
sourceRoot = sourceMap.sourceRoot;
// leverage adjust-sourcemap-loader's codecs to avoid having to make any assumptions about the sourcemap
// historically this is a regular source of breakage
var absSourceMap;
try {
absSourceMap = adjustSourceMap(this, {format: 'absolute'}, sourceMap);
}
catch (exception) {
return handleException('source-map error', exception.message);
}
// prepare the adjusted sass source-map for later look-ups
sourceMapConsumer = new SourceMapConsumer(absSourceMap);
// embed source-map in css for rework-css to use
contentWithMap = content + convert.fromObject(absSourceMap).toComment({multiline: true});
}
// absent source map
else {
contentWithMap = content;
}
// process
// rework-css will throw on css syntax errors
var useMap = loader.sourceMap || options.sourceMap,
reworked;
try {
reworked = rework(contentWithMap, {source: loader.resourcePath})
.use(reworkPlugin)
.toString({
sourcemap : useMap,
sourcemapAsObject: useMap
});
}
// fail gracefully
catch (exception) {
return handleException('CSS error', exception);
}
// complete with source-map
if (useMap) {
// source-map sources seem to be relative to the file being processed
absoluteToRelative(reworked.map.sources, path.resolve(filePath, sourceRoot || '.'));
// Set source root again
reworked.map.sourceRoot = sourceRoot;
// need to use callback when there are multiple arguments
loader.callback(null, reworked.code, reworked.map);
}
// complete without source-map
else {
return reworked;
}
/**
* Push an error for the given exception and return the original content.
* @param {string} label Summary of the error
* @param {string|Error} [exception] Optional extended error details
* @returns {string} The original CSS content
*/
function handleException(label, exception) {
var rest = (typeof exception === 'string') ? [exception] :
(exception instanceof Error) ? [exception.message, exception.stack.split('\n')[1].trim()] :
[];
var message = ' resolve-url-loader cannot operate: ' + [label].concat(rest).filter(Boolean).join('\n ');
if (options.fail) {
loader.emitError(message);
}
else if (!options.silent) {
loader.emitWarning(message);
}
return content;
}
/**
* Plugin for css rework that follows SASS transpilation
* @param {object} stylesheet AST for the CSS output from SASS
*/
function reworkPlugin(stylesheet) {
var URL_STATEMENT_REGEX = /(url\s*\()\s*(?:(['"])((?:(?!\2).)*)(\2)|([^'"](?:(?!\)).)*[^'"]))\s*(\))/g;
// visit each node (selector) in the stylesheet recursively using the official utility method
// each node may have multiple declarations
visit(stylesheet, function visitor(declarations) {
if (declarations) {
declarations
.forEach(eachDeclaration);
}
});
/**
* Process a declaration from the syntax tree.
* @param declaration
*/
function eachDeclaration(declaration) {
var isValid = declaration.value && (declaration.value.indexOf('url') >= 0),
directory;
if (isValid) {
// reverse the original source-map to find the original sass file
var startPosApparent = declaration.position.start,
startPosOriginal = sourceMapConsumer && sourceMapConsumer.originalPositionFor(startPosApparent);
// we require a valid directory for the specified file
directory = startPosOriginal && startPosOriginal.source && path.dirname(startPosOriginal.source);
if (directory) {
// allow multiple url() values in the declaration
// split by url statements and process the content
// additional capture groups are needed to match quotations correctly
// escaped quotations are not considered
declaration.value = declaration.value
.split(URL_STATEMENT_REGEX)
.map(eachSplitOrGroup)
.join('');
}
// source-map present but invalid entry
else if (sourceMapConsumer) {
throw new Error('source-map information is not available at url() declaration');
}
}
/**
* Encode the content portion of <code>url()</code> statements.
* There are 4 capture groups in the split making every 5th unmatched.
* @param {string} token A single split item
* @param i The index of the item in the split
* @returns {string} Every 3 or 5 items is an encoded url everything else is as is
*/
function eachSplitOrGroup(token, i) {
var BACKSLASH_REGEX = /\\/g;
// we can get groups as undefined under certain match circumstances
var initialised = token || '';
// the content of the url() statement is either in group 3 or group 5
var mod = i % 7;
if ((mod === 3) || (mod === 5)) {
// split into uri and query/hash and then find the absolute path to the uri
var split = initialised.split(/([?#])/g),
uri = split[0],
absolute = uri && findFile(options).absolute(directory, uri, resolvedRoot),
query = options.keepQuery ? split.slice(1).join('') : '';
// use the absolute path (or default to initialised)
if (options.absolute) {
return absolute && absolute.replace(BACKSLASH_REGEX, '/').concat(query) || initialised;
}
// module relative path (or default to initialised)
else {
var relative = absolute && path.relative(filePath, absolute),
rootRelative = relative && loaderUtils.urlToRequest(relative, '~');
return (rootRelative) ? rootRelative.replace(BACKSLASH_REGEX, '/').concat(query) : initialised;
}
}
// everything else, including parentheses and quotation (where present) and media statements
else {
return initialised;
}
}
}
}
}
module.exports = resolveUrlLoader;
+157
View File
@@ -0,0 +1,157 @@
'use strict';
var fs = require('fs'),
path = require('path'),
defaults = require('lodash.defaults');
var PACKAGE_NAME = require('../package.json').name;
/**
* Factory for find-file with the given <code>options</code> hash.
* @param {{debug: boolean}} [opt] Optional options hash
*/
function findFile(opt) {
var options = defaults(opt, {
debug: false
});
return {
absolute: absolute,
base : base
};
/**
* Search for the relative file reference from the <code>startPath</code> up to the process
* working directory, avoiding any other directories with a <code>package.json</code> or <code>bower.json</code>.
* @param {string} startPath The location of the uri declaration and the place to start the search from
* @param {string} uri The content of the url() statement, expected to be a relative file path
* @param {string} [limit] Optional directory to limit the search to
* @returns {string|null} <code>null</code> where not found else the absolute path to the file
*/
function absolute(startPath, uri, limit) {
var basePath = base(startPath, uri, limit);
return !!basePath && path.resolve(basePath, uri) || null;
}
/**
* Search for the relative file reference from the <code>startPath</code> up to the process
* working directory, avoiding any other directories with a <code>package.json</code> or <code>bower.json</code>.
* @param {string} startPath The location of the uri declaration and the place to start the search from
* @param {string} uri The content of the url() statement, expected to be a relative file path
* @param {string} [limit] Optional directory to limit the search to
* @returns {string|null} <code>null</code> where not found else the base path upon which the uri may be resolved
*/
function base(startPath, uri, limit) {
var messages = [];
// ensure we have some limit to the search
limit = limit && path.resolve(limit) || process.cwd();
// ignore data uris and ensure we are at a valid start path
var absoluteStart = !(/^data\:/.test(uri)) && path.resolve(startPath);
if (absoluteStart) {
// find path to the root, stopping at cwd, package.json or bower.json
var pathToRoot = [];
var isWorking;
do {
pathToRoot.push(absoluteStart);
isWorking = testWithinLimit(absoluteStart) && testNotPackage(absoluteStart);
absoluteStart = path.resolve(absoluteStart, '..');
} while (isWorking);
// start a queue with the path to the root
var queue = pathToRoot.concat();
// process the queue until empty
// the queue pattern ensures that we favour paths closest the the start path
while (queue.length) {
// shift the first item off the queue, consider it the base for our relative uri
var basePath = queue.shift();
var fullPath = path.resolve(basePath, uri);
messages.push(basePath);
// file exists so convert to a dataURI and end
if (fs.existsSync(fullPath)) {
flushMessages('FOUND');
return basePath;
}
// enqueue subdirectories that are not packages and are not in the root path
else {
enqueue(queue, basePath);
}
}
// not found
flushMessages('NOT FOUND');
return null;
}
// ignored
else {
flushMessages('IGNORED');
return null;
}
/**
* Enqueue subdirectories that are not packages and are not in the root path
* @param {Array} queue The queue to add to
* @param {string} basePath The path to consider
*/
function enqueue(queue, basePath) {
fs.readdirSync(basePath)
.filter(function notHidden(filename) {
return (filename.charAt(0) !== '.');
})
.map(function toAbsolute(filename) {
return path.join(basePath, filename);
})
.filter(function directoriesOnly(absolutePath) {
return fs.existsSync(absolutePath) && fs.statSync(absolutePath).isDirectory();
})
.filter(function notInRootPath(absolutePath) {
return (pathToRoot.indexOf(absolutePath) < 0);
})
.filter(testNotPackage)
.forEach(function enqueue(absolutePath) {
queue.push(absolutePath);
});
}
/**
* Test whether the given directory is above but not equal to any of the project root directories.
* @param {string} absolutePath An absolute path
* @returns {boolean} True where a package.json or bower.json exists, else False
*/
function testWithinLimit(absolutePath) {
var relative = path.relative(limit, absolutePath);
return !!relative && (relative.slice(0, 2) !== '..');
}
/**
* Print verbose debug info where <code>options.debug</code> is in effect.
* @param {string} result Final text to append to the message
*/
function flushMessages(result) {
if (options.debug) {
var text = ['\n' + PACKAGE_NAME + ': ' + uri]
.concat(messages)
.concat(result)
.join('\n ');
console.log(text);
}
}
}
/**
* Test whether the given directory is the root of its own package.
* @param {string} absolutePath An absolute path
* @returns {boolean} True where a package.json or bower.json exists, else False
*/
function testNotPackage(absolutePath) {
return ['package.json', 'bower.json'].every(function fileFound(file) {
return !fs.existsSync(path.resolve(absolutePath, file));
});
}
}
module.exports = findFile;
+20
View File
@@ -0,0 +1,20 @@
/*
* MIT License http://opensource.org/licenses/MIT
* Author: Ben Holloway @bholloway
*/
'use strict';
var path = require('path');
/**
* Convert the given array of absolute URIs to relative URIs (in place).
* @param {Array} sources The source map sources array
* @param {string} basePath The base path to make relative to
*/
module.exports = function sourcesAbsoluteToRelative(sources, basePath) {
sources.forEach(sourceToRelative);
function sourceToRelative(value, i, array) {
array[i] = path.relative(basePath, value);
}
};
+64
View File
@@ -0,0 +1,64 @@
'use strict';
function preserveCamelCase(str) {
let isLastCharLower = false;
let isLastCharUpper = false;
let isLastLastCharUpper = false;
for (let i = 0; i < str.length; i++) {
const c = str[i];
if (isLastCharLower && /[a-zA-Z]/.test(c) && c.toUpperCase() === c) {
str = str.substr(0, i) + '-' + str.substr(i);
isLastCharLower = false;
isLastLastCharUpper = isLastCharUpper;
isLastCharUpper = true;
i++;
} else if (isLastCharUpper && isLastLastCharUpper && /[a-zA-Z]/.test(c) && c.toLowerCase() === c) {
str = str.substr(0, i - 1) + '-' + str.substr(i - 1);
isLastLastCharUpper = isLastCharUpper;
isLastCharUpper = false;
isLastCharLower = true;
} else {
isLastCharLower = c.toLowerCase() === c;
isLastLastCharUpper = isLastCharUpper;
isLastCharUpper = c.toUpperCase() === c;
}
}
return str;
}
module.exports = function (str) {
if (arguments.length > 1) {
str = Array.from(arguments)
.map(x => x.trim())
.filter(x => x.length)
.join('-');
} else {
str = str.trim();
}
if (str.length === 0) {
return '';
}
if (str.length === 1) {
return str.toLowerCase();
}
if (/^[a-z0-9]+$/.test(str)) {
return str;
}
const hasUpperCase = str !== str.toLowerCase();
if (hasUpperCase) {
str = preserveCamelCase(str);
}
return str
.replace(/^[_.\- ]+/, '')
.toLowerCase()
.replace(/[_.\- ]+(\w|$)/g, (m, p1) => p1.toUpperCase());
};
+21
View File
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
+110
View File
@@ -0,0 +1,110 @@
{
"_args": [
[
{
"raw": "camelcase@^4.0.0",
"scope": null,
"escapedName": "camelcase",
"name": "camelcase",
"rawSpec": "^4.0.0",
"spec": ">=4.0.0 <5.0.0",
"type": "range"
},
"c:\\xampp\\htdocs\\laravel\\node_modules\\resolve-url-loader"
]
],
"_from": "camelcase@>=4.0.0 <5.0.0",
"_id": "camelcase@4.1.0",
"_inCache": true,
"_location": "/resolve-url-loader/camelcase",
"_nodeVersion": "7.8.0",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/camelcase-4.1.0.tgz_1490865362489_0.433825216954574"
},
"_npmUser": {
"name": "sindresorhus",
"email": "sindresorhus@gmail.com"
},
"_npmVersion": "4.2.0",
"_phantomChildren": {},
"_requested": {
"raw": "camelcase@^4.0.0",
"scope": null,
"escapedName": "camelcase",
"name": "camelcase",
"rawSpec": "^4.0.0",
"spec": ">=4.0.0 <5.0.0",
"type": "range"
},
"_requiredBy": [
"/resolve-url-loader"
],
"_resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
"_shasum": "d545635be1e33c542649c69173e5de6acfae34dd",
"_shrinkwrap": null,
"_spec": "camelcase@^4.0.0",
"_where": "c:\\xampp\\htdocs\\laravel\\node_modules\\resolve-url-loader",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "sindresorhus.com"
},
"bugs": {
"url": "https://github.com/sindresorhus/camelcase/issues"
},
"dependencies": {},
"description": "Convert a dash/dot/underscore/space separated string to camelCase: foo-bar → fooBar",
"devDependencies": {
"ava": "*",
"xo": "*"
},
"directories": {},
"dist": {
"shasum": "d545635be1e33c542649c69173e5de6acfae34dd",
"tarball": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz"
},
"engines": {
"node": ">=4"
},
"files": [
"index.js"
],
"gitHead": "0e6e4a2752aa013b8e9477145c7b8132c95a82ef",
"homepage": "https://github.com/sindresorhus/camelcase#readme",
"keywords": [
"camelcase",
"camel-case",
"camel",
"case",
"dash",
"hyphen",
"dot",
"underscore",
"separator",
"string",
"text",
"convert"
],
"license": "MIT",
"maintainers": [
{
"name": "sindresorhus",
"email": "sindresorhus@gmail.com"
}
],
"name": "camelcase",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/sindresorhus/camelcase.git"
},
"scripts": {
"test": "xo && ava"
},
"version": "4.1.0",
"xo": {
"esnext": true
}
}
+57
View File
@@ -0,0 +1,57 @@
# camelcase [![Build Status](https://travis-ci.org/sindresorhus/camelcase.svg?branch=master)](https://travis-ci.org/sindresorhus/camelcase)
> Convert a dash/dot/underscore/space separated string to camelCase: `foo-bar` → `fooBar`
## Install
```
$ npm install --save camelcase
```
## Usage
```js
const camelCase = require('camelcase');
camelCase('foo-bar');
//=> 'fooBar'
camelCase('foo_bar');
//=> 'fooBar'
camelCase('Foo-Bar');
//=> 'fooBar'
camelCase('--foo.bar');
//=> 'fooBar'
camelCase('__foo__bar__');
//=> 'fooBar'
camelCase('foo bar');
//=> 'fooBar'
console.log(process.argv[3]);
//=> '--foo-bar'
camelCase(process.argv[3]);
//=> 'fooBar'
camelCase('foo', 'bar');
//=> 'fooBar'
camelCase('__foo__', '--bar');
//=> 'fooBar'
```
## Related
- [decamelize](https://github.com/sindresorhus/decamelize) - The inverse of this module
- [uppercamelcase](https://github.com/SamVerschueren/uppercamelcase) - Like this module, but to PascalCase instead of camelCase
## License
MIT © [Sindre Sorhus](https://sindresorhus.com)
+18
View File
@@ -0,0 +1,18 @@
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
<a name="1.1.0"></a>
# [1.1.0](https://github.com/webpack/loader-utils/compare/v1.0.4...v1.1.0) (2017-03-16)
### Features
* **automatic-release:** Generation of automatic release ([7484d13](https://github.com/webpack/loader-utils/commit/7484d13))
* **parseQuery:** export parseQuery ([ddf64e4](https://github.com/webpack/loader-utils/commit/ddf64e4))
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+20
View File
@@ -0,0 +1,20 @@
Copyright JS Foundation and other contributors
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+229
View File
@@ -0,0 +1,229 @@
# loader-utils
## Methods
### `getOptions`
Recommended way to retrieve the options of a loader invocation:
```javascript
// inside your loader
const options = loaderUtils.getOptions(this);
```
1. If `this.query` is a string:
- Tries to parse the query string and returns a new object
- Throws if it's not a valid query string
2. If `this.query` is object-like, it just returns `this.query`
3. In any other case, it just returns `null`
**Please note:** The returned `options` object is *read-only*. It may be re-used across multiple invocations.
If you pass it on to another library, make sure to make a *deep copy* of it:
```javascript
const options = Object.assign(
{},
loaderUtils.getOptions(this), // it is safe to pass null to Object.assign()
defaultOptions
);
// don't forget nested objects or arrays
options.obj = Object.assign({}, options.obj);
options.arr = options.arr.slice();
someLibrary(options);
```
[clone-deep](https://www.npmjs.com/package/clone-deep) is a good library to make a deep copy of the options.
#### Options as query strings
If the loader options have been passed as loader query string (`loader?some&params`), the string is parsed by using [`parseQuery`](#parsequery).
### `parseQuery`
Parses a passed string (e.g. `loaderContext.resourceQuery`) as a query string, and returns an object.
``` javascript
const params = loaderUtils.parseQuery(this.resourceQuery); // resource: `file?param1=foo`
if (params.param1 === "foo") {
// do something
}
```
The string is parsed like this:
``` text
-> Error
? -> {}
?flag -> { flag: true }
?+flag -> { flag: true }
?-flag -> { flag: false }
?xyz=test -> { xyz: "test" }
?xyz=1 -> { xyz: "1" } // numbers are NOT parsed
?xyz[]=a -> { xyz: ["a"] }
?flag1&flag2 -> { flag1: true, flag2: true }
?+flag1,-flag2 -> { flag1: true, flag2: false }
?xyz[]=a,xyz[]=b -> { xyz: ["a", "b"] }
?a%2C%26b=c%2C%26d -> { "a,&b": "c,&d" }
?{data:{a:1},isJSON5:true} -> { data: { a: 1 }, isJSON5: true }
```
### `stringifyRequest`
Turns a request into a string that can be used inside `require()` or `import` while avoiding absolute paths.
Use it instead of `JSON.stringify(...)` if you're generating code inside a loader.
**Why is this necessary?** Since webpack calculates the hash before module paths are translated into module ids, we must avoid absolute paths to ensure
consistent hashes across different compilations.
This function:
- resolves absolute requests into relative requests if the request and the module are on the same hard drive
- replaces `\` with `/` if the request and the module are on the same hard drive
- won't change the path at all if the request and the module are on different hard drives
- applies `JSON.stringify` to the result
```javascript
loaderUtils.stringifyRequest(this, "./test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, ".\\test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, "test");
// "\"test\""
loaderUtils.stringifyRequest(this, "test/lib/index.js");
// "\"test/lib/index.js\""
loaderUtils.stringifyRequest(this, "otherLoader?andConfig!test?someConfig");
// "\"otherLoader?andConfig!test?someConfig\""
loaderUtils.stringifyRequest(this, require.resolve("test"));
// "\"../node_modules/some-loader/lib/test.js\""
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"../../test.js\"" (on Windows, in case the module and the request are on the same drive)
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"C:\\module\\test.js\"" (on Windows, in case the module and the request are on different drives)
loaderUtils.stringifyRequest(this, "\\\\network-drive\\test.js");
// "\"\\\\network-drive\\\\test.js\"" (on Windows, in case the module and the request are on different drives)
```
### `urlToRequest`
Converts some resource URL to a webpack module request.
```javascript
const url = "path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "./path/to/module.js"
```
#### Module URLs
Any URL containing a `~` will be interpreted as a module request. Anything after the `~` will be considered the request path.
```javascript
const url = "~path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "path/to/module.js"
```
#### Root-relative URLs
URLs that are root-relative (start with `/`) can be resolved relative to some arbitrary path by using the `root` parameter:
```javascript
const url = "/path/to/module.js";
const root = "./root";
const request = loaderUtils.urlToRequest(url, root); // "./root/path/to/module.js"
```
To convert a root-relative URL into a module URL, specify a `root` value that starts with `~`:
```javascript
const url = "/path/to/module.js";
const root = "~";
const request = loaderUtils.urlToRequest(url, root); // "path/to/module.js"
```
### `interpolateName`
Interpolates a filename template using multiple placeholders and/or a regular expression.
The template and regular expression are set as query params called `name` and `regExp` on the current loader's context.
```javascript
const interpolatedName = loaderUtils.interpolateName(loaderContext, name, options);
```
The following tokens are replaced in the `name` parameter:
* `[ext]` the extension of the resource
* `[name]` the basename of the resource
* `[path]` the path of the resource relative to the `context` query parameter or option.
* `[folder]` the folder of the resource is in.
* `[emoji]` a random emoji representation of `options.content`
* `[emoji:<length>]` same as above, but with a customizable number of emojis
* `[hash]` the hash of `options.content` (Buffer) (by default it's the hex digest of the md5 hash)
* `[<hashType>:hash:<digestType>:<length>]` optionally one can configure
* other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`
* other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* and `length` the length in chars
* `[N]` the N-th match obtained from matching the current file name against `options.regExp`
Examples
``` javascript
// loaderContext.resourcePath = "/app/js/javascript.js"
loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js
// loaderContext.resourcePath = "/app/page.html"
loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... });
// => html-9473fd.html
// loaderContext.resourcePath = "/app/flash.txt"
loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... });
// => c31e9820c001c9c4a86bce33ce43b679
// loaderContext.resourcePath = "/app/img/image.gif"
loaderUtils.interpolateName(loaderContext, "[emoji]", { content: ... });
// => 👍
// loaderContext.resourcePath = "/app/img/image.gif"
loaderUtils.interpolateName(loaderContext, "[emoji:4]", { content: ... });
// => 🙍🏢📤🐝
// loaderContext.resourcePath = "/app/img/image.png"
loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... });
// => 2BKDTjl.png
// use sha512 hash instead of md5 and with only 7 chars of base64
// loaderContext.resourcePath = "/app/img/myself.png"
// loaderContext.query.name =
loaderUtils.interpolateName(loaderContext, "picture.png");
// => picture.png
// loaderContext.resourcePath = "/app/dir/file.png"
loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... });
// => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157
// loaderContext.resourcePath = "/app/js/page-home.js"
loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... });
// => script-home.js
```
### `getHashDigest`
``` javascript
const digestString = loaderUtils.getHashDigest(buffer, hashType, digestType, maxLength);
```
* `buffer` the content that should be hashed
* `hashType` one of `sha1`, `md5`, `sha256`, `sha512` or any other node.js supported hash type
* `digestType` one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* `maxLength` the maximum length in chars
## License
MIT (http://www.opensource.org/licenses/mit-license.php)
@@ -0,0 +1,13 @@
"use strict";
function getCurrentRequest(loaderContext) {
if(loaderContext.currentRequest)
return loaderContext.currentRequest;
const request = loaderContext.loaders
.slice(loaderContext.loaderIndex)
.map(obj => obj.request)
.concat([loaderContext.resource]);
return request.join("!");
}
module.exports = getCurrentRequest;
@@ -0,0 +1,53 @@
"use strict";
const baseEncodeTables = {
26: "abcdefghijklmnopqrstuvwxyz",
32: "123456789abcdefghjkmnpqrstuvwxyz", // no 0lio
36: "0123456789abcdefghijklmnopqrstuvwxyz",
49: "abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ", // no lIO
52: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
58: "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ", // no 0lIO
62: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
64: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_"
};
function encodeBufferToBase(buffer, base) {
const encodeTable = baseEncodeTables[base];
if(!encodeTable) throw new Error("Unknown encoding base" + base);
const readLength = buffer.length;
const Big = require("big.js");
Big.RM = Big.DP = 0;
let b = new Big(0);
for(let i = readLength - 1; i >= 0; i--) {
b = b.times(256).plus(buffer[i]);
}
let output = "";
while(b.gt(0)) {
output = encodeTable[b.mod(base)] + output;
b = b.div(base);
}
Big.DP = 20;
Big.RM = 1;
return output;
}
function getHashDigest(buffer, hashType, digestType, maxLength) {
hashType = hashType || "md5";
maxLength = maxLength || 9999;
const hash = require("crypto").createHash(hashType);
hash.update(buffer);
if(digestType === "base26" || digestType === "base32" || digestType === "base36" ||
digestType === "base49" || digestType === "base52" || digestType === "base58" ||
digestType === "base62" || digestType === "base64") {
return encodeBufferToBase(hash.digest(), digestType.substr(4)).substr(0, maxLength);
} else {
return hash.digest(digestType || "hex").substr(0, maxLength);
}
}
module.exports = getHashDigest;
@@ -0,0 +1,17 @@
"use strict";
const parseQuery = require("./parseQuery");
function getOptions(loaderContext) {
const query = loaderContext.query;
if(typeof query === "string" && query !== "") {
return parseQuery(loaderContext.query);
}
if(!query || typeof query !== "object") {
// Not object-like queries are not supported.
return null;
}
return query;
}
module.exports = getOptions;
@@ -0,0 +1,13 @@
"use strict";
function getRemainingRequest(loaderContext) {
if(loaderContext.remainingRequest)
return loaderContext.remainingRequest;
const request = loaderContext.loaders
.slice(loaderContext.loaderIndex + 1)
.map(obj => obj.request)
.concat([loaderContext.resource]);
return request.join("!");
}
module.exports = getRemainingRequest;
+23
View File
@@ -0,0 +1,23 @@
"use strict";
const getOptions = require("./getOptions");
const parseQuery = require("./parseQuery");
const stringifyRequest = require("./stringifyRequest");
const getRemainingRequest = require("./getRemainingRequest");
const getCurrentRequest = require("./getCurrentRequest");
const isUrlRequest = require("./isUrlRequest");
const urlToRequest = require("./urlToRequest");
const parseString = require("./parseString");
const getHashDigest = require("./getHashDigest");
const interpolateName = require("./interpolateName");
exports.getOptions = getOptions;
exports.parseQuery = parseQuery;
exports.stringifyRequest = stringifyRequest;
exports.getRemainingRequest = getRemainingRequest;
exports.getCurrentRequest = getCurrentRequest;
exports.isUrlRequest = isUrlRequest;
exports.urlToRequest = urlToRequest;
exports.parseString = parseString;
exports.getHashDigest = getHashDigest;
exports.interpolateName = interpolateName;
@@ -0,0 +1,95 @@
"use strict";
const path = require("path");
const emojisList = require("emojis-list");
const getHashDigest = require("./getHashDigest");
const emojiRegex = /[\uD800-\uDFFF]./;
const emojiList = emojisList.filter(emoji => emojiRegex.test(emoji));
const emojiCache = {};
function encodeStringToEmoji(content, length) {
if(emojiCache[content]) return emojiCache[content];
length = length || 1;
const emojis = [];
do {
const index = Math.floor(Math.random() * emojiList.length);
emojis.push(emojiList[index]);
emojiList.splice(index, 1);
} while(--length > 0);
const emojiEncoding = emojis.join("");
emojiCache[content] = emojiEncoding;
return emojiEncoding;
}
function interpolateName(loaderContext, name, options) {
let filename;
if(typeof name === "function") {
filename = name(loaderContext.resourcePath);
} else {
filename = name || "[hash].[ext]";
}
const context = options.context;
const content = options.content;
const regExp = options.regExp;
let ext = "bin";
let basename = "file";
let directory = "";
let folder = "";
if(loaderContext.resourcePath) {
const parsed = path.parse(loaderContext.resourcePath);
let resourcePath = loaderContext.resourcePath;
if(parsed.ext) {
ext = parsed.ext.substr(1);
}
if(parsed.dir) {
basename = parsed.name;
resourcePath = parsed.dir + path.sep;
}
if(typeof context !== "undefined") {
directory = path.relative(context, resourcePath + "_").replace(/\\/g, "/").replace(/\.\.(\/)?/g, "_$1");
directory = directory.substr(0, directory.length - 1);
} else {
directory = resourcePath.replace(/\\/g, "/").replace(/\.\.(\/)?/g, "_$1");
}
if(directory.length === 1) {
directory = "";
} else if(directory.length > 1) {
folder = path.basename(directory);
}
}
let url = filename;
if(content) {
// Match hash template
url = url
.replace(
/\[(?:(\w+):)?hash(?::([a-z]+\d*))?(?::(\d+))?\]/ig,
(all, hashType, digestType, maxLength) => getHashDigest(content, hashType, digestType, parseInt(maxLength, 10))
)
.replace(
/\[emoji(?::(\d+))?\]/ig,
(all, length) => encodeStringToEmoji(content, length)
);
}
url = url
.replace(/\[ext\]/ig, () => ext)
.replace(/\[name\]/ig, () => basename)
.replace(/\[path\]/ig, () => directory)
.replace(/\[folder\]/ig, () => folder);
if(regExp && loaderContext.resourcePath) {
const match = loaderContext.resourcePath.match(new RegExp(regExp));
match && match.forEach((matched, i) => {
url = url.replace(
new RegExp("\\[" + i + "\\]", "ig"),
matched
);
});
}
if(typeof loaderContext.options === "object" && typeof loaderContext.options.customInterpolateName === "function") {
url = loaderContext.options.customInterpolateName.call(loaderContext, url, name, options);
}
return url;
}
module.exports = interpolateName;
@@ -0,0 +1,14 @@
"use strict";
function isUrlRequest(url, root) {
// An URL is not an request if
// 1. it's a Data Url
// 2. it's an absolute url or and protocol-relative
// 3. it's some kind of url for a template
if(/^data:|^chrome-extension:|^(https?:)?\/\/|^[\{\}\[\]#*;,'§\$%&\(=?`´\^°<>]/.test(url)) return false;
// 4. It's also not an request if root isn't set and it's a root-relative url
if((root === undefined || root === false) && /^\//.test(url)) return false;
return true;
}
module.exports = isUrlRequest;
@@ -0,0 +1,54 @@
"use strict";
const JSON5 = require("json5");
const specialValues = {
"null": null,
"true": true,
"false": false
};
function parseQuery(query) {
if(query.substr(0, 1) !== "?") {
throw new Error("A valid query string passed to parseQuery should begin with '?'");
}
query = query.substr(1);
if(!query) {
return {};
}
if(query.substr(0, 1) === "{" && query.substr(-1) === "}") {
return JSON5.parse(query);
}
const queryArgs = query.split(/[,&]/g);
const result = {};
queryArgs.forEach(arg => {
const idx = arg.indexOf("=");
if(idx >= 0) {
let name = arg.substr(0, idx);
let value = decodeURIComponent(arg.substr(idx + 1));
if(specialValues.hasOwnProperty(value)) {
value = specialValues[value];
}
if(name.substr(-2) === "[]") {
name = decodeURIComponent(name.substr(0, name.length - 2));
if(!Array.isArray(result[name]))
result[name] = [];
result[name].push(value);
} else {
name = decodeURIComponent(name);
result[name] = value;
}
} else {
if(arg.substr(0, 1) === "-") {
result[decodeURIComponent(arg.substr(1))] = false;
} else if(arg.substr(0, 1) === "+") {
result[decodeURIComponent(arg.substr(1))] = true;
} else {
result[decodeURIComponent(arg)] = true;
}
}
});
return result;
}
module.exports = parseQuery;
@@ -0,0 +1,19 @@
"use strict";
function parseString(str) {
try {
if(str[0] === "\"") return JSON.parse(str);
if(str[0] === "'" && str.substr(str.length - 1) === "'") {
return parseString(
str
.replace(/\\.|"/g, x => x === "\"" ? "\\\"" : x)
.replace(/^'|'$/g, "\"")
);
}
return JSON.parse("\"" + str + "\"");
} catch(e) {
return str;
}
}
module.exports = parseString;
@@ -0,0 +1,40 @@
"use strict";
const path = require("path");
const matchRelativePath = /^\.\.?[/\\]/;
function isAbsolutePath(str) {
return path.posix.isAbsolute(str) || path.win32.isAbsolute(str);
}
function isRelativePath(str) {
return matchRelativePath.test(str);
}
function stringifyRequest(loaderContext, request) {
const splitted = request.split("!");
const context = loaderContext.context || (loaderContext.options && loaderContext.options.context);
return JSON.stringify(splitted.map(part => {
// First, separate singlePath from query, because the query might contain paths again
const splittedPart = part.match(/^(.*?)(\?.*)/);
let singlePath = splittedPart ? splittedPart[1] : part;
const query = splittedPart ? splittedPart[2] : "";
if(isAbsolutePath(singlePath) && context) {
singlePath = path.relative(context, singlePath);
if(isAbsolutePath(singlePath)) {
// If singlePath still matches an absolute path, singlePath was on a different drive than context.
// In this case, we leave the path platform-specific without replacing any separators.
// @see https://github.com/webpack/loader-utils/pull/14
return singlePath + query;
}
if(isRelativePath(singlePath) === false) {
// Ensure that the relative path starts at least with ./ otherwise it would be a request into the modules directory (like node_modules).
singlePath = "./" + singlePath;
}
}
return singlePath.replace(/\\/g, "/") + query;
}).join("!"));
}
module.exports = stringifyRequest;
@@ -0,0 +1,49 @@
"use strict";
// we can't use path.win32.isAbsolute because it also matches paths starting with a forward slash
const matchNativeWin32Path = /^[A-Z]:[/\\]|^\\\\/i;
function urlToRequest(url, root) {
const moduleRequestRegex = /^[^?]*~/;
let request;
if(matchNativeWin32Path.test(url)) {
// absolute windows path, keep it
request = url;
} else if(root !== undefined && root !== false && /^\//.test(url)) {
// if root is set and the url is root-relative
switch(typeof root) {
// 1. root is a string: root is prefixed to the url
case "string":
// special case: `~` roots convert to module request
if(moduleRequestRegex.test(root)) {
request = root.replace(/([^~\/])$/, "$1/") + url.slice(1);
} else {
request = root + url;
}
break;
// 2. root is `true`: absolute paths are allowed
// *nix only, windows-style absolute paths are always allowed as they doesn't start with a `/`
case "boolean":
request = url;
break;
default:
throw new Error("Unexpected parameters to loader-utils 'urlToRequest': url = " + url + ", root = " + root + ".");
}
} else if(/^\.\.?\//.test(url)) {
// A relative url stays
request = url;
} else {
// every other url is threaded like a relative url
request = "./" + url;
}
// A `~` makes the url an module
if(moduleRequestRegex.test(request)) {
request = request.replace(moduleRequestRegex, "");
}
return request;
}
module.exports = urlToRequest;
+109
View File
@@ -0,0 +1,109 @@
{
"_args": [
[
{
"raw": "loader-utils@^1.0.0",
"scope": null,
"escapedName": "loader-utils",
"name": "loader-utils",
"rawSpec": "^1.0.0",
"spec": ">=1.0.0 <2.0.0",
"type": "range"
},
"c:\\xampp\\htdocs\\laravel\\node_modules\\resolve-url-loader"
]
],
"_from": "loader-utils@>=1.0.0 <2.0.0",
"_id": "loader-utils@1.1.0",
"_inCache": true,
"_location": "/resolve-url-loader/loader-utils",
"_nodeVersion": "7.7.3",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/loader-utils-1.1.0.tgz_1489673126296_0.2887681087013334"
},
"_npmUser": {
"name": "jhnns",
"email": "mail@johannesewald.de"
},
"_npmVersion": "4.1.2",
"_phantomChildren": {},
"_requested": {
"raw": "loader-utils@^1.0.0",
"scope": null,
"escapedName": "loader-utils",
"name": "loader-utils",
"rawSpec": "^1.0.0",
"spec": ">=1.0.0 <2.0.0",
"type": "range"
},
"_requiredBy": [
"/resolve-url-loader"
],
"_resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
"_shasum": "c98aef488bcceda2ffb5e2de646d6a754429f5cd",
"_shrinkwrap": null,
"_spec": "loader-utils@^1.0.0",
"_where": "c:\\xampp\\htdocs\\laravel\\node_modules\\resolve-url-loader",
"author": {
"name": "Tobias Koppers @sokra"
},
"bugs": {
"url": "https://github.com/webpack/loader-utils/issues"
},
"dependencies": {
"big.js": "^3.1.3",
"emojis-list": "^2.0.0",
"json5": "^0.5.0"
},
"description": "utils for webpack loaders",
"devDependencies": {
"coveralls": "^2.11.2",
"eslint": "^3.15.0",
"eslint-plugin-node": "^4.0.1",
"istanbul": "^0.3.14",
"mocha": "^1.21.4",
"standard-version": "^4.0.0"
},
"directories": {},
"dist": {
"shasum": "c98aef488bcceda2ffb5e2de646d6a754429f5cd",
"tarball": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz"
},
"engines": {
"node": ">=4.0.0"
},
"files": [
"lib"
],
"gitHead": "a5602addda0c5e98e70d067b8dd050d5e4153f1d",
"homepage": "https://github.com/webpack/loader-utils#readme",
"license": "MIT",
"main": "lib/index.js",
"maintainers": [
{
"name": "jhnns",
"email": "mail@johannesewald.de"
},
{
"name": "sokra",
"email": "tobias.koppers@googlemail.com"
}
],
"name": "loader-utils",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack/loader-utils.git"
},
"scripts": {
"cover": "istanbul cover -x *.runtime.js node_modules/mocha/bin/_mocha",
"lint": "eslint lib test",
"posttest": "npm run lint",
"release": "npm test && standard-version",
"test": "mocha",
"travis": "npm run cover -- --report lcovonly"
},
"version": "1.1.0"
}
+107
View File
@@ -0,0 +1,107 @@
{
"_args": [
[
{
"raw": "resolve-url-loader@^2.0.0",
"scope": null,
"escapedName": "resolve-url-loader",
"name": "resolve-url-loader",
"rawSpec": "^2.0.0",
"spec": ">=2.0.0 <3.0.0",
"type": "range"
},
"c:\\xampp\\htdocs\\laravel\\node_modules\\laravel-mix"
]
],
"_from": "resolve-url-loader@>=2.0.0 <3.0.0",
"_id": "resolve-url-loader@2.0.2",
"_inCache": true,
"_location": "/resolve-url-loader",
"_nodeVersion": "4.4.7",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/resolve-url-loader-2.0.2.tgz_1488522212241_0.2058443962596357"
},
"_npmUser": {
"name": "bholloway",
"email": "npm@bholloway.com"
},
"_npmVersion": "3.10.9",
"_phantomChildren": {
"big.js": "3.1.3",
"emojis-list": "2.1.0",
"json5": "0.5.1"
},
"_requested": {
"raw": "resolve-url-loader@^2.0.0",
"scope": null,
"escapedName": "resolve-url-loader",
"name": "resolve-url-loader",
"rawSpec": "^2.0.0",
"spec": ">=2.0.0 <3.0.0",
"type": "range"
},
"_requiredBy": [
"/laravel-mix"
],
"_resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-2.0.2.tgz",
"_shasum": "c465e97ea0a4791f3961f766cea775ff2e3ceb8c",
"_shrinkwrap": null,
"_spec": "resolve-url-loader@^2.0.0",
"_where": "c:\\xampp\\htdocs\\laravel\\node_modules\\laravel-mix",
"author": {
"name": "bholloway"
},
"bugs": {
"url": "https://github.com/bholloway/resolve-url-loader/issues"
},
"dependencies": {
"adjust-sourcemap-loader": "^1.1.0",
"camelcase": "^4.0.0",
"convert-source-map": "^1.1.1",
"loader-utils": "^1.0.0",
"lodash.defaults": "^4.0.0",
"rework": "^1.0.1",
"rework-visit": "^1.0.0",
"source-map": "^0.5.6",
"urix": "^0.1.0"
},
"description": "Webpack loader that resolves relative paths in url() statements based on the original source file",
"devDependencies": {},
"directories": {},
"dist": {
"shasum": "c465e97ea0a4791f3961f766cea775ff2e3ceb8c",
"tarball": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-2.0.2.tgz"
},
"gitHead": "4d8df6d250ef870b70fdf125d041eaa95f597db1",
"homepage": "https://github.com/bholloway/resolve-url-loader",
"keywords": [
"webpack",
"loader",
"css",
"normalize",
"rewrite",
"resolve",
"url",
"sass",
"relative",
"file"
],
"license": "MIT",
"main": "index.js",
"maintainers": [
{
"name": "bholloway",
"email": "npm@bholloway.com"
}
],
"name": "resolve-url-loader",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/bholloway/resolve-url-loader.git"
},
"scripts": {},
"version": "2.0.2"
}
+179
View File
@@ -0,0 +1,179 @@
# Resolve URL Loader
[![NPM](https://nodei.co/npm/resolve-url-loader.png)](http://github.com/bholloway/resolve-url-loader)
Webpack loader that resolves relative paths in url() statements based on the original source file.
Use in conjunction with the [sass-loader](https://www.npmjs.com/package/sass-loader) and specify your asset `url()` relative to the `.scss` file in question.
This loader will use the source-map from the SASS compiler to locate the original `.scss` source file and write a more Webpack-friendly path for your asset. The CSS loader can then locate your asset for individual processing.
## Usage
Plain CSS works fine:
``` javascript
var css = require('!css-loader!resolve-url-loader!./file.css');
```
or using [sass-loader](https://github.com/jtangelder/sass-loader):
``` javascript
var css = require('!css-loader!resolve-url-loader!sass-loader?sourceMap!./file.scss');
```
Use in tandem with the [`style-loader`](https://github.com/webpack/style-loader) to compile sass and to add the css rules to your document:
``` javascript
require('!style!css!resolve-url!./file.css');
```
and
``` javascript
require('!style-loader!css-loader!resolve-url-loader!sass-loader?sourceMap!./file.scss');
```
### Apply via webpack config
It is preferable to adjust your `webpack.config` so to avoid having to prefix every `require()` statement:
``` javascript
module.exports = {
module: {
loaders: [
{
test : /\.css$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
}, {
test : /\.scss$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}
]
}
};
```
### IMPORTANT
#### Source maps required
Note that **source maps** must be enabled on any preceding loader. In the above example we use `sass?sourceMap`.
In some use cases (no preceding transpiler) there will be no incoming source map. Therefore we do not warn if the source-map is missing.
However if there is an incoming source-map then it must imply `source` information at each CSS `url()` statement.
#### Don't omit `-loader`
> Your `Webpack.config.js` should **always** use the long-form of the loader name (i.e. the `-loader` suffix).
There is another package called `resolve-url` which Webpack can confuse with `resolve-url-loader`.
There are other common examples. Such as `jshint` and `jshint-loader` packages being confused.
These conflicts are **very hard to debug** and will send you crazy. Your `Webpack.config.js` should **always** use the long-form of the loader name (i.e. the `-loader` suffix)
### Options
Options may be set using [query parameters](https://webpack.github.io/docs/using-loaders.html#query-parameters) or by using [programmatic parameters](https://webpack.github.io/docs/how-to-write-a-loader.html#programmable-objects-as-query-option). Programmatic means the following in your `webpack.config`.
``` javascript
module.exports = {
resolveUrlLoader: {
...
}
}
```
Where `...` is a hash of any of the following options.
* `absolute` Forces the url() to be resolved to an absolute path. This is considered
[bad practice](http://webpack.github.io/docs/how-to-write-a-loader.html#should-not-embed-absolute-paths) so only do it if you know what you are doing.
* `sourceMap` Generate a source-map.
* `silent` Do not display warnings on CSS syntax or source-map error.
* `fail` Syntax or source-map errors will result in an error.
* `keepQuery` Keep query string and hash within url. I.e. `url('./MyFont.eot?#iefix')`, `url('./MyFont.svg#oldiosfix')`.
* `debug` Show verbose information on the file paths being searched.
* `root` An optional directory within which search may be performed. Relative paths are permitted. Where omitted `process.cwd()` is used and should be sufficient for most use cases.
Note that query parameters take precedence over programmatic parameters.
## How it works
A [rework](https://github.com/reworkcss/rework) process is run on incoming CSS.
Each `url()` statement that implies an asset triggers a file search using node `fs` operations. The asset should be relative to the original source file that was transpiled. This file is determined by consulting the incoming source-map at the point of the `url()` statement.
Usually the asset is found relative to the original source file. However in some cases there is no immediate match (*cough* bootstrap *cough*) and we so we start searching both deeper and shallower from the starting directory.
Shallower paths must be limited to avoid the whole file system from being considered. Progressively shallower paths within the `root` will be considered. Paths featuring a `package.json` or `bower.json` file will not be considered.
If the asset is not found then the `url()` statement will not be updated with a Webpack module-relative path. However if the `url()` statement has no source-map `source` information the loader will fail.
The loader will also fail when input source-map `sources` cannot all be resolved relative to some consistent path within `root`.
## Limitations / Known-issues
### Mixins
Where `url()` statements are created in a SASS mixin the file may be expected to be relative to the mixin. Obviously this is **not** the desired behaviour.
This may be beacuse [rework](https://github.com/reworkcss/rework) is limited in how it works with the `sass-loader` source maps.
Unfortunately you need to work around this until we can investigate other solutions.
### Compatiblity
#### Webpack
This loader was written for Webpack 1 and has been tweaked to also support with Webpack 2.
If you find any Webpack 2 problems please comment on any similar existing issue or raise a new one.
#### Node-sass
> **IMPORTANT**
>
> Avoid the combination of **Webpack 1** with **node-sass@^4.0.0**.
>
> Use **Webpack 2** if you need latest **node-sass**
Since `node-sass@>=4.0.0` source-maps have sometimes featured negative column values. Since this loader relies on source-maps this can cause a fatal error.
I don't have a lot of data on this. If you are stuck in Webpack 1 and find that this combination actually works ok for you please let me know.
## Getting help
Webpack is difficult to configure but extremely rewarding.
I am happy for you to **raise an issue** to ask a question regarding this package. However ensure you follow the check-list first.
Currently I am **not** [dogfooding](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) this loader in my own work. I may rely on you being able to isolate the problem in a simple example project and to help debug.
I am happy this loader helps so many people. Open-source is provided as-is so please try not project your frustrations. There are some really great people who follow this project who can help.
### Issues
Before raising a new issue:
* remove this loader and make sure it is not a problem with a different loader in your config (most often the case)
* check [stack overflow](http://stackoverflow.com/search?q=resolve-url-loader) for an answer
* review [previous issues](/issues?utf8=%E2%9C%93&q=is%3Aissue) that may be similar
* be prepared to create a **simple open-source project** that exhibits your problem, should the solution not be immediately obvious to me
* (ideally) debug some code and let me know where the problem sits
### Pull requests
I am happy to take **pull requests**, however:
* Ensure your change is **backwards compatible** - not all users will be using the same version of Webpack or SASS that you do.
* Follow the **existing code style**.
* Do **not** overwrite existing variables with new values. I would prefer your change variable names elsewhere if necessary.
* Add **comments** that describe why the code is necessary - i.e. what edge case are we solving. Otherwise we may rewrite later and break your use-case.