Skip to content

Commit 1c20b1e

Browse files
evilebottnawievilebottnawi
authored
fix: parsing
1 parent 7f49a0a commit 1c20b1e

File tree

10 files changed

+162
-19
lines changed

10 files changed

+162
-19
lines changed

‎src/plugins/postcss-icss-parser.js

+20-7
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,27 @@ export default postcss.plugin(
2020
continue;
2121
}
2222

23-
const request = requestify(normalizeUrl(url, true), options.rootContext);
23+
let normalizedUrl = url;
24+
let prefix = '';
25+
26+
const queryParts = normalizedUrl.split('!');
27+
28+
if (queryParts.length > 1) {
29+
normalizedUrl = queryParts.pop();
30+
prefix = queryParts.join('!');
31+
}
32+
33+
const request = requestify(
34+
normalizeUrl(normalizedUrl, true),
35+
options.rootContext
36+
);
2437
const doResolve = async () => {
2538
const { resolver, context } = options;
2639
const resolvedUrl = await resolveRequests(resolver, context, [
27-
...new Set([url, request]),
40+
...new Set([normalizedUrl, request]),
2841
]);
2942

30-
return { url: resolvedUrl, tokens };
43+
return { url: resolvedUrl, prefix, tokens };
3144
};
3245

3346
tasks.push(doResolve());
@@ -36,9 +49,9 @@ export default postcss.plugin(
3649
const results = await Promise.all(tasks);
3750

3851
for (let index = 0; index <= results.length - 1; index++) {
39-
const { url, tokens } = results[index];
40-
41-
const importKey = url;
52+
const { url, prefix, tokens } = results[index];
53+
const newUrl = prefix ? `${prefix}!${url}` : url;
54+
const importKey = newUrl;
4255
let importName = imports.get(importKey);
4356

4457
if (!importName) {
@@ -50,7 +63,7 @@ export default postcss.plugin(
5063
type: 'import',
5164
value: {
5265
importName,
53-
url: options.urlHandler(url),
66+
url: options.urlHandler(newUrl),
5467
icss: true,
5568
order: 0,
5669
index,

‎src/plugins/postcss-import-parser.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export default postcss.plugin(pluginName, (options) => async (css, result) => {
172172
if (isRequestable) {
173173
const { prefix } = results[index];
174174
const newUrl = prefix ? `${prefix}!${url}` : url;
175-
const importKey = prefix ? newUrl : url;
175+
const importKey = newUrl;
176176
let importName = imports.get(importKey);
177177

178178
if (!importName) {

‎test/__snapshots__/import-option.test.js.snap

+68-2
Large diffs are not rendered by default.

‎test/__snapshots__/modules-option.test.js.snap

+29-5
Original file line numberDiff line numberDiff line change
@@ -1132,7 +1132,10 @@ Array [
11321132
],
11331133
Array [
11341134
"../../src/index.js?[ident]!./modules/composes/scss-file.scss",
1135-
"._14lUoCryZnM4Rrkm49iWuC {
1135+
"$color: red;
1136+
1137+
._14lUoCryZnM4Rrkm49iWuC {
1138+
color: $color;
11361139
padding: 15px;
11371140
}
11381141
",
@@ -1179,6 +1182,7 @@ import ___CSS_LOADER_ICSS_IMPORT_3___ from \\"-!../../../../src/index.js??[ident
11791182
import ___CSS_LOADER_ICSS_IMPORT_4___ from \\"-!../../../../src/index.js??[ident]!./top-relative.css\\";
11801183
import ___CSS_LOADER_ICSS_IMPORT_5___ from \\"-!../../../../src/index.js??[ident]!../issue-861/node_modules/package/style.css\\";
11811184
import ___CSS_LOADER_ICSS_IMPORT_6___ from \\"-!../../../../src/index.js??[ident]!./alias.css\\";
1185+
import ___CSS_LOADER_ICSS_IMPORT_7___ from \\"-!../../../../src/index.js??[ident]!./scss-file.scss\\";
11821186
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../../src/index.js??[ident]!./test-other.css\\";
11831187
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../../src/runtime/getUrl.js\\";
11841188
import ___CSS_LOADER_URL_IMPORT_0___ from \\"../../url/img.png\\";
@@ -1190,10 +1194,11 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_3___, \\"\\", true);
11901194
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_4___, \\"\\", true);
11911195
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_5___, \\"\\", true);
11921196
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_6___, \\"\\", true);
1197+
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_7___, \\"\\", true);
11931198
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"(min-width: 100px)\\");
11941199
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
11951200
// Module
1196-
___CSS_LOADER_EXPORT___.push([module.id, \\"._2ZmR2b3YBVn0i8sme-abcC {\\\\n color: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\";\\\\n}\\\\n\\\\n._3dxIylSbTBEe450DFBxy5D {\\\\n color: blue;\\\\n}\\\\n\\\\n.EcQSwQce4PuQ5vNAybT9N {\\\\n display: block;\\\\n}\\\\n\\\\n.hTH4alr_d-S0jPncN6ib3 {\\\\n width: \\" + ___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"] + \\";\\\\n}\\\\n\\\\n._7sobwviowI6_CZkzLjYZG {\\\\n color: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"] + \\";\\\\n}\\\\n\\\\n.YpDepip9R1BGGAy-rGgvc {\\\\n prop: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\";\\\\n duplicate: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"] + \\";\\\\n}\\\\n\\\\n._3dfrN27nghAjb3tcT6R_Ov {\\\\n color: red;\\\\n}\\\\n\\\\n._3aPunKIij5oyAtcB6y9-Xm {\\\\n color: yellow;\\\\n}\\\\n\\\\n._3Qp0o615k38gm2l4OVRknw {\\\\n color: gray;\\\\n}\\\\n\\\\n._2Zsff12VKF2NbAGVE1sdzC {\\\\n color: gray;\\\\n}\\\\n\\\\n._3itMfHbLQSSkBisENyA8TF {\\\\n color: gainsboro;\\\\n}\\\\n\\\\n._2ChGydqcGYRLzAo3_Iomr2 {\\\\n color: gainsboro;\\\\n}\\\\n\\\\n._1ai7yu9kkZ_8JwK0EMbe6U {\\\\n color: #BF4040;\\\\n}\\\\n\\\\n.OX01CBO1Ma7xJh6yAybXq {\\\\n color: black;\\\\n}\\\\n\\\\n@media (min-width: 960px) {\\\\n ._2Yk-wvfy8t_ESEwwB1Fc0y {\\\\n padding: 0 20px;\\\\n }\\\\n}\\\\n\\\\n.\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"] + \\" {\\\\n color: white;\\\\n}\\\\n\\\\n@media \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"] + \\" {\\\\n ._2Yk-wvfy8t_ESEwwB1Fc0y {\\\\n padding: 20px 20px;\\\\n }\\\\n}\\\\n@value v-comment: /* comment */;\\\\n\\\\n._2PhbElc8FsODw7KMuxWJyk {\\\\n v-ident: validIdent;\\\\n v-pre-defined-ident: left;\\\\n v-string: 'content';\\\\n v-string-1: '';\\\\n v-url: url(https://www.exammple.com/images/my-background.png);\\\\n v-url-1: url('https://www.exammple.com/images/my-background.png');\\\\n v-url-2: url(\\\\\\"https://www.exammple.com/images/my-background.png\\\\\\");\\\\n v-integer: 100;\\\\n v-integer-1: -100;\\\\n v-integer-2: +100;\\\\n v-number: .60;\\\\n v-number-1: -456.8;\\\\n v-number-2: -3.4e-2;\\\\n v-dimension: 12px;\\\\n v-percentage: 100%;\\\\n v-hex: #fff;\\\\n v-comment: v-comment 10px v-comment;\\\\n v-function: rgb(0,0,0);\\\\n v-unicode-range: U+0025-00FF;\\\\n mutliple: #fff .60 100%;\\\\n}\\\\n\\\\n\\\\na {\\\\n content: 'content';\\\\n}\\\\n\\\\n@supports (content: 'content') {\\\\n a {\\\\n content: 'content';\\\\n }\\\\n}\\\\n\\\\n[class~='content'] {\\\\n color:green;\\\\n}\\\\n\\\\n._1qvhWcgsRpzv9-_jaooxI0 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
1201+
___CSS_LOADER_EXPORT___.push([module.id, \\"._2ZmR2b3YBVn0i8sme-abcC {\\\\n color: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\";\\\\n}\\\\n\\\\n._3dxIylSbTBEe450DFBxy5D {\\\\n color: blue;\\\\n}\\\\n\\\\n.EcQSwQce4PuQ5vNAybT9N {\\\\n display: block;\\\\n}\\\\n\\\\n.hTH4alr_d-S0jPncN6ib3 {\\\\n width: \\" + ___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"] + \\";\\\\n}\\\\n\\\\n._7sobwviowI6_CZkzLjYZG {\\\\n color: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"] + \\";\\\\n}\\\\n\\\\n.YpDepip9R1BGGAy-rGgvc {\\\\n prop: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\";\\\\n duplicate: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"] + \\";\\\\n}\\\\n\\\\n._3dfrN27nghAjb3tcT6R_Ov {\\\\n color: red;\\\\n}\\\\n\\\\n._3aPunKIij5oyAtcB6y9-Xm {\\\\n color: yellow;\\\\n}\\\\n\\\\n._3Qp0o615k38gm2l4OVRknw {\\\\n color: gray;\\\\n}\\\\n\\\\n._2Zsff12VKF2NbAGVE1sdzC {\\\\n color: gray;\\\\n}\\\\n\\\\n._3itMfHbLQSSkBisENyA8TF {\\\\n color: gainsboro;\\\\n}\\\\n\\\\n._2ChGydqcGYRLzAo3_Iomr2 {\\\\n color: gainsboro;\\\\n}\\\\n\\\\n._1ai7yu9kkZ_8JwK0EMbe6U {\\\\n color: #BF4040;\\\\n}\\\\n\\\\n.OX01CBO1Ma7xJh6yAybXq {\\\\n color: black;\\\\n}\\\\n\\\\n@media (min-width: 960px) {\\\\n ._2Yk-wvfy8t_ESEwwB1Fc0y {\\\\n padding: 0 20px;\\\\n }\\\\n}\\\\n\\\\n.\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"] + \\" {\\\\n color: white;\\\\n}\\\\n\\\\n@media \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"] + \\" {\\\\n ._2Yk-wvfy8t_ESEwwB1Fc0y {\\\\n padding: 20px 20px;\\\\n }\\\\n}\\\\n@value v-comment: /* comment */;\\\\n\\\\n._2PhbElc8FsODw7KMuxWJyk {\\\\n v-ident: validIdent;\\\\n v-pre-defined-ident: left;\\\\n v-string: 'content';\\\\n v-string-1: '';\\\\n v-url: url(https://www.exammple.com/images/my-background.png);\\\\n v-url-1: url('https://www.exammple.com/images/my-background.png');\\\\n v-url-2: url(\\\\\\"https://www.exammple.com/images/my-background.png\\\\\\");\\\\n v-integer: 100;\\\\n v-integer-1: -100;\\\\n v-integer-2: +100;\\\\n v-number: .60;\\\\n v-number-1: -456.8;\\\\n v-number-2: -3.4e-2;\\\\n v-dimension: 12px;\\\\n v-percentage: 100%;\\\\n v-hex: #fff;\\\\n v-comment: v-comment 10px v-comment;\\\\n v-function: rgb(0,0,0);\\\\n v-unicode-range: U+0025-00FF;\\\\n mutliple: #fff .60 100%;\\\\n}\\\\n\\\\n\\\\na {\\\\n content: 'content';\\\\n}\\\\n\\\\n@supports (content: 'content') {\\\\n a {\\\\n content: 'content';\\\\n }\\\\n}\\\\n\\\\n[class~='content'] {\\\\n color:green;\\\\n}\\\\n\\\\n._1qvhWcgsRpzv9-_jaooxI0 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n._1-QX-dLNLF1zFn-cPfLHcH {\\\\n background: red;\\\\n}\\\\n\\", \\"\\"]);
11971202
// Exports
11981203
___CSS_LOADER_EXPORT___.locals = {
11991204
\\"v-def\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\"\\",
@@ -1240,7 +1245,8 @@ ___CSS_LOADER_EXPORT___.locals = {
12401245
\\"black-selector\\": \\"OX01CBO1Ma7xJh6yAybXq\\",
12411246
\\"header\\": \\"_2Yk-wvfy8t_ESEwwB1Fc0y\\",
12421247
\\"foobarbaz\\": \\"_2PhbElc8FsODw7KMuxWJyk\\",
1243-
\\"url\\": \\"_1qvhWcgsRpzv9-_jaooxI0\\"
1248+
\\"url\\": \\"_1qvhWcgsRpzv9-_jaooxI0\\",
1249+
\\"main\\": \\"_1-QX-dLNLF1zFn-cPfLHcH \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
12441250
};
12451251
export default ___CSS_LOADER_EXPORT___;
12461252
"
@@ -1300,6 +1306,14 @@ Array [
13001306
",
13011307
"",
13021308
],
1309+
Array [
1310+
"../../src/index.js?[ident]!./modules/composes/scss-file.scss",
1311+
"._14lUoCryZnM4Rrkm49iWuC {
1312+
color: red;
1313+
padding: 15px;
1314+
}",
1315+
"",
1316+
],
13031317
Array [
13041318
"../../src/index.js?[ident]!./modules/composes/test-other.css",
13051319
"._24axXNO_oC23T0D0YAz-0Y {
@@ -1425,6 +1439,10 @@ a {
14251439
._1qvhWcgsRpzv9-_jaooxI0 {
14261440
background: url(/webpack/public/path/img.png);
14271441
}
1442+
1443+
._1-QX-dLNLF1zFn-cPfLHcH {
1444+
background: red;
1445+
}
14281446
",
14291447
"",
14301448
],
@@ -2228,6 +2246,7 @@ import ___CSS_LOADER_ICSS_IMPORT_3___ from \\"-!../../../../src/index.js??[ident
22282246
import ___CSS_LOADER_ICSS_IMPORT_4___ from \\"-!../../../../src/index.js??[ident]!./top-relative.css\\";
22292247
import ___CSS_LOADER_ICSS_IMPORT_5___ from \\"-!../../../../src/index.js??[ident]!../issue-861/node_modules/package/style.css\\";
22302248
import ___CSS_LOADER_ICSS_IMPORT_6___ from \\"-!../../../../src/index.js??[ident]!./alias.css\\";
2249+
import ___CSS_LOADER_ICSS_IMPORT_7___ from \\"-!../../../../src/index.js??[ident]!./scss-file.scss\\";
22312250
var ___CSS_LOADER_EXPORT___ = {};
22322251
// Exports
22332252
___CSS_LOADER_EXPORT___.locals = {
@@ -2275,7 +2294,8 @@ ___CSS_LOADER_EXPORT___.locals = {
22752294
\\"black-selector\\": \\"_black-selector\\",
22762295
\\"header\\": \\"_header\\",
22772296
\\"foobarbaz\\": \\"_foobarbaz\\",
2278-
\\"url\\": \\"_url\\"
2297+
\\"url\\": \\"_url\\",
2298+
\\"main\\": \\"_main \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
22792299
};
22802300
export default ___CSS_LOADER_EXPORT___;
22812301
"
@@ -2295,6 +2315,7 @@ Object {
22952315
"header": "_header",
22962316
"m-large": "(min-width: 960px)",
22972317
"m-small": "(min-width: 320px)",
2318+
"main": "_main _scssClass",
22982319
"module": "_module _imported-module",
22992320
"other": "_other",
23002321
"other-other": "_other-other",
@@ -2346,6 +2367,7 @@ import ___CSS_LOADER_ICSS_IMPORT_3___ from \\"-!../../../../src/index.js??[ident
23462367
import ___CSS_LOADER_ICSS_IMPORT_4___ from \\"-!../../../../src/index.js??[ident]!./top-relative.css\\";
23472368
import ___CSS_LOADER_ICSS_IMPORT_5___ from \\"-!../../../../src/index.js??[ident]!../issue-861/node_modules/package/style.css\\";
23482369
import ___CSS_LOADER_ICSS_IMPORT_6___ from \\"-!../../../../src/index.js??[ident]!./alias.css\\";
2370+
import ___CSS_LOADER_ICSS_IMPORT_7___ from \\"-!../../../../src/index.js??[ident]!./scss-file.scss\\";
23492371
var ___CSS_LOADER_EXPORT___ = {};
23502372
// Exports
23512373
___CSS_LOADER_EXPORT___.locals = {
@@ -2393,7 +2415,8 @@ ___CSS_LOADER_EXPORT___.locals = {
23932415
\\"black-selector\\": \\"_black-selector\\",
23942416
\\"header\\": \\"_header\\",
23952417
\\"foobarbaz\\": \\"_foobarbaz\\",
2396-
\\"url\\": \\"_url\\"
2418+
\\"url\\": \\"_url\\",
2419+
\\"main\\": \\"_main \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
23972420
};
23982421
export default ___CSS_LOADER_EXPORT___;
23992422
"
@@ -2413,6 +2436,7 @@ Object {
24132436
"header": "_header",
24142437
"m-large": "(min-width: 960px)",
24152438
"m-small": "(min-width: 320px)",
2439+
"main": "_main _scssClass",
24162440
"module": "_module _imported-module",
24172441
"other": "_other",
24182442
"other-other": "_other-other",

‎test/__snapshots__/url-option.test.js.snap

+24-4
Large diffs are not rendered by default.

‎test/fixtures/import/import.css

+3
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,6 @@ st.css');
108108
\
109109
';
110110
@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css');
111+
@import url(test.css?foo=bar);
112+
@import url(test.css?foo=bar#hash);
113+
@import url(test.css?#hash);

‎test/fixtures/modules/composes/composes.css

+5
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,8 @@ a {
154154
.url {
155155
background: url(../../url/img.png);
156156
}
157+
158+
.main {
159+
composes: scssClass from 'sass-loader!./scss-file.scss';
160+
background: red;
161+
}

‎test/fixtures/modules/composes/scss-file.scss

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
@value v-bar: white;
44
@value v-baz: coral;
55

6+
$color: red;
7+
68
.scssClass {
9+
color: $color;
710
padding: 15px;
811
}

‎test/fixtures/url/url.css

+4
Original file line numberDiff line numberDiff line change
@@ -343,3 +343,7 @@ a {
343343
background: url("./img\'\28%29 img.png");
344344
background: url(./img\'\28%29\ img.png);
345345
}
346+
347+
.qqq {
348+
background: url('!!../../helpers/url-loader.js?esModule=false!~package/img.png')
349+
}

‎test/helpers/url-loader.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function loader() {
2+
return 'module.exports = __webpack_public_path__ + "custom-img.png"';
3+
}
4+
5+
module.exports = loader;

0 commit comments

Comments
 (0)