fix: parsing

Author: evilebottnawi

src/plugins/postcss-icss-parser.js

@@ -20,14 +20,27 @@ export default postcss.plugin(
         continue;
       }
 
-      const request = requestify(normalizeUrl(url, true), options.rootContext);
+      let normalizedUrl = url;
+      let prefix = '';
+
+      const queryParts = normalizedUrl.split('!');
+
+      if (queryParts.length > 1) {
+        normalizedUrl = queryParts.pop();
+        prefix = queryParts.join('!');
+      }
+
+      const request = requestify(
+        normalizeUrl(normalizedUrl, true),
+        options.rootContext
+      );
       const doResolve = async () => {
         const { resolver, context } = options;
         const resolvedUrl = await resolveRequests(resolver, context, [
-          ...new Set([url, request]),
+          ...new Set([normalizedUrl, request]),
         ]);
 
-        return { url: resolvedUrl, tokens };
+        return { url: resolvedUrl, prefix, tokens };
       };
 
       tasks.push(doResolve());
@@ -36,9 +49,9 @@ export default postcss.plugin(
     const results = await Promise.all(tasks);
 
     for (let index = 0; index <= results.length - 1; index++) {
-      const { url, tokens } = results[index];
-
-      const importKey = url;
+      const { url, prefix, tokens } = results[index];
+      const newUrl = prefix ? `${prefix}!${url}` : url;
+      const importKey = newUrl;
       let importName = imports.get(importKey);
 
       if (!importName) {
@@ -50,7 +63,7 @@ export default postcss.plugin(
             type: 'import',
             value: {
               importName,
-              url: options.urlHandler(url),
+              url: options.urlHandler(newUrl),
               icss: true,
               order: 0,
               index,

src/plugins/postcss-import-parser.js

@@ -172,7 +172,7 @@ export default postcss.plugin(pluginName, (options) => async (css, result) => {
     if (isRequestable) {
       const { prefix } = results[index];
       const newUrl = prefix ? `${prefix}!${url}` : url;
-      const importKey = prefix ? newUrl : url;
+      const importKey = newUrl;
       let importName = imports.get(importKey);
 
       if (!importName) {

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

@@ -1132,7 +1132,10 @@ Array [
   ],
   Array [
     "../../src/index.js?[ident]!./modules/composes/scss-file.scss",
-    "._14lUoCryZnM4Rrkm49iWuC {
+    "$color: red;
+
+._14lUoCryZnM4Rrkm49iWuC {
+  color: $color;
   padding: 15px;
 }
 ",
@@ -1179,6 +1182,7 @@ import ___CSS_LOADER_ICSS_IMPORT_3___ from \\"-!../../../../src/index.js??[ident
 import ___CSS_LOADER_ICSS_IMPORT_4___ from \\"-!../../../../src/index.js??[ident]!./top-relative.css\\";
 import ___CSS_LOADER_ICSS_IMPORT_5___ from \\"-!../../../../src/index.js??[ident]!../issue-861/node_modules/package/style.css\\";
 import ___CSS_LOADER_ICSS_IMPORT_6___ from \\"-!../../../../src/index.js??[ident]!./alias.css\\";
+import ___CSS_LOADER_ICSS_IMPORT_7___ from \\"-!../../../../src/index.js??[ident]!./scss-file.scss\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../../src/index.js??[ident]!./test-other.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"../../url/img.png\\";
@@ -1190,10 +1194,11 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_3___, \\"\\", true);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_4___, \\"\\", true);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_5___, \\"\\", true);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_6___, \\"\\", true);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_7___, \\"\\", true);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"(min-width: 100px)\\");
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-___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\\", \\"\\"]);
+___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\\", \\"\\"]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	\\"v-def\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\"\\",
@@ -1240,7 +1245,8 @@ ___CSS_LOADER_EXPORT___.locals = {
 	\\"black-selector\\": \\"OX01CBO1Ma7xJh6yAybXq\\",
 	\\"header\\": \\"_2Yk-wvfy8t_ESEwwB1Fc0y\\",
 	\\"foobarbaz\\": \\"_2PhbElc8FsODw7KMuxWJyk\\",
-	\\"url\\": \\"_1qvhWcgsRpzv9-_jaooxI0\\"
+	\\"url\\": \\"_1qvhWcgsRpzv9-_jaooxI0\\",
+	\\"main\\": \\"_1-QX-dLNLF1zFn-cPfLHcH \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -1300,6 +1306,14 @@ Array [
 ",
     "",
   ],
+  Array [
+    "../../src/index.js?[ident]!./modules/composes/scss-file.scss",
+    "._14lUoCryZnM4Rrkm49iWuC {
+  color: red;
+  padding: 15px;
+}",
+    "",
+  ],
   Array [
     "../../src/index.js?[ident]!./modules/composes/test-other.css",
     "._24axXNO_oC23T0D0YAz-0Y {
@@ -1425,6 +1439,10 @@ a {
 ._1qvhWcgsRpzv9-_jaooxI0 {
   background: url(/webpack/public/path/img.png);
 }
+
+._1-QX-dLNLF1zFn-cPfLHcH {
+  background: red;
+}
 ",
     "",
   ],
@@ -2228,6 +2246,7 @@ import ___CSS_LOADER_ICSS_IMPORT_3___ from \\"-!../../../../src/index.js??[ident
 import ___CSS_LOADER_ICSS_IMPORT_4___ from \\"-!../../../../src/index.js??[ident]!./top-relative.css\\";
 import ___CSS_LOADER_ICSS_IMPORT_5___ from \\"-!../../../../src/index.js??[ident]!../issue-861/node_modules/package/style.css\\";
 import ___CSS_LOADER_ICSS_IMPORT_6___ from \\"-!../../../../src/index.js??[ident]!./alias.css\\";
+import ___CSS_LOADER_ICSS_IMPORT_7___ from \\"-!../../../../src/index.js??[ident]!./scss-file.scss\\";
 var ___CSS_LOADER_EXPORT___ = {};
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
@@ -2275,7 +2294,8 @@ ___CSS_LOADER_EXPORT___.locals = {
 	\\"black-selector\\": \\"_black-selector\\",
 	\\"header\\": \\"_header\\",
 	\\"foobarbaz\\": \\"_foobarbaz\\",
-	\\"url\\": \\"_url\\"
+	\\"url\\": \\"_url\\",
+	\\"main\\": \\"_main \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -2295,6 +2315,7 @@ Object {
     "header": "_header",
     "m-large": "(min-width: 960px)",
     "m-small": "(min-width: 320px)",
+    "main": "_main _scssClass",
     "module": "_module _imported-module",
     "other": "_other",
     "other-other": "_other-other",
@@ -2346,6 +2367,7 @@ import ___CSS_LOADER_ICSS_IMPORT_3___ from \\"-!../../../../src/index.js??[ident
 import ___CSS_LOADER_ICSS_IMPORT_4___ from \\"-!../../../../src/index.js??[ident]!./top-relative.css\\";
 import ___CSS_LOADER_ICSS_IMPORT_5___ from \\"-!../../../../src/index.js??[ident]!../issue-861/node_modules/package/style.css\\";
 import ___CSS_LOADER_ICSS_IMPORT_6___ from \\"-!../../../../src/index.js??[ident]!./alias.css\\";
+import ___CSS_LOADER_ICSS_IMPORT_7___ from \\"-!../../../../src/index.js??[ident]!./scss-file.scss\\";
 var ___CSS_LOADER_EXPORT___ = {};
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
@@ -2393,7 +2415,8 @@ ___CSS_LOADER_EXPORT___.locals = {
 	\\"black-selector\\": \\"_black-selector\\",
 	\\"header\\": \\"_header\\",
 	\\"foobarbaz\\": \\"_foobarbaz\\",
-	\\"url\\": \\"_url\\"
+	\\"url\\": \\"_url\\",
+	\\"main\\": \\"_main \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -2413,6 +2436,7 @@ Object {
     "header": "_header",
     "m-large": "(min-width: 960px)",
     "m-small": "(min-width: 320px)",
+    "main": "_main _scssClass",
     "module": "_module _imported-module",
     "other": "_other",
     "other-other": "_other-other",

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

@@ -108,3 +108,6 @@ st.css');
 \
 ';
 @import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css');
+@import url(test.css?foo=bar);
+@import url(test.css?foo=bar#hash);
+@import url(test.css?#hash);

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

@@ -154,3 +154,8 @@ a {
 .url {
   background: url(../../url/img.png);
 }
+
+.main {
+  composes: scssClass from 'sass-loader!./scss-file.scss';
+  background: red;
+}

test/fixtures/import/import.css

@@ -3,6 +3,9 @@
 @value v-bar: white;
 @value v-baz: coral;
 
+$color: red;
+
 .scssClass {
+  color: $color;
   padding: 15px;
 }

test/fixtures/modules/composes/composes.css

@@ -343,3 +343,7 @@ a {
   background: url("./img\'\28%29 img.png");
   background: url(./img\'\28%29\ img.png);
 }
+
+.qqq {
+  background: url('!!../../helpers/url-loader.js?esModule=false!~package/img.png')
+}

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

@@ -0,0 +1,5 @@
+function loader() {
+  return 'module.exports = __webpack_public_path__ + "custom-img.png"';
+}
+
+module.exports = loader;