feat: allow to extend conditionNames (#365)

Author: alexander-akait

src/utils.js

@@ -380,7 +380,7 @@ function mergeBlocks(blocks) {
 async function createEvaluator(loaderContext, code, options) {
   const fileResolve = loaderContext.getResolve({
     dependencyType: "stylus",
-    conditionNames: ["styl", "stylus", "style"],
+    conditionNames: ["styl", "stylus", "style", "..."],
     mainFields: ["styl", "style", "stylus", "main", "..."],
     mainFiles: ["index", "..."],
     extensions: [".styl", ".css"],
@@ -391,7 +391,7 @@ async function createEvaluator(loaderContext, code, options) {
   // Get cwd for `fastGlob()`
   // No need extra options, because they do not used when `resolveToContext` is `true`
   const globResolve = loaderContext.getResolve({
-    conditionNames: ["styl", "stylus", "style"],
+    conditionNames: ["styl", "stylus", "style", "..."],
     resolveToContext: true,
     preferRelative: true,
   });

test/__snapshots__/loader.test.js.snap

@@ -965,7 +965,7 @@ exports[`loader should work and respect the "compress" option with the "true" va
 
 exports[`loader should work and respect the "compress" option with the "true" value: warnings 1`] = `[]`;
 
-exports[`loader should work and respect the 'resolve.byDependecy.less' option: css 1`] = `
+exports[`loader should work and respect the 'resolve.byDependency.less' option: css 1`] = `
 ".b {
   color: #f00;
 }
@@ -975,9 +975,9 @@ exports[`loader should work and respect the 'resolve.byDependecy.less' option: c
 "
 `;
 
-exports[`loader should work and respect the 'resolve.byDependecy.less' option: errors 1`] = `[]`;
+exports[`loader should work and respect the 'resolve.byDependency.less' option: errors 1`] = `[]`;
 
-exports[`loader should work and respect the 'resolve.byDependecy.less' option: warnings 1`] = `[]`;
+exports[`loader should work and respect the 'resolve.byDependency.less' option: warnings 1`] = `[]`;
 
 exports[`loader should work binop import: css 1`] = `
 ".not-real-nib {
@@ -1029,6 +1029,28 @@ exports[`loader should work when stylusOptions is function: errors 1`] = `[]`;
 
 exports[`loader should work when stylusOptions is function: warnings 1`] = `[]`;
 
+exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme1): css 1`] = `
+".load-me {
+  color: #f00;
+}
+"
+`;
+
+exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme1): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme1): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme2): css 1`] = `
+".load-me {
+  color: #00f;
+}
+"
+`;
+
+exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme2): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme2): warnings 1`] = `[]`;
+
 exports[`loader should work with bootstrap: css 1`] = `
 "/*!
  * Bootstrap v3.4.1 (http://getbootstrap.com)

test/fixtures/import-package-with-exports-and-custom-condition.styl

@@ -0,0 +1 @@
+@import 'package-with-exports-and-custom-condition'

test/fixtures/node_modules/package-with-exports-and-custom-condition/index.cjs

@@ -109,12 +109,32 @@ function evaluator() {
   };
 }
 
-async function getCodeFromStylus(testId, options = {}) {
+async function getCodeFromStylus(testId, options = {}, context = {}) {
   const defaultOptions = {
     shouldUseWebpackImporter: true,
   };
   const stylusOptions = options.stylusOptions || {};
-  let pathToFile = path.resolve(__dirname, "..", "fixtures", testId);
+
+  let pathToFile;
+
+  if (context.packageExportsCustomConditionTestVariant === 1) {
+    pathToFile = path.resolve(
+      __dirname,
+      "..",
+      "fixtures",
+      "node_modules/package-with-exports-and-custom-condition/style-1.styl"
+    );
+  } else if (context.packageExportsCustomConditionTestVariant === 2) {
+    pathToFile = path.resolve(
+      __dirname,
+      "..",
+      "fixtures",
+      "node_modules/package-with-exports-and-custom-condition/style-2.styl"
+    );
+  } else {
+    pathToFile = path.resolve(__dirname, "..", "fixtures", testId);
+  }
+
   let data;
 
   try {

test/fixtures/node_modules/package-with-exports-and-custom-condition/index.js

@@ -1705,7 +1705,7 @@ describe("loader", () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
-  it("should work and respect the 'resolve.byDependecy.less' option", async () => {
+  it("should work and respect the 'resolve.byDependency.less' option", async () => {
     const testId = "./by-dependency.styl";
     const compiler = getCompiler(
       testId,
@@ -1729,4 +1729,58 @@ describe("loader", () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
+
+  it(`should work with a package with "styl" and "exports" fields and a custom condition (theme1)`, async () => {
+    const testId = "./import-package-with-exports-and-custom-condition.styl";
+    const compiler = getCompiler(
+      testId,
+      {},
+      {
+        resolve: {
+          conditionNames: ["theme1", "..."],
+        },
+      }
+    );
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromStylus = await getCodeFromStylus(
+      testId,
+      {},
+      {
+        packageExportsCustomConditionTestVariant: 1,
+      }
+    );
+
+    expect(codeFromBundle.css).toBe(codeFromStylus.css);
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
+  it(`should work with a package with "styl" and "exports" fields and a custom condition (theme2)`, async () => {
+    const testId = "./import-package-with-exports-and-custom-condition.styl";
+    const compiler = getCompiler(
+      testId,
+      {},
+      {
+        resolve: {
+          conditionNames: ["theme2", "..."],
+        },
+      }
+    );
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromStylus = await getCodeFromStylus(
+      testId,
+      {},
+      {
+        packageExportsCustomConditionTestVariant: 2,
+      }
+    );
+
+    expect(codeFromBundle.css).toBe(codeFromStylus.css);
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 });