feat: nested webpack resolve in the import option (#295)

webpack-contrib · Oct 29, 2020 · 390aeba · 390aeba
1 parent 0584740
commit 390aeba
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 0 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -400,6 +400,37 @@ async function createEvaluator(loaderContext, code, options) {
         : path.normalize(resolved);
 
       resolvedImportDependencies.set(importPath, result);
+
+      const dependenciesOfImportDependencies = [];
+
+      for (const dependency of isArray ? result.resolved : [result.resolved]) {
+        dependenciesOfImportDependencies.push(
+          (async () => {
+            let dependencyCode;
+
+            try {
+              dependencyCode = (
+                await readFile(loaderContext.fs, dependency)
+              ).toString();
+            } catch (error) {
+              loaderContext.emitError(error);
+            }
+
+            await getDependencies(
+              resolvedDependencies,
+              loaderContext,
+              fileResolve,
+              globResolve,
+              seen,
+              dependencyCode,
+              dependency,
+              options
+            );
+          })()
+        );
+      }
+
+      await Promise.all(dependenciesOfImportDependencies);
     })
   );
 

diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -402,6 +402,58 @@ exports[`loader imports files listed in option as glob: errors 1`] = `Array []`;
 
 exports[`loader imports files listed in option as glob: warnings 1`] = `Array []`;
 
+exports[`loader imports files listed in options with nested glob import: css 1`] = `
+".a-glob {
+  color: #000;
+}
+.b-glob {
+  background: #808080;
+}
+.a-glob-webpack {
+  color: #000;
+}
+.b-glob-webpack {
+  background: #808080;
+}
+.glob-in-node {
+  color: #fff;
+}
+.glob-in-node {
+  background: #ff7f50;
+}
+.index-glob {
+  font-size: 1rem;
+}
+.a-glob {
+  color: #000;
+}
+.b-glob {
+  background: #808080;
+}
+.a-glob-webpack {
+  color: #000;
+}
+.b-glob-webpack {
+  background: #808080;
+}
+.glob-entry {
+  box-sizing: border-box;
+}
+body {
+  font: 12px Helvetica, Arial, sans-serif;
+}
+a.button {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+"
+`;
+
+exports[`loader imports files listed in options with nested glob import: errors 1`] = `Array []`;
+
+exports[`loader imports files listed in options with nested glob import: warnings 1`] = `Array []`;
+
 exports[`loader imports files with special characters listed in glob: css 1`] = `
 ".directoryfile {
   color: #f00;
@@ -506,6 +558,25 @@ exports[`loader in a nested import load module from webpack: errors 1`] = `Array
 
 exports[`loader in a nested import load module from webpack: warnings 1`] = `Array []`;
 
+exports[`loader in a nested import specified in options: css 1`] = `
+".imported-in-web-modules {
+  font-size: 2em;
+}
+body {
+  font: 12px Helvetica, Arial, sans-serif;
+}
+a.button {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+"
+`;
+
+exports[`loader in a nested import specified in options: errors 1`] = `Array []`;
+
+exports[`loader in a nested import specified in options: warnings 1`] = `Array []`;
+
 exports[`loader resolve with webpack if stylus can't find it: css 1`] = `
 ".imported-in-web-modules {
   font-size: 2em;

diff --git a/test/loader.test.js b/test/loader.test.js
@@ -435,6 +435,67 @@ describe('loader', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('in a nested import specified in options', async () => {
+    const testId = './basic.styl';
+    const compiler = getCompiler(
+      testId,
+      {
+        stylusOptions: {
+          import: ['shallow-webpack.styl'],
+        },
+      },
+      {
+        resolve: {
+          modules: [path.join(__dirname, 'fixtures', 'web_modules')],
+        },
+      }
+    );
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromStylus = await getCodeFromStylus(testId, {
+      stylusOptions: {
+        import: ['shallow-webpack.styl'],
+      },
+    });
+
+    expect(codeFromBundle.css).toBe(codeFromStylus.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('imports files listed in options with nested glob import', async () => {
+    const testId = './basic.styl';
+    const compiler = getCompiler(
+      testId,
+      {
+        stylusOptions: {
+          import: ['import-glob-webpack.styl'],
+        },
+      },
+      {
+        resolve: {
+          alias: {
+            globAlias: path.resolve(__dirname, 'fixtures', 'glob-webpack-2'),
+            globAlias2: path.resolve(__dirname, 'fixtures', 'glob'),
+          },
+        },
+      }
+    );
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromStylus = await getCodeFromStylus(testId, {
+      stylusOptions: {
+        import: ['import-glob-webpack.styl'],
+      },
+    });
+
+    expect(codeFromBundle.css).toBe(codeFromStylus.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
   it('resolves css with webpack but does not import it', async () => {
     const testId = './import-webpack-css.styl';
     const compiler = getCompiler(testId);