From 796fe28574f7fe7ba37a283b430672c4eb367893 Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Tue, 17 Dec 2019 13:39:26 +0300 Subject: [PATCH] Test more (#1024) * test: more * test: more * test: more * test: more * test: more --- test/__snapshots__/import-option.test.js.snap | 4 +- test/__snapshots__/loader.test.js.snap | 173 ++++++++++++++ .../sourceMap-option.test.js.snap | 221 ++++++++++++++++-- test/fixtures/import/order-2.css | 2 +- test/fixtures/source-map/basic.css | 2 + test/fixtures/source-map/basic.postcss.css | 2 + test/fixtures/source-map/nested/nested.css | 3 + .../source-map/nested/nested.postcss.css | 3 + test/helpers/getCompiler.js | 2 +- test/loader.test.js | 51 ++++ test/sourceMap-option.test.js | 8 +- 11 files changed, 449 insertions(+), 22 deletions(-) create mode 100644 test/fixtures/source-map/nested/nested.css create mode 100644 test/fixtures/source-map/nested/nested.postcss.css diff --git a/test/__snapshots__/import-option.test.js.snap b/test/__snapshots__/import-option.test.js.snap index a75336f9..2cd39431 100644 --- a/test/__snapshots__/import-option.test.js.snap +++ b/test/__snapshots__/import-option.test.js.snap @@ -44,7 +44,7 @@ Array [ ], Array [ "../../src/index.js?[ident]!./import/order-2.css", - ".order-1 { + ".order-2 { color: red; } ", @@ -68,7 +68,7 @@ Array [ ], Array [ "../../src/index.js?[ident]!./import/order-2.css", - ".order-1 { + ".order-2 { color: red; } ", diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 681807fc..ef5ed1b2 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -115,6 +115,179 @@ 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 = ___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 +module.exports = exports; +" +`; + +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/img.png); +} + +.class-duplicate-url { + background: url(/webpack/public/path/img.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`] = ` diff --git a/test/__snapshots__/sourceMap-option.test.js.snap b/test/__snapshots__/sourceMap-option.test.js.snap index 34094921..02092fd5 100644 --- a/test/__snapshots__/sourceMap-option.test.js.snap +++ b/test/__snapshots__/sourceMap-option.test.js.snap @@ -5,7 +5,9 @@ exports[`"sourceMap" option false should not generate source maps when source ma exports[`"sourceMap" option false should not generate source maps when source maps equal to "null" from an other loader: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(false); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports @@ -15,6 +17,14 @@ module.exports = exports; exports[`"sourceMap" option false should not generate source maps when source maps equal to "null" from an other loader: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + ], Array [ "./source-map/basic.css", ".class { @@ -33,7 +43,9 @@ exports[`"sourceMap" option false should not generate source maps when source ma exports[`"sourceMap" option false should not generate source maps when source maps equal to "undefined" from an other loader: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(false); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports @@ -43,6 +55,14 @@ module.exports = exports; exports[`"sourceMap" option false should not generate source maps when source maps equal to "undefined" from an other loader: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + ], Array [ "./source-map/basic.css", ".class { @@ -61,7 +81,9 @@ exports[`"sourceMap" option false should not generate source maps when source ma exports[`"sourceMap" option false should not generate source maps when source maps is valid and string from an other loader: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(false); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports @@ -71,6 +93,14 @@ module.exports = exports; exports[`"sourceMap" option false should not generate source maps when source maps is valid and string from an other loader: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + ], Array [ "./source-map/basic.css", ".class { @@ -89,7 +119,9 @@ exports[`"sourceMap" option false should not generate source maps when source ma exports[`"sourceMap" option false should not generate source maps when source maps is valid from an other loader (\`postcss-loader\`): 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]!./nested/nested.postcss.css\\"); exports = ___CSS_LOADER_API_IMPORT___(false); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module exports.push([module.id, \\":root {\\\\n --fontSize: 1rem;\\\\n --mainColor: rgba(18,52,86,0.47059);\\\\n --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n overflow-x: hidden;\\\\n overflow-y: auto;\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n body {\\\\n color: rgba(18,52,86,0.47059);\\\\n color: var(--mainColor);\\\\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n font-size: 1rem;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(1rem * 1.5);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n word-wrap: break-word;\\\\n padding-left: calc(1rem / 2 + 1px);\\\\n padding-right: calc(1rem / 2 + 1px);\\\\n padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n margin-top: 0;\\\\n margin-bottom: 0;\\\\n}\\\\n\\\\na {\\\\n color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n color: #639;\\\\n }\\\\n\\", \\"\\"]); // Exports @@ -99,6 +131,14 @@ module.exports = exports; exports[`"sourceMap" option false should not generate source maps when source maps is valid from an other loader (\`postcss-loader\`): result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.postcss.css", + ".nested { + color: blue; +} +", + "", + ], Array [ "./source-map/basic.postcss.css", ":root { @@ -183,7 +223,9 @@ exports[`"sourceMap" option false should not generate source maps: errors 1`] = exports[`"sourceMap" option false should not generate source maps: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(false); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports @@ -193,6 +235,14 @@ module.exports = exports; exports[`"sourceMap" option false should not generate source maps: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + ], Array [ "./source-map/basic.css", ".class { @@ -211,7 +261,9 @@ exports[`"sourceMap" option not specified should not generate source maps: error exports[`"sourceMap" option not specified should not generate source maps: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(false); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports @@ -221,6 +273,14 @@ module.exports = exports; exports[`"sourceMap" option not specified should not generate source maps: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + ], Array [ "./source-map/basic.css", ".class { @@ -239,9 +299,11 @@ exports[`"sourceMap" option true should generate source maps when source maps eq exports[`"sourceMap" option true should generate source maps when source maps equal to "null" from an other loader: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(true); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module -exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\".class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -249,6 +311,29 @@ module.exports = exports; exports[`"sourceMap" option true should generate source maps when source maps equal to "null" from an other loader: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + Object { + "file": "nested.css", + "mappings": "AAAA;EACE,WAAW;AACb", + "names": Array [], + "sources": Array [ + "nested.css", + ], + "sourcesContent": Array [ + ".nested { + color: blue; +} +", + ], + "version": 3, + }, + ], Array [ "./source-map/basic.css", ".class { @@ -258,13 +343,15 @@ Array [ "", Object { "file": "basic.css", - "mappings": "AAAA;EACE,UAAU;AACZ", + "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ "basic.css", ], "sourcesContent": Array [ - ".class { + "@import \\"./nested/nested.css\\"; + +.class { color: red; } ", @@ -282,9 +369,11 @@ exports[`"sourceMap" option true should generate source maps when source maps eq exports[`"sourceMap" option true should generate source maps when source maps equal to "undefined" from an other loader: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(true); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module -exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\".class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -292,6 +381,29 @@ module.exports = exports; exports[`"sourceMap" option true should generate source maps when source maps equal to "undefined" from an other loader: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + Object { + "file": "nested.css", + "mappings": "AAAA;EACE,WAAW;AACb", + "names": Array [], + "sources": Array [ + "nested.css", + ], + "sourcesContent": Array [ + ".nested { + color: blue; +} +", + ], + "version": 3, + }, + ], Array [ "./source-map/basic.css", ".class { @@ -301,13 +413,15 @@ Array [ "", Object { "file": "basic.css", - "mappings": "AAAA;EACE,UAAU;AACZ", + "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ "basic.css", ], "sourcesContent": Array [ - ".class { + "@import \\"./nested/nested.css\\"; + +.class { color: red; } ", @@ -325,9 +439,11 @@ exports[`"sourceMap" option true should generate source maps when source maps is exports[`"sourceMap" option true should generate source maps when source maps is valid and string from an other loader: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(true); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module -exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\".class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\".class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -335,6 +451,29 @@ module.exports = exports; exports[`"sourceMap" option true should generate source maps when source maps is valid and string from an other loader: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + Object { + "file": "nested.css", + "mappings": "AAAA;EACE,WAAW;AACb", + "names": Array [], + "sources": Array [ + "nested.css", + ], + "sourcesContent": Array [ + ".nested { + color: blue; +} +", + ], + "version": 3, + }, + ], Array [ "./source-map/basic.css", ".class { @@ -344,7 +483,7 @@ Array [ "", Object { "file": "basic.css", - "mappings": "AAAA;EACE,UAAU;AACZ", + "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ "basic.css", @@ -368,9 +507,11 @@ exports[`"sourceMap" option true should generate source maps when source maps is exports[`"sourceMap" option true should generate source maps when source maps is valid from an other loader (\`postcss-loader\`): 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]!./nested/nested.postcss.css\\"); exports = ___CSS_LOADER_API_IMPORT___(true); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module -exports.push([module.id, \\":root {\\\\n --fontSize: 1rem;\\\\n --mainColor: rgba(18,52,86,0.47059);\\\\n --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n overflow-x: hidden;\\\\n overflow-y: auto;\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n body {\\\\n color: rgba(18,52,86,0.47059);\\\\n color: var(--mainColor);\\\\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n font-size: 1rem;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(1rem * 1.5);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n word-wrap: break-word;\\\\n padding-left: calc(1rem / 2 + 1px);\\\\n padding-right: calc(1rem / 2 + 1px);\\\\n padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n margin-top: 0;\\\\n margin-bottom: 0;\\\\n}\\\\n\\\\na {\\\\n color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n color: #639;\\\\n }\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.postcss.css\\"],\\"names\\":[],\\"mappings\\":\\"AAGA;EACE,gBAAgB;EAChB,mCAAsB;EACtB,yCAA4C;AAC9C;;AAEA;EACE,kBAAqB;EAArB,gBAAqB;EAArB,qBAAqB;AACvB;;AAEA;EACE;IACE,6BAAuB;IAAvB,uBAAuB;IACvB,iGAAsB;IACtB,eAA0B;IAA1B,0BAA0B;IAC1B,6BAAwC;IAAxC,wCAAwC;IACxC,qBAAyB;IACzB,kCAA+C;IAA/C,mCAA+C;IAA/C,6CAA+C;IAA/C,8CAA+C;EACjD;AACF;;AAEA;EACE,aAAe;EAAf,gBAAe;AACjB;;AAEA;EACE;AAKF;;AAHA;GACG,WAAoB;CACtB\\",\\"file\\":\\"basic.postcss.css\\",\\"sourcesContent\\":[\\"@custom-media --viewport-medium (width <= 50rem);\\\\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\\\\n\\\\n:root {\\\\n --fontSize: 1rem;\\\\n --mainColor: #12345678;\\\\n --secondaryColor: lab(32.5 38.5 -47.6 / 90%);\\\\n}\\\\n\\\\nhtml {\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (--viewport-medium) {\\\\n body {\\\\n color: var(--mainColor);\\\\n font-family: system-ui;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n overflow-wrap: break-word;\\\\n padding-inline: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\n:--heading {\\\\n margin-block: 0;\\\\n}\\\\n\\\\na {\\\\n color: rgb(0 0 100% / 90%);\\\\n\\\\n&:hover {\\\\n color: rebeccapurple;\\\\n }\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\":root {\\\\n --fontSize: 1rem;\\\\n --mainColor: rgba(18,52,86,0.47059);\\\\n --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n overflow-x: hidden;\\\\n overflow-y: auto;\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n body {\\\\n color: rgba(18,52,86,0.47059);\\\\n color: var(--mainColor);\\\\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n font-size: 1rem;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(1rem * 1.5);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n word-wrap: break-word;\\\\n padding-left: calc(1rem / 2 + 1px);\\\\n padding-right: calc(1rem / 2 + 1px);\\\\n padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n margin-top: 0;\\\\n margin-bottom: 0;\\\\n}\\\\n\\\\na {\\\\n color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n color: #639;\\\\n }\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.postcss.css\\"],\\"names\\":[],\\"mappings\\":\\"AAKA;EACE,gBAAgB;EAChB,mCAAsB;EACtB,yCAA4C;AAC9C;;AAEA;EACE,kBAAqB;EAArB,gBAAqB;EAArB,qBAAqB;AACvB;;AAEA;EACE;IACE,6BAAuB;IAAvB,uBAAuB;IACvB,iGAAsB;IACtB,eAA0B;IAA1B,0BAA0B;IAC1B,6BAAwC;IAAxC,wCAAwC;IACxC,qBAAyB;IACzB,kCAA+C;IAA/C,mCAA+C;IAA/C,6CAA+C;IAA/C,8CAA+C;EACjD;AACF;;AAEA;EACE,aAAe;EAAf,gBAAe;AACjB;;AAEA;EACE;AAKF;;AAHA;GACG,WAAoB;CACtB\\",\\"file\\":\\"basic.postcss.css\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.postcss.css\\\\\\";\\\\n\\\\n@custom-media --viewport-medium (width <= 50rem);\\\\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\\\\n\\\\n:root {\\\\n --fontSize: 1rem;\\\\n --mainColor: #12345678;\\\\n --secondaryColor: lab(32.5 38.5 -47.6 / 90%);\\\\n}\\\\n\\\\nhtml {\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (--viewport-medium) {\\\\n body {\\\\n color: var(--mainColor);\\\\n font-family: system-ui;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n overflow-wrap: break-word;\\\\n padding-inline: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\n:--heading {\\\\n margin-block: 0;\\\\n}\\\\n\\\\na {\\\\n color: rgb(0 0 100% / 90%);\\\\n\\\\n&:hover {\\\\n color: rebeccapurple;\\\\n }\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -378,6 +519,29 @@ module.exports = exports; exports[`"sourceMap" option true should generate source maps when source maps is valid from an other loader (\`postcss-loader\`): result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.postcss.css", + ".nested { + color: blue; +} +", + "", + Object { + "file": "nested.postcss.css", + "mappings": "AAAA;EACE,WAAW;AACb", + "names": Array [], + "sources": Array [ + "nested.postcss.css", + ], + "sourcesContent": Array [ + ".nested { + color: blue; +} +", + ], + "version": 3, + }, + ], Array [ "./source-map/basic.postcss.css", ":root { @@ -425,13 +589,15 @@ a:hover { "", Object { "file": "basic.postcss.css", - "mappings": "AAGA;EACE,gBAAgB;EAChB,mCAAsB;EACtB,yCAA4C;AAC9C;;AAEA;EACE,kBAAqB;EAArB,gBAAqB;EAArB,qBAAqB;AACvB;;AAEA;EACE;IACE,6BAAuB;IAAvB,uBAAuB;IACvB,iGAAsB;IACtB,eAA0B;IAA1B,0BAA0B;IAC1B,6BAAwC;IAAxC,wCAAwC;IACxC,qBAAyB;IACzB,kCAA+C;IAA/C,mCAA+C;IAA/C,6CAA+C;IAA/C,8CAA+C;EACjD;AACF;;AAEA;EACE,aAAe;EAAf,gBAAe;AACjB;;AAEA;EACE;AAKF;;AAHA;GACG,WAAoB;CACtB", + "mappings": "AAKA;EACE,gBAAgB;EAChB,mCAAsB;EACtB,yCAA4C;AAC9C;;AAEA;EACE,kBAAqB;EAArB,gBAAqB;EAArB,qBAAqB;AACvB;;AAEA;EACE;IACE,6BAAuB;IAAvB,uBAAuB;IACvB,iGAAsB;IACtB,eAA0B;IAA1B,0BAA0B;IAC1B,6BAAwC;IAAxC,wCAAwC;IACxC,qBAAyB;IACzB,kCAA+C;IAA/C,mCAA+C;IAA/C,6CAA+C;IAA/C,8CAA+C;EACjD;AACF;;AAEA;EACE,aAAe;EAAf,gBAAe;AACjB;;AAEA;EACE;AAKF;;AAHA;GACG,WAAoB;CACtB", "names": Array [], "sources": Array [ "basic.postcss.css", ], "sourcesContent": Array [ - "@custom-media --viewport-medium (width <= 50rem); + "@import \\"./nested/nested.postcss.css\\"; + +@custom-media --viewport-medium (width <= 50rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; :root { @@ -481,9 +647,11 @@ exports[`"sourceMap" option true should generate source maps: errors 1`] = `Arra exports[`"sourceMap" option true should generate source maps: 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]!./nested/nested.css\\"); exports = ___CSS_LOADER_API_IMPORT___(true); +exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___); // Module -exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\".class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -491,6 +659,29 @@ module.exports = exports; exports[`"sourceMap" option true should generate source maps: result 1`] = ` Array [ + Array [ + "../../src/index.js?[ident]!./source-map/nested/nested.css", + ".nested { + color: blue; +} +", + "", + Object { + "file": "nested.css", + "mappings": "AAAA;EACE,WAAW;AACb", + "names": Array [], + "sources": Array [ + "nested.css", + ], + "sourcesContent": Array [ + ".nested { + color: blue; +} +", + ], + "version": 3, + }, + ], Array [ "./source-map/basic.css", ".class { @@ -500,13 +691,15 @@ Array [ "", Object { "file": "basic.css", - "mappings": "AAAA;EACE,UAAU;AACZ", + "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ "basic.css", ], "sourcesContent": Array [ - ".class { + "@import \\"./nested/nested.css\\"; + +.class { color: red; } ", diff --git a/test/fixtures/import/order-2.css b/test/fixtures/import/order-2.css index 3e23caf8..a7c5b2c5 100644 --- a/test/fixtures/import/order-2.css +++ b/test/fixtures/import/order-2.css @@ -1,3 +1,3 @@ -.order-1 { +.order-2 { color: red; } diff --git a/test/fixtures/source-map/basic.css b/test/fixtures/source-map/basic.css index 19fce739..f125bf87 100644 --- a/test/fixtures/source-map/basic.css +++ b/test/fixtures/source-map/basic.css @@ -1,3 +1,5 @@ +@import "./nested/nested.css"; + .class { color: red; } diff --git a/test/fixtures/source-map/basic.postcss.css b/test/fixtures/source-map/basic.postcss.css index b95d332e..8da55590 100644 --- a/test/fixtures/source-map/basic.postcss.css +++ b/test/fixtures/source-map/basic.postcss.css @@ -1,3 +1,5 @@ +@import "./nested/nested.postcss.css"; + @custom-media --viewport-medium (width <= 50rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; diff --git a/test/fixtures/source-map/nested/nested.css b/test/fixtures/source-map/nested/nested.css new file mode 100644 index 00000000..c4313d19 --- /dev/null +++ b/test/fixtures/source-map/nested/nested.css @@ -0,0 +1,3 @@ +.nested { + color: blue; +} diff --git a/test/fixtures/source-map/nested/nested.postcss.css b/test/fixtures/source-map/nested/nested.postcss.css new file mode 100644 index 00000000..c4313d19 --- /dev/null +++ b/test/fixtures/source-map/nested/nested.postcss.css @@ -0,0 +1,3 @@ +.nested { + color: blue; +} diff --git a/test/helpers/getCompiler.js b/test/helpers/getCompiler.js index 25b0490e..e23cffba 100644 --- a/test/helpers/getCompiler.js +++ b/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]' }, }, diff --git a/test/loader.test.js b/test/loader.test.js index da973d79..68741413 100644 --- a/test/loader.test.js +++ b/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,55 @@ describe('loader', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); + it('should work with "asset" module type', async () => { + const isWebpack5 = version[0] === '5'; + const config = { + 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: '[name].[ext]' }, + }, + ], + }, + }; + + if (isWebpack5) { + config.experiments = { asset: true }; + config.output = { + path: path.resolve(__dirname, 'outputs'), + filename: '[name].bundle.js', + chunkFilename: '[name].chunk.js', + publicPath: '/webpack/public/path/', + assetModuleFilename: '[name][ext]', + }; + } + + const compiler = getCompiler('./basic.js', {}, config); + 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', diff --git a/test/sourceMap-option.test.js b/test/sourceMap-option.test.js index e5468cc8..8aacdce8 100644 --- a/test/sourceMap-option.test.js +++ b/test/sourceMap-option.test.js @@ -186,7 +186,7 @@ describe('"sourceMap" option', () => { rules: [ { test: /\.css$/i, - rules: [ + use: [ { loader: path.resolve(__dirname, '../src'), options: { @@ -228,7 +228,7 @@ describe('"sourceMap" option', () => { // rules: [ // { // test: /\.s[ca]ss$/i, - // rules: [ + // use: [ // { // loader: path.resolve(__dirname, '../src'), // options: { @@ -418,7 +418,7 @@ describe('"sourceMap" option', () => { rules: [ { test: /\.css$/i, - rules: [ + use: [ { loader: path.resolve(__dirname, '../src'), options: { @@ -458,7 +458,7 @@ describe('"sourceMap" option', () => { rules: [ { test: /\.s[ca]ss$/i, - rules: [ + use: [ { loader: path.resolve(__dirname, '../src'), options: {