From cda7845f9719e08747a18d661edfd8cc4b9a90cb Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 16 Dec 2019 17:58:01 +0300 Subject: [PATCH 1/5] test: more --- test/__snapshots__/import-option.test.js.snap | 4 ++-- test/fixtures/import/order-2.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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/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; } From 74cac3e4c08846ec22dafebab1c90405a448318b Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 16 Dec 2019 18:01:50 +0300 Subject: [PATCH 2/5] test: more --- test/fixtures/source-map/basic.css | 2 ++ test/fixtures/source-map/basic.postcss.css | 2 ++ test/fixtures/source-map/basic.scss | 2 ++ test/fixtures/source-map/nested/nested.css | 3 +++ test/fixtures/source-map/nested/nested.postcss.css | 3 +++ test/fixtures/source-map/nested/nested.scss | 3 +++ 6 files changed, 15 insertions(+) create mode 100644 test/fixtures/source-map/nested/nested.css create mode 100644 test/fixtures/source-map/nested/nested.postcss.css create mode 100644 test/fixtures/source-map/nested/nested.scss 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/basic.scss b/test/fixtures/source-map/basic.scss index 1a72d52f..e646594f 100644 --- a/test/fixtures/source-map/basic.scss +++ b/test/fixtures/source-map/basic.scss @@ -1,3 +1,5 @@ +@import "./nested/nested"; + $font-stack: Helvetica, sans-serif; $primary-color: #333; 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/fixtures/source-map/nested/nested.scss b/test/fixtures/source-map/nested/nested.scss new file mode 100644 index 00000000..c4313d19 --- /dev/null +++ b/test/fixtures/source-map/nested/nested.scss @@ -0,0 +1,3 @@ +.nested { + color: blue; +} From e69e670df8a6f4acd2ade851990b88d4088b200a Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 16 Dec 2019 18:24:53 +0300 Subject: [PATCH 3/5] test: more --- test/__snapshots__/loader.test.js.snap | 171 +++++++++++++++++++++++++ test/helpers/getCompiler.js | 2 +- test/loader.test.js | 46 +++++++ 3 files changed, 218 insertions(+), 1 deletion(-) diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 681807fc..51241c72 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/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`] = ` 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..df0aa2ba 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,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', From 74e39723d1f004ecd216715cebf648073ad799c2 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 16 Dec 2019 18:27:21 +0300 Subject: [PATCH 4/5] test: more --- test/sourceMap-option.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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: { From 79758b0581853f187713096e7e7ce0bcc3f0e7d5 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 16 Dec 2019 18:35:18 +0300 Subject: [PATCH 5/5] test: more --- test/__snapshots__/loader.test.js.snap | 8 +- .../sourceMap-option.test.js.snap | 221 ++++++++++++++++-- test/fixtures/source-map/basic.scss | 2 - test/fixtures/source-map/nested/nested.scss | 3 - test/loader.test.js | 67 +++--- 5 files changed, 248 insertions(+), 53 deletions(-) delete mode 100644 test/fixtures/source-map/nested/nested.scss diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 51241c72..ef5ed1b2 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -123,11 +123,13 @@ 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 = ___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; " `; @@ -149,11 +151,11 @@ Array [ .class { color: red; - background: url(/webpack/public/path/de52feff0a80fb98abe3.png); + background: url(/webpack/public/path/img.png); } .class-duplicate-url { - background: url(/webpack/public/path/de52feff0a80fb98abe3.png); + background: url(/webpack/public/path/img.png); } :root { 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/source-map/basic.scss b/test/fixtures/source-map/basic.scss index e646594f..1a72d52f 100644 --- a/test/fixtures/source-map/basic.scss +++ b/test/fixtures/source-map/basic.scss @@ -1,5 +1,3 @@ -@import "./nested/nested"; - $font-stack: Helvetica, sans-serif; $primary-color: #333; diff --git a/test/fixtures/source-map/nested/nested.scss b/test/fixtures/source-map/nested/nested.scss deleted file mode 100644 index c4313d19..00000000 --- a/test/fixtures/source-map/nested/nested.scss +++ /dev/null @@ -1,3 +0,0 @@ -.nested { - color: blue; -} diff --git a/test/loader.test.js b/test/loader.test.js index df0aa2ba..68741413 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -52,38 +52,43 @@ describe('loader', () => { 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]' }, + }, + ], + }, + }; - 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, - }, - } - ); + 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');