fix: respected style field from package.json

webpack-contrib · Jul 3, 2020 · c2947ba · c2947ba
1 parent e2205af
commit c2947ba
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,4 @@ Thumbs.db
 .vscode
 *.sublime-project
 *.sublime-workspace
+/test/fixtures/import/import-absolute.css
diff --git a/src/index.js b/src/index.js
@@ -58,6 +58,7 @@ export default function loader(content, map, meta) {
     plugins.push(
       importParser({
         context: this.context,
+        rootContext: this.rootContext,
         filter: getFilter(options.import, this.resourcePath),
         resolver,
         urlHandler,

diff --git a/src/plugins/postcss-import-parser.js b/src/plugins/postcss-import-parser.js
@@ -1,6 +1,6 @@
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
-import { isUrlRequest } from 'loader-utils';
+import { isUrlRequest, urlToRequest } from 'loader-utils';
 
 import { normalizeUrl, resolveRequests } from '../utils';
 
@@ -77,6 +77,13 @@ export default postcss.plugin(pluginName, (options) => (css, result) => {
         return;
       }
 
+      let request;
+
+      // May be url is absolute url, but not //example.com
+      if (url.charAt(0) === '/' && url.charAt(1) !== '/') {
+        request = urlToRequest(url, options.rootContext);
+      }
+
       const isRequestable = isUrlRequest(url);
 
       if (isRequestable) {
@@ -107,7 +114,7 @@ export default postcss.plugin(pluginName, (options) => (css, result) => {
 
       tasks.push(
         Promise.resolve(index).then(async (currentIndex) => {
-          if (isRequestable) {
+          if (isRequestable || request) {
             const importKey = url;
             let importName = importsMap.get(importKey);
 
@@ -117,10 +124,20 @@ export default postcss.plugin(pluginName, (options) => (css, result) => {
 
               const { resolver, context } = options;
 
+              const possibleRequest = [url];
+
+              if (request) {
+                possibleRequest.push(request);
+              }
+
               let resolvedUrl;
 
               try {
-                resolvedUrl = await resolveRequests(resolver, context, [url]);
+                resolvedUrl = await resolveRequests(
+                  resolver,
+                  context,
+                  possibleRequest
+                );
               } catch (error) {
                 throw error;
               }

diff --git a/src/utils.js b/src/utils.js
@@ -423,10 +423,6 @@ function getExportCode(
 }
 
 async function resolveRequests(resolve, context, possibleRequests) {
-  if (possibleRequests.length === 0) {
-    return Promise.reject();
-  }
-
   return resolve(context, possibleRequests[0])
     .then((result) => {
       return result;
@@ -438,7 +434,7 @@ async function resolveRequests(resolve, context, possibleRequests) {
         throw error;
       }
 
-      return this.resolveRequests(context, tailPossibleRequests);
+      return resolveRequests(resolve, context, tailPossibleRequests);
     });
 }
 

diff --git a/test/__snapshots__/import-option.test.js.snap b/test/__snapshots__/import-option.test.js.snap
@@ -152,6 +152,88 @@ Array [
 
 exports[`"import" option should keep original order: warnings 1`] = `Array []`;
 
+exports[`"import" option should resolve absolute path: errors 1`] = `Array []`;
+
+exports[`"import" option should resolve absolute path: module 1`] = `
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ident]!./test.css\\");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
+// Module
+exports.push([module.id, \\"\\", \\"\\"]);
+// Exports
+module.exports = exports;
+"
+`;
+
+exports[`"import" option should resolve absolute path: result 1`] = `
+Array [
+  Array [
+    "../../src/index.js?[ident]!./import/test.css",
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    "./import/import-absolute.css",
+    "",
+    "",
+  ],
+]
+`;
+
+exports[`"import" option should resolve absolute path: warnings 1`] = `Array []`;
+
+exports[`"import" option should resolve absolute url relative rootContext: errors 1`] = `Array []`;
+
+exports[`"import" option should resolve absolute url relative rootContext: module 1`] = `
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ident]!./test.css\\");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
+// Module
+exports.push([module.id, \\".class {\\\\n  a: b c d;\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+module.exports = exports;
+"
+`;
+
+exports[`"import" option should resolve absolute url relative rootContext: result 1`] = `
+Array [
+  Array [
+    "../../src/index.js?[ident]!./import/test.css",
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    "../../src/index.js?[ident]!./import/test.css",
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    "./import/import-absolute-url.css",
+    ".class {
+  a: b c d;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"import" option should resolve absolute url relative rootContext: warnings 1`] = `Array []`;
+
 exports[`"import" option should respect stype field in package.json: errors 1`] = `Array []`;
 
 exports[`"import" option should respect stype field in package.json: module 1`] = `

diff --git a/test/fixtures/import/import-absolute-url.css b/test/fixtures/import/import-absolute-url.css
@@ -0,0 +1,6 @@
+@import url(/import/test.css);
+@import "/import/test.css";
+
+.class {
+  a: b c d;
+}
diff --git a/test/fixtures/import/import-absolute-url.js b/test/fixtures/import/import-absolute-url.js
@@ -0,0 +1,5 @@
+import css from './import-absolute-url.css';
+
+__export__ = css;
+
+export default css;
diff --git a/test/fixtures/import/import-absolute.js b/test/fixtures/import/import-absolute.js
@@ -0,0 +1,5 @@
+import css from './import-absolute.css';
+
+__export__ = css;
+
+export default css;
diff --git a/test/import-option.test.js b/test/import-option.test.js
@@ -1,3 +1,6 @@
+import path from 'path';
+import fs from 'fs';
+
 import {
   compile,
   getCompiler,
@@ -100,4 +103,39 @@ describe('"import" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should resolve absolute url relative rootContext', async () => {
+    const compiler = getCompiler('./import/import-absolute-url.js');
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./import/import-absolute-url.css', stats)
+    ).toMatchSnapshot('module');
+    expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
+      'result'
+    );
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should resolve absolute path', async () => {
+    // Create the file with absolute path
+    const fileDirectory = path.resolve(__dirname, 'fixtures', 'import');
+    const file = path.resolve(fileDirectory, 'import-absolute.css');
+    const absolutePath = path.resolve(fileDirectory, 'test.css');
+
+    fs.writeFileSync(file, `@import "${absolutePath}";`);
+
+    const compiler = getCompiler('./import/import-absolute.js');
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./import/import-absolute.css', stats)
+    ).toMatchSnapshot('module');
+    expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
+      'result'
+    );
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });