fix: keep order of @imports with the webpackIgnore comment (#1600)

Author: alexander-akait

src/plugins/postcss-import-parser.js

@@ -8,12 +8,7 @@ import {
  WEBPACK_IGNORE_COMMENT_REGEXP,
 } from "../utils";
 
-function parseNode(atRule, key, options) {
- // Convert only top-level @import
- if (atRule.parent.type !== "root") {
- return;
- }
-
+function isIgnoredAfterName(atRule) {
  if (
  atRule.raws &&
  atRule.raws.afterName &&
@@ -25,20 +20,35 @@ function parseNode(atRule, key, options) {
  .match(WEBPACK_IGNORE_COMMENT_REGEXP);
 
  if (matched && matched[2] === "true") {
- return;
+ return true;
  }
  }
 
+ return false;
+}
+
+function isIgnoredPrevNode(atRule) {
  const prevNode = atRule.prev();
 
  if (prevNode && prevNode.type === "comment") {
  const matched = prevNode.text.match(WEBPACK_IGNORE_COMMENT_REGEXP);
 
  if (matched && matched[2] === "true") {
- return;
+ return true;
  }
  }
 
+ return false;
+}
+
+function parseNode(atRule, key, options) {
+ // Convert only top-level @import
+ if (atRule.parent.type !== "root") {
+ return;
+ }
+
+ const isIgnored = isIgnoredAfterName(atRule) || isIgnoredPrevNode(atRule);
+
  // Nodes do not exists - `@import url('http://') :root {}`
  if (atRule.nodes) {
  const error = new Error(
@@ -97,7 +107,12 @@ function parseNode(atRule, key, options) {
 
  url = normalizeUrl(url, isStringValue);
 
- const { requestable, needResolve } = isURLRequestable(url, options);
+ let requestable = false;
+ let needResolve = false;
+
+ if (!isIgnored) {
+ ({ requestable, needResolve } = isURLRequestable(url, options));
+ }
 
  let prefix;
 

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

@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"import" option should jeep order of imports with 'webpackIgnore': errors 1`] = `[]`;
+
+exports[`"import" option should jeep order of imports with 'webpackIgnore': module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "../../../src/runtime/noSourceMaps.js";
+import ___CSS_LOADER_API_IMPORT___ from "../../../src/runtime/api.js";
+import ___CSS_LOADER_AT_RULE_IMPORT_0___ from "-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./test.css";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
+___CSS_LOADER_EXPORT___.push([module.id, "@import url(/assets/themes.css);"]);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \`/*! /* webpackIgnore: true */
+
+body {
+ background: red;
+}
+\`, ""]);
+// Exports
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"import" option should jeep order of imports with 'webpackIgnore': result 1`] = `
+"@import url(/assets/themes.css);.test {
+ a: a;
+}
+/*! /* webpackIgnore: true */
+
+body {
+ background: red;
+}
+"
+`;
+
+exports[`"import" option should jeep order of imports with 'webpackIgnore': warnings 1`] = `[]`;
+
 exports[`"import" option should keep original order: errors 1`] = `[]`;
 
 exports[`"import" option should keep original order: module 1`] = `

test/__snapshots__/loader.test.js.snap

@@ -2558,6 +2558,11 @@ var ___CSS_LOADER_URL_IMPORT_3___ = new URL("./fonts/Roboto-Regular.ttf", import
 var ___CSS_LOADER_URL_IMPORT_4___ = new URL("./fonts/Roboto-Regular.svg", import.meta.url);
 var ___CSS_LOADER_URL_IMPORT_5___ = new URL("./fonts/Roboto-Regular.eot", import.meta.url);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
+___CSS_LOADER_EXPORT___.push([module.id, "@import url(./basic.css);"]);
+___CSS_LOADER_EXPORT___.push([module.id, "@import url(./imported.css);"]);
+___CSS_LOADER_EXPORT___.push([module.id, "@import url(./simple.css);"]);
+___CSS_LOADER_EXPORT___.push([module.id, "@import url(./simple.css);"]);
+___CSS_LOADER_EXPORT___.push([module.id, "@import url(./simple.css);"]);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
@@ -2572,11 +2577,6 @@ var ___CSS_LOADER_URL_REPLACEMENT_6___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_
 var ___CSS_LOADER_URL_REPLACEMENT_7___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___, { needQuotes: true });
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \`/* webpackIgnore: true */
-@import url(./basic.css);
-@import /* webpackIgnore: true */ url(./imported.css);
-@import /* webpackIgnore: false */ /* webpackIgnore: true */ url(./simple.css);
-@import /* webpackIgnore: false */ /* webpackIgnore: true */ /* webpackIgnore: true */ url(./simple.css);
-@import /* webpackIgnore: false */ /* webpackIgnore: false */ /* webpackIgnore: true */ url(./simple.css);
 
 /** Resolved **/
 /** Resolved **/
@@ -2830,6 +2830,26 @@ export default ___CSS_LOADER_EXPORT___;
 
 exports[`loader should work with webpackIgnore comment: result 1`] = `
 [
+ [
+ "./webpackIgnore.css",
+ "@import url(./basic.css);",
+ ],
+ [
+ "./webpackIgnore.css",
+ "@import url(./imported.css);",
+ ],
+ [
+ "./webpackIgnore.css",
+ "@import url(./simple.css);",
+ ],
+ [
+ "./webpackIgnore.css",
+ "@import url(./simple.css);",
+ ],
+ [
+ "./webpackIgnore.css",
+ "@import url(./simple.css);",
+ ],
  [
  "../../src/index.js??ruleSet[1].rules[0].use[0]!./simple.css",
  ".some-class {
@@ -2865,11 +2885,6 @@ exports[`loader should work with webpackIgnore comment: result 1`] = `
  [
  "./webpackIgnore.css",
  "/* webpackIgnore: true */
-@import url(./basic.css);
-@import /* webpackIgnore: true */ url(./imported.css);
-@import /* webpackIgnore: false */ /* webpackIgnore: true */ url(./simple.css);
-@import /* webpackIgnore: false */ /* webpackIgnore: true */ /* webpackIgnore: true */ url(./simple.css);
-@import /* webpackIgnore: false */ /* webpackIgnore: false */ /* webpackIgnore: true */ url(./simple.css);
 
 /** Resolved **/
 /** Resolved **/

test/fixtures/import/webpackIgnore-order.css

@@ -0,0 +1,7 @@
+/*! /* webpackIgnore: true */
+@import url("/assets/themes.css");
+@import "~test";
+
+body {
+ background: red;
+}

test/fixtures/import/webpackIgnore-order.js

@@ -0,0 +1,5 @@
+import css from './webpackIgnore-order.css';
+
+__export__ = css.toString();
+
+export default css;

test/import-option.test.js

@@ -588,4 +588,18 @@ describe('"import" option', () => {
  expect(getWarnings(stats)).toMatchSnapshot("warnings");
  expect(getErrors(stats)).toMatchSnapshot("errors");
  });
+
+ it("should jeep order of imports with 'webpackIgnore'", async () => {
+ const compiler = getCompiler("./import/webpackIgnore-order.js");
+ const stats = await compile(compiler);
+
+ expect(
+ getModuleSource("./import/webpackIgnore-order.css", stats),
+ ).toMatchSnapshot("module");
+ expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
+ "result",
+ );
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats)).toMatchSnapshot("errors");
+ });
 });