test: more

Author: alexander-akait

test/__snapshots__/loader.test.js.snap

@@ -115,6 +115,177 @@ You may need an appropriate loader to handle this file type, currently no loader
 
 exports[`loader should throws error when no loader(s) for assets: warnings 1`] = `Array []`;
 
+exports[`loader should work with "asset" module type: errors 1`] = `Array []`;
+
+exports[`loader should work with "asset" module type: module 1`] = `
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../src/runtime/api.js\\");
+var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../src/index.js!./imported.css\\");
+var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
+var ___CSS_LOADER_URL_IMPORT_0___ = require(\\"./url/img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
+var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
+// Module
+exports.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n  --foo: 1px;\\\\n  --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n  body {\\\\n    background-color: lightblue;\\\\n  }\\\\n}\\\\n\\\\n.class {\\\\n  content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n  content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n  content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n  content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n  content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n  display: flex;\\\\n  flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n  align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n  align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n  align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n  align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n  font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n  content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n  content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n  --title-align: center;\\\\n  --sr-only: {\\\\n    position: absolute;\\\\n    width: 1px;\\\\n    height: 1px;\\\\n    padding: 0;\\\\n    overflow: hidden;\\\\n    clip: rect(0,0,0,0);\\\\n    white-space: nowrap;\\\\n    clip-path: inset(50%);\\\\n    border: 0;\\\\n  };\\\\n}\\\\n\\\\n.test {\\\\n  content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n  content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n  content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n  content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n  margin-top: 1px\\\\\\\\9;\\\\n  background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n  content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n  background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==);\\\\n}\\\\n\\\\na[href=''] {\\\\n  color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n  color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n  color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n  color: blue;\\\\n}\\\\n\\", \\"\\"]);
+"
+`;
+
+exports[`loader should work with "asset" module type: result 1`] = `
+Array [
+  Array [
+    "../../src/index.js!./imported.css",
+    ".foo {
+  color: red;
+}
+",
+    "",
+  ],
+  Array [
+    "./basic.css",
+    "@charset \\"UTF-8\\";
+
+/* Comment */
+
+.class {
+  color: red;
+  background: url(/webpack/public/path/de52feff0a80fb98abe3.png);
+}
+
+.class-duplicate-url {
+  background: url(/webpack/public/path/de52feff0a80fb98abe3.png);
+}
+
+:root {
+  --foo: 1px;
+  --bar: 2px;
+}
+
+.class { a: b c d; }
+
+.two {}
+
+.u-m\\\\+ { a: b c d; }
+
+.class { content: \\"\\\\F10C\\" }
+
+@media only screen and (max-width: 600px) {
+  body {
+    background-color: lightblue;
+  }
+}
+
+.class {
+  content: \\"\\\\2193\\";
+  content: \\"\\\\2193\\\\2193\\";
+  content: \\"\\\\2193 \\\\2193\\";
+  content: \\"\\\\2193\\\\2193\\\\2193\\";
+  content: \\"\\\\2193 \\\\2193 \\\\2193\\";
+}
+
+.-top {}
+.\\\\-top {}
+
+#\\\\#test {}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+.grid.\\\\-top {
+  align-items: flex-start;
+}
+.grid.-top {
+  align-items: flex-start;
+}
+.grid.\\\\-middle {
+  align-items: center;
+}
+.grid.\\\\-bottom {
+  align-items: flex-end;
+}
+
+.u-m\\\\00002b {}
+
+.u-m00002b {}
+
+#u-m\\\\+ {}
+
+body {
+  font-family: '微软雅黑'; /* some chinese font name */
+}
+
+.myStyle {
+  content: '\\\\e901';
+}
+
+.myStyle {
+  content: '\\\\E901';
+}
+
+.♫ {}
+
+.\\\\3A \\\\\`\\\\( {} /* matches elements with class=\\":\`(\\" */
+.\\\\31 a2b3c {} /* matches elements with class=\\"1a2b3c\\" */
+#\\\\#fake-id {} /* matches the element with id=\\"#fake-id\\" */
+#-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */
+#© {} /* matches the element with id=\\"©\\" */
+
+:root {
+  --title-align: center;
+  --sr-only: {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+  };
+}
+
+.test {
+  content: \\"\\\\2014\\\\A0\\";
+  content: \\"\\\\2014 \\\\A0\\";
+  content: \\"\\\\A0 \\\\2014\\";
+  content: \\"\\\\A0\\\\2014\\";
+  margin-top: 1px\\\\9;
+  background-color: #000\\\\9;
+}
+
+.light.on .bulb:before{
+  content: '💡';
+}
+
+.base64 {
+  background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==);
+}
+
+a[href=''] {
+  color: red;
+}
+
+a[href='' i] {
+  color: red;
+}
+
+a[href=\\"\\"] {
+  color: blue;
+}
+
+a[href=\\"\\" i] {
+  color: blue;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`loader should work with "asset" module type: warnings 1`] = `Array []`;
+
 exports[`loader should work with "sass-loader": errors 1`] = `Array []`;
 
 exports[`loader should work with "sass-loader": module 1`] = `

test/helpers/getCompiler.js

@@ -27,7 +27,7 @@ export default (fixture, loaderOptions = {}, config = {}) => {
           ],
         },
         {
-          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
           loader: 'file-loader',
           options: { name: '[name].[ext]' },
         },

test/loader.test.js

@@ -2,6 +2,8 @@ import path from 'path';
 
 import postcssPresetEnv from 'postcss-preset-env';
 
+import { version } from 'webpack';
+
 import {
   compile,
   getCompiler,
@@ -48,6 +50,50 @@ describe('loader', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should work with "asset" module type', async () => {
+    const isWebpack5 = version[0] === '5';
+
+    const compiler = getCompiler(
+      './basic.js',
+      {},
+      {
+        module: {
+          rules: [
+            {
+              test: /\.css$/i,
+              use: [
+                {
+                  loader: path.resolve(__dirname, '../src'),
+                },
+              ],
+            },
+            isWebpack5
+              ? {
+                  test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
+                  type: 'asset',
+                }
+              : {
+                  test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
+                  loader: 'file-loader',
+                  options: { name: '[hash].[ext]' },
+                },
+          ],
+        },
+        experiments: {
+          asset: true,
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getModuleSource('./basic.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 throws error when no loader(s) for assets', async () => {
     const compiler = getCompiler(
       './basic.js',