test: import with file protocol

Author: cap-Bernardito

.gitignore

@@ -11,6 +11,8 @@ npm-debug.log*
 /test/fixtures/import/import-absolute.css
 /test/fixtures/url/url-absolute.css
 /test/fixtures/modules/composes/composes-absolute.css
+/test/fixtures/import/import-file-protocol.css
+/test/fixtures/url/url-file-protocol.css
 
 .DS_Store
 Thumbs.db

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

@@ -152,6 +152,41 @@ Array [
 
 exports[`"import" option should keep original order: warnings 1`] = `Array []`;
 
+exports[`"import" option should resolve "file" protocol: errors 1`] = `Array []`;
+
+exports[`"import" option should resolve "file" protocol: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
+import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./test.css\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\"\\", \\"\\"]);
+// Exports
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"import" option should resolve "file" protocol: result 1`] = `
+Array [
+  Array [
+    "../../src/index.js?[ident]!./import/test.css",
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    "./import/import-file-protocol.css",
+    "",
+    "",
+  ],
+]
+`;
+
+exports[`"import" option should resolve "file" protocol: warnings 1`] = `Array []`;
+
 exports[`"import" option should resolve absolute path: errors 1`] = `Array []`;
 
 exports[`"import" option should resolve absolute path: module 1`] = `

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

@@ -1,5 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"url" option should resolve "file" protocol path: errors 1`] = `Array []`;
+
+exports[`"url" option should resolve "file" protocol path: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
+import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
+import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\"\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.background-other {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.background-other {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"url" option should resolve "file" protocol path: result 1`] = `
+Array [
+  Array [
+    "./url/url-file-protocol.css",
+    "
+.background {
+  background: url(/webpack/public/path/img.png);
+}
+
+.background-other {
+  background: url(/webpack/public/path/img.png);
+}
+
+.background-other {
+  background: url(/webpack/public/path/img.png);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"url" option should resolve "file" protocol path: warnings 1`] = `Array []`;
+
 exports[`"url" option should resolve absolute path: errors 1`] = `Array []`;
 
 exports[`"url" option should resolve absolute path: module 1`] = `

test/fixtures/import/import-file-protocol.js

@@ -0,0 +1,5 @@
+import css from './import-file-protocol.css';
+
+__export__ = css;
+
+export default css;

test/fixtures/url/url-file-protocol.js

@@ -0,0 +1,5 @@
+import css from './url-file-protocol.css';
+
+__export__ = css;
+
+export default css;

test/import-option.test.js

@@ -173,6 +173,29 @@ describe('"import" option', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should resolve "file" protocol', async () => {
+    // Create the file with absolute path
+    const fileDirectory = path.resolve(__dirname, 'fixtures', 'import');
+    const file = path.resolve(fileDirectory, 'import-file-protocol.css');
+    const absolutePath = path
+      .resolve(fileDirectory, 'test.css')
+      .replace(/\\/g, '/');
+
+    fs.writeFileSync(file, `@import "file://${absolutePath}";`);
+
+    const compiler = getCompiler('./import/import-file-protocol.js');
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./import/import-file-protocol.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 throw an error on unresolved import', async () => {
     const compiler = getCompiler('./import/unresolved.js');
     const stats = await compile(compiler);

test/url-option.test.js

@@ -104,6 +104,42 @@ describe('"url" option', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should resolve "file" protocol path', async () => {
+    // Create the file with absolute path
+    const fileDirectory = path.resolve(__dirname, 'fixtures', 'url');
+    const file = path.resolve(fileDirectory, 'url-file-protocol.css');
+    const absolutePath = path
+      .resolve(fileDirectory, 'img.png')
+      .replace(/\\/g, '/');
+    const code = `
+.background {
+  background: url(file://${absolutePath});
+}
+
+.background-other {
+  background: url(file://${absolutePath.replace(/e/g, '%65')});
+}
+
+.background-other {
+  background: url('file://${absolutePath.replace(/e/g, '\\\ne')}');
+}
+`;
+
+    fs.writeFileSync(file, code);
+
+    const compiler = getCompiler('./url/url-file-protocol.js');
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./url/url-file-protocol.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 throw an error on unresolved import', async () => {
     const compiler = getCompiler('./url/url-unresolved.js');
     const stats = await compile(compiler);