value-processor.js
4.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/*
* MIT License http://opensource.org/licenses/MIT
* Author: Ben Holloway @bholloway
*/
'use strict';
var path = require('path'),
loaderUtils = require('loader-utils');
/**
* Create a value processing function for a given file path.
*
* @param {function(Object):string} join The inner join function
* @param {string} root The loader options.root value where given
* @param {string} directory The directory of the file webpack is currently processing
* @return {function} value processing function
*/
function valueProcessor({ join, root, directory }) {
var URL_STATEMENT_REGEX = /(url\s*\(\s*)(?:(['"])((?:(?!\2).)*)(\2)|([^'"](?:(?!\)).)*[^'"]))(\s*\))/g,
QUERY_REGEX = /([?#])/g;
/**
* Process the given CSS declaration value.
*
* @param {string} value A declaration value that may or may not contain a url() statement
* @param {function(number):Object} getPathsAtChar Given an offset in the declaration value get a
* list of possible absolute path strings
*/
return function transformValue(value, getPathsAtChar) {
// 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
return value
.split(URL_STATEMENT_REGEX)
.map(initialise)
.map(eachSplitOrGroup)
.join('');
/**
* Ensure all capture group tokens are a valid string.
*
* @param {string|void} token A capture group or uncaptured token
* @returns {string}
*/
function initialise(token) {
return typeof token === 'string' ? token : '';
}
/**
* An Array reduce function that accumulates string length.
*/
function accumulateLength(accumulator, element) {
return accumulator + element.length;
}
/**
* Encode the content portion of <code>url()</code> statements.
* There are 6 capture groups in the split making every 7th unmatched.
*
* @param {string} element A single split item
* @param {number} i The index of the item in the split
* @param {Array} arr The array of split values
* @returns {string} Every 3 or 5 items is an encoded url everything else is as is
*/
function eachSplitOrGroup(element, i, arr) {
// the content of the url() statement is either in group 3 or group 5
var mod = i % 7;
// only one of the capture groups 3 or 5 will match the other will be falsey
if (element && ((mod === 3) || (mod === 5))) {
// calculate the offset of the match from the front of the string
var position = arr.slice(0, i - mod + 1).reduce(accumulateLength, 0);
// detect quoted url and unescape backslashes
var before = arr[i - 1],
after = arr[i + 1],
isQuoted = (before === after) && ((before === '\'') || (before === '"')),
unescaped = isQuoted ? element.replace(/\\{2}/g, '\\') : element;
// split into uri and query/hash and then determine if the uri is some type of file
var split = unescaped.split(QUERY_REGEX),
uri = split[0],
query = split.slice(1).join(''),
isRelative = testIsRelative(uri),
isAbsolute = testIsAbsolute(uri);
// file like URIs are processed but not all URIs are files
if (isRelative || isAbsolute) {
var bases = getPathsAtChar(position), // construct iterator as late as possible in case sourcemap invalid
absolute = join({ uri, query, isAbsolute, bases });
if (typeof absolute === 'string') {
var relative = path.relative(directory, absolute)
.replace(/\\/g, '/'); // #6 - backslashes are not legal in URI
return loaderUtils.urlToRequest(relative + query);
}
}
}
// everything else, including parentheses and quotation (where present) and media statements
return element;
}
};
/**
* The loaderUtils.isUrlRequest() doesn't support windows absolute paths on principle. We do not subscribe to that
* dogma so we add path.isAbsolute() check to allow them.
*
* We also eliminate module relative (~) paths.
*
* @param {string|undefined} uri A uri string possibly empty or undefined
* @return {boolean} True for relative uri
*/
function testIsRelative(uri) {
return !!uri && loaderUtils.isUrlRequest(uri, false) && !path.isAbsolute(uri) && (uri.indexOf('~') !== 0);
}
/**
* The loaderUtils.isUrlRequest() doesn't support windows absolute paths on principle. We do not subscribe to that
* dogma so we add path.isAbsolute() check to allow them.
*
* @param {string|undefined} uri A uri string possibly empty or undefined
* @return {boolean} True for absolute uri
*/
function testIsAbsolute(uri) {
return !!uri && (typeof root === 'string') && loaderUtils.isUrlRequest(uri, root) &&
(/^\//.test(uri) || path.isAbsolute(uri));
}
}
module.exports = valueProcessor;