css-loader 4.3.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/README.md +5 -3
- package/dist/CssSyntaxError.js +3 -1
- package/dist/index.js +10 -2
- package/dist/options.json +0 -4
- package/dist/plugins/postcss-icss-parser.js +101 -96
- package/dist/plugins/postcss-import-parser.js +189 -183
- package/dist/plugins/postcss-url-parser.js +198 -194
- package/dist/runtime/api.js +3 -31
- package/dist/runtime/cssWithMappingToString.js +32 -0
- package/dist/utils.js +59 -27
- package/package.json +28 -28
|
@@ -5,210 +5,216 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _util = require("util");
|
|
9
|
-
|
|
10
|
-
var _postcss = _interopRequireDefault(require("postcss"));
|
|
11
|
-
|
|
12
8
|
var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
|
|
13
9
|
|
|
14
10
|
var _utils = require("../utils");
|
|
15
11
|
|
|
16
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
13
|
|
|
18
|
-
|
|
14
|
+
function visitor(result, parsedResults, node, key) {
|
|
15
|
+
// Convert only top-level @import
|
|
16
|
+
if (node.parent.type !== 'root') {
|
|
17
|
+
return;
|
|
18
|
+
} // Nodes do not exists - `@import url('http://') :root {}`
|
|
19
19
|
|
|
20
|
-
function walkAtRules(css, result, options, callback) {
|
|
21
|
-
const accumulator = [];
|
|
22
|
-
css.walkAtRules(/^import$/i, atRule => {
|
|
23
|
-
// Convert only top-level @import
|
|
24
|
-
if (atRule.parent.type !== 'root') {
|
|
25
|
-
return;
|
|
26
|
-
} // Nodes do not exists - `@import url('http://') :root {}`
|
|
27
20
|
|
|
21
|
+
if (node.nodes) {
|
|
22
|
+
result.warn("It looks like you didn't end your @import statement correctly. Child nodes are attached to it.", {
|
|
23
|
+
node
|
|
24
|
+
});
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
28
27
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
const {
|
|
37
|
-
nodes: paramsNodes
|
|
38
|
-
} = (0, _postcssValueParser.default)(atRule.params); // No nodes - `@import ;`
|
|
39
|
-
// Invalid type - `@import foo-bar;`
|
|
28
|
+
const {
|
|
29
|
+
nodes: paramsNodes
|
|
30
|
+
} = (0, _postcssValueParser.default)(node[key]); // No nodes - `@import ;`
|
|
31
|
+
// Invalid type - `@import foo-bar;`
|
|
40
32
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
33
|
+
if (paramsNodes.length === 0 || paramsNodes[0].type !== 'string' && paramsNodes[0].type !== 'function') {
|
|
34
|
+
result.warn(`Unable to find uri in "${node.toString()}"`, {
|
|
35
|
+
node
|
|
36
|
+
});
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
47
39
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
});
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
isStringValue = paramsNodes[0].nodes.length !== 0 && paramsNodes[0].nodes[0].type === 'string';
|
|
64
|
-
url = isStringValue ? paramsNodes[0].nodes[0].value : _postcssValueParser.default.stringify(paramsNodes[0].nodes);
|
|
65
|
-
} // Empty url - `@import "";` or `@import url();`
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
if (url.trim().length === 0) {
|
|
69
|
-
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
|
|
70
|
-
node: atRule
|
|
40
|
+
let isStringValue;
|
|
41
|
+
let url;
|
|
42
|
+
|
|
43
|
+
if (paramsNodes[0].type === 'string') {
|
|
44
|
+
isStringValue = true;
|
|
45
|
+
url = paramsNodes[0].value;
|
|
46
|
+
} else {
|
|
47
|
+
// Invalid function - `@import nourl(test.css);`
|
|
48
|
+
if (paramsNodes[0].value.toLowerCase() !== 'url') {
|
|
49
|
+
result.warn(`Unable to find uri in "${node.toString()}"`, {
|
|
50
|
+
node
|
|
71
51
|
});
|
|
72
52
|
return;
|
|
73
53
|
}
|
|
74
54
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
isStringValue,
|
|
79
|
-
mediaNodes: paramsNodes.slice(1)
|
|
80
|
-
});
|
|
81
|
-
});
|
|
82
|
-
callback(null, accumulator);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
const asyncWalkAtRules = (0, _util.promisify)(walkAtRules);
|
|
55
|
+
isStringValue = paramsNodes[0].nodes.length !== 0 && paramsNodes[0].nodes[0].type === 'string';
|
|
56
|
+
url = isStringValue ? paramsNodes[0].nodes[0].value : _postcssValueParser.default.stringify(paramsNodes[0].nodes);
|
|
57
|
+
} // Empty url - `@import "";` or `@import url();`
|
|
86
58
|
|
|
87
|
-
var _default = _postcss.default.plugin(pluginName, options => async (css, result) => {
|
|
88
|
-
const parsedResults = await asyncWalkAtRules(css, result, options);
|
|
89
59
|
|
|
90
|
-
if (
|
|
91
|
-
|
|
60
|
+
if (url.trim().length === 0) {
|
|
61
|
+
result.warn(`Unable to find uri in "${node.toString()}"`, {
|
|
62
|
+
node
|
|
63
|
+
});
|
|
64
|
+
return;
|
|
92
65
|
}
|
|
93
66
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
isStringValue,
|
|
102
|
-
mediaNodes
|
|
103
|
-
} = parsedResult;
|
|
104
|
-
let normalizedUrl = url;
|
|
105
|
-
let prefix = '';
|
|
106
|
-
const isRequestable = (0, _utils.isUrlRequestable)(normalizedUrl);
|
|
107
|
-
|
|
108
|
-
if (isRequestable) {
|
|
109
|
-
const queryParts = normalizedUrl.split('!');
|
|
110
|
-
|
|
111
|
-
if (queryParts.length > 1) {
|
|
112
|
-
normalizedUrl = queryParts.pop();
|
|
113
|
-
prefix = queryParts.join('!');
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue); // Empty url after normalize - `@import '\
|
|
117
|
-
// \
|
|
118
|
-
// \
|
|
119
|
-
// ';
|
|
120
|
-
|
|
121
|
-
if (normalizedUrl.trim().length === 0) {
|
|
122
|
-
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
|
|
123
|
-
node: atRule
|
|
124
|
-
}); // eslint-disable-next-line no-continue
|
|
125
|
-
|
|
126
|
-
continue;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
let media;
|
|
131
|
-
|
|
132
|
-
if (mediaNodes.length > 0) {
|
|
133
|
-
media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
if (options.filter && !options.filter(normalizedUrl, media)) {
|
|
137
|
-
// eslint-disable-next-line no-continue
|
|
138
|
-
continue;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
atRule.remove();
|
|
142
|
-
|
|
143
|
-
if (isRequestable) {
|
|
144
|
-
const request = (0, _utils.requestify)(normalizedUrl, options.rootContext);
|
|
145
|
-
tasks.push((async () => {
|
|
146
|
-
const {
|
|
147
|
-
resolver,
|
|
148
|
-
context
|
|
149
|
-
} = options;
|
|
150
|
-
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
|
|
151
|
-
return {
|
|
152
|
-
url: resolvedUrl,
|
|
153
|
-
media,
|
|
154
|
-
prefix,
|
|
155
|
-
isRequestable
|
|
156
|
-
};
|
|
157
|
-
})());
|
|
158
|
-
} else {
|
|
159
|
-
tasks.push({
|
|
160
|
-
url,
|
|
161
|
-
media,
|
|
162
|
-
prefix,
|
|
163
|
-
isRequestable
|
|
164
|
-
});
|
|
165
|
-
}
|
|
166
|
-
}
|
|
67
|
+
parsedResults.push({
|
|
68
|
+
node,
|
|
69
|
+
url,
|
|
70
|
+
isStringValue,
|
|
71
|
+
mediaNodes: paramsNodes.slice(1)
|
|
72
|
+
});
|
|
73
|
+
}
|
|
167
74
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
75
|
+
const plugin = (options = {}) => {
|
|
76
|
+
return {
|
|
77
|
+
postcssPlugin: 'postcss-import-parser',
|
|
78
|
+
|
|
79
|
+
prepare(result) {
|
|
80
|
+
const parsedResults = [];
|
|
81
|
+
return {
|
|
82
|
+
AtRule: {
|
|
83
|
+
import(atRule) {
|
|
84
|
+
visitor(result, parsedResults, atRule, 'params');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
async OnceExit() {
|
|
90
|
+
if (parsedResults.length === 0) {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
const imports = new Map();
|
|
95
|
+
const tasks = [];
|
|
96
|
+
|
|
97
|
+
for (const parsedResult of parsedResults) {
|
|
98
|
+
const {
|
|
99
|
+
node,
|
|
100
|
+
url,
|
|
101
|
+
isStringValue,
|
|
102
|
+
mediaNodes
|
|
103
|
+
} = parsedResult;
|
|
104
|
+
let normalizedUrl = url;
|
|
105
|
+
let prefix = '';
|
|
106
|
+
const isRequestable = (0, _utils.isUrlRequestable)(normalizedUrl);
|
|
107
|
+
|
|
108
|
+
if (isRequestable) {
|
|
109
|
+
const queryParts = normalizedUrl.split('!');
|
|
110
|
+
|
|
111
|
+
if (queryParts.length > 1) {
|
|
112
|
+
normalizedUrl = queryParts.pop();
|
|
113
|
+
prefix = queryParts.join('!');
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue); // Empty url after normalize - `@import '\
|
|
117
|
+
// \
|
|
118
|
+
// \
|
|
119
|
+
// ';
|
|
120
|
+
|
|
121
|
+
if (normalizedUrl.trim().length === 0) {
|
|
122
|
+
result.warn(`Unable to find uri in "${node.toString()}"`, {
|
|
123
|
+
node
|
|
124
|
+
}); // eslint-disable-next-line no-continue
|
|
125
|
+
|
|
126
|
+
continue;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
let media;
|
|
131
|
+
|
|
132
|
+
if (mediaNodes.length > 0) {
|
|
133
|
+
media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
if (options.filter && !options.filter(normalizedUrl, media)) {
|
|
137
|
+
// eslint-disable-next-line no-continue
|
|
138
|
+
continue;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
node.remove();
|
|
142
|
+
|
|
143
|
+
if (isRequestable) {
|
|
144
|
+
const request = (0, _utils.requestify)(normalizedUrl, options.rootContext);
|
|
145
|
+
tasks.push((async () => {
|
|
146
|
+
const {
|
|
147
|
+
resolver,
|
|
148
|
+
context
|
|
149
|
+
} = options;
|
|
150
|
+
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
|
|
151
|
+
return {
|
|
152
|
+
url: resolvedUrl,
|
|
153
|
+
media,
|
|
154
|
+
prefix,
|
|
155
|
+
isRequestable
|
|
156
|
+
};
|
|
157
|
+
})());
|
|
158
|
+
} else {
|
|
159
|
+
tasks.push({
|
|
160
|
+
url,
|
|
161
|
+
media,
|
|
162
|
+
prefix,
|
|
163
|
+
isRequestable
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
const results = await Promise.all(tasks);
|
|
169
|
+
|
|
170
|
+
for (let index = 0; index <= results.length - 1; index++) {
|
|
171
|
+
const {
|
|
172
|
+
url,
|
|
173
|
+
isRequestable,
|
|
174
|
+
media
|
|
175
|
+
} = results[index];
|
|
176
|
+
|
|
177
|
+
if (isRequestable) {
|
|
178
|
+
const {
|
|
179
|
+
prefix
|
|
180
|
+
} = results[index];
|
|
181
|
+
const newUrl = prefix ? `${prefix}!${url}` : url;
|
|
182
|
+
const importKey = newUrl;
|
|
183
|
+
let importName = imports.get(importKey);
|
|
184
|
+
|
|
185
|
+
if (!importName) {
|
|
186
|
+
importName = `___CSS_LOADER_AT_RULE_IMPORT_${imports.size}___`;
|
|
187
|
+
imports.set(importKey, importName);
|
|
188
|
+
options.imports.push({
|
|
189
|
+
importName,
|
|
190
|
+
url: options.urlHandler(newUrl),
|
|
191
|
+
index
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
options.api.push({
|
|
196
|
+
importName,
|
|
197
|
+
media,
|
|
198
|
+
index
|
|
199
|
+
}); // eslint-disable-next-line no-continue
|
|
200
|
+
|
|
201
|
+
continue;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
options.api.push({
|
|
205
|
+
url,
|
|
206
|
+
media,
|
|
207
|
+
index
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
};
|
|
202
213
|
}
|
|
203
214
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
media,
|
|
207
|
-
index
|
|
208
|
-
});
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
return Promise.resolve();
|
|
212
|
-
});
|
|
215
|
+
};
|
|
216
|
+
};
|
|
213
217
|
|
|
218
|
+
plugin.postcss = true;
|
|
219
|
+
var _default = plugin;
|
|
214
220
|
exports.default = _default;
|