feat: allow to extend conditionNames (#1092)

src/utils.js

@@ -530,7 +530,7 @@ function getWebpackResolver(
   const webpackModuleResolve = promiseResolve(
     resolverFactory({
       dependencyType: "sass",
-      conditionNames: ["sass", "style"],
+      conditionNames: ["sass", "style", "..."],
       mainFields: ["sass", "style", "main", "..."],
       mainFiles: ["_index", "index", "..."],
       extensions: [".sass", ".scss", ".css"],
@@ -541,7 +541,7 @@ function getWebpackResolver(
   const webpackImportResolve = promiseResolve(
     resolverFactory({
       dependencyType: "sass",
-      conditionNames: ["sass", "style"],
+      conditionNames: ["sass", "style", "..."],
       mainFields: ["sass", "style", "main", "..."],
       mainFiles: ["_index.import", "_index", "index.import", "index", "..."],
       extensions: [".sass", ".scss", ".css"],

test/__snapshots__/loader.test.js.snap

@@ -334390,6 +334390,126 @@ exports[`loader should work with a package with "sass" and "exports" fields ('sa
 
 exports[`loader should work with a package with "sass" and "exports" fields ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
 
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
+".load-me {
+  color: red;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = `
+".load-me {
+  color: red;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = `
+".load-me {
+  color: red; }
+"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = `
+".load-me {
+  color: red; }
+"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = `
+".load-me {
+  color: red;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = `
+".load-me {
+  color: red;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
+".load-me {
+  color: blue;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = `
+".load-me {
+  color: blue;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = `
+".load-me {
+  color: blue; }
+"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = `
+".load-me {
+  color: blue; }
+"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = `
+".load-me {
+  color: blue;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = `
+".load-me {
+  color: blue;
+}"
+`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;
+
+exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;
+
 exports[`loader should work with an alias ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
 "a {
   color: red;

test/helpers/getCodeFromSass.js

@@ -4,7 +4,7 @@ import fs from "fs";
 
 import { klona } from "klona/full";
 
-async function getCodeFromSass(testId, options) {
+async function getCodeFromSass(testId, options, context = {}) {
   const loaderOptions = klona(options);
   let sassOptions = options.sassOptions || {};
 
@@ -56,6 +56,27 @@ async function getCodeFromSass(testId, options) {
     testFolder,
     "node_modules/package-with-exports/style.scss"
   );
+  const pathToSassPackageWithExportsFieldsAndCustomConditionReplacer = () => {
+    if (context.packageExportsCustomConditionTestVariant === 1) {
+      return path.resolve(
+        testFolder,
+        "node_modules/package-with-exports-and-custom-condition/style-1.scss"
+      );
+    }
+
+    if (context.packageExportsCustomConditionTestVariant === 2) {
+      return path.resolve(
+        testFolder,
+        "node_modules/package-with-exports-and-custom-condition/style-2.scss"
+      );
+    }
+
+    console.warn(
+      "Expedted to receive .packageExportsCustomConditionTestVariant to properly resolve stylesheet in sass only compilation. "
+    );
+    return "";
+  };
+
   const pathToSCSSPackageWithIndexFile = path.resolve(
     testFolder,
     "node_modules/scss-package-with-index/index.scss"
@@ -765,7 +786,11 @@ async function getCodeFromSass(testId, options) {
         )
         .replace(/^~package-with-js-main-field/, pathToPackageWithJsMainField)
         .replace(/^~package-with-index/, pathToPackageWithIndex)
-        .replace(/^package-with-exports/, pathToSassPackageWithExportsFields)
+        .replace(
+          /^package-with-exports-and-custom-condition$/,
+          pathToSassPackageWithExportsFieldsAndCustomConditionReplacer
+        )
+        .replace(/^package-with-exports$/, pathToSassPackageWithExportsFields)
         .replace(/^file:\/\/\/language/, pathToLanguage)
         .replace(/^\/sass\/language.sass/, pathToLanguage)
         .replace(/^\/scss\/language.scss/, pathToLanguage)

test/loader.test.js

@@ -1037,6 +1037,64 @@ describe("loader", () => {
         });
       }
 
+      if (!isModernAPI) {
+        it(`should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
+          const testId = getTestId(
+            "import-package-with-exports-and-custom-condition",
+            syntax
+          );
+          const options = {
+            implementation,
+            api,
+          };
+          const compiler = getCompiler(testId, {
+            loader: { options },
+            resolve: {
+              conditionNames: ["theme1", "..."],
+            },
+          });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+          const codeFromSass = await getCodeFromSass(testId, options, {
+            packageExportsCustomConditionTestVariant: 1,
+          });
+
+          expect(codeFromBundle.css).toBe(codeFromSass.css);
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
+      }
+
+      if (!isModernAPI) {
+        it(`should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
+          const testId = getTestId(
+            "import-package-with-exports-and-custom-condition",
+            syntax
+          );
+          const options = {
+            implementation,
+            api,
+          };
+          const compiler = getCompiler(testId, {
+            loader: { options },
+            resolve: {
+              conditionNames: ["theme2", "..."],
+            },
+          });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+          const codeFromSass = await getCodeFromSass(testId, options, {
+            packageExportsCustomConditionTestVariant: 2,
+          });
+
+          expect(codeFromBundle.css).toBe(codeFromSass.css);
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
+      }
+
       if (!isModernAPI) {
         it(`should support resolving using the "file" schema ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
           const testId = getTestId("import-file-scheme", syntax);

test/sass/import-package-with-exports-and-custom-condition.sass

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

test/scss/import-package-with-exports-and-custom-condition.scss

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