diff --git a/package-lock.json b/package-lock.json index d228cf6e..8d7bc6c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10706,6 +10706,31 @@ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", "dev": true }, + "mini-css-extract-plugin": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz", + "integrity": "sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "normalize-url": "1.9.1", + "schema-utils": "^1.0.0", + "webpack-sources": "^1.1.0" + }, + "dependencies": { + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + } + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -11069,6 +11094,18 @@ "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", "dev": true }, + "normalize-url": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", + "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=", + "dev": true, + "requires": { + "object-assign": "^4.0.1", + "prepend-http": "^1.0.0", + "query-string": "^4.1.0", + "sort-keys": "^1.0.0" + } + }, "npm-run-all": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz", @@ -12082,6 +12119,12 @@ "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", "dev": true }, + "prepend-http": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", + "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", + "dev": true + }, "prettier": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.3.tgz", @@ -12282,6 +12325,16 @@ "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", "dev": true }, + "query-string": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", + "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "dev": true, + "requires": { + "object-assign": "^4.1.0", + "strict-uri-encode": "^1.0.0" + } + }, "querystring": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", @@ -13086,6 +13139,15 @@ } } }, + "sort-keys": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", + "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=", + "dev": true, + "requires": { + "is-plain-obj": "^1.0.0" + } + }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -13469,6 +13531,12 @@ "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", "dev": true }, + "strict-uri-encode": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", + "dev": true + }, "string-argv": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", diff --git a/package.json b/package.json index a94fac04..c588fe3a 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "jest-junit": "^10.0.0", "lint-staged": "^10.1.2", "memfs": "^3.1.2", + "mini-css-extract-plugin": "^0.9.0", "npm-run-all": "^4.1.5", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", diff --git a/src/index.js b/src/index.js index 2ee1b781..84878113 100644 --- a/src/index.js +++ b/src/index.js @@ -19,7 +19,6 @@ import { getImportCode, getModuleCode, getModulesPlugins, - normalizeSourceMap, shouldUseModulesPlugins, } from './utils'; @@ -83,11 +82,12 @@ export default function loader(content, map, meta) { postcss(plugins) .process(content, { from: this.remainingRequest.split('!').pop(), - to: this.currentRequest.split('!').pop(), + // eslint-disable-next-line no-undefined + to: undefined, map: options.sourceMap ? { // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it - prev: sourceMap && map ? normalizeSourceMap(map) : null, + prev: sourceMap && map ? map : null, inline: false, annotation: false, } @@ -137,7 +137,8 @@ export default function loader(content, map, meta) { apiImports, urlReplacements, icssReplacements, - esModule + esModule, + this ); const exportCode = getExportCode( exports, diff --git a/src/utils.js b/src/utils.js index 45e8f7a9..15b7646a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -190,19 +190,13 @@ function getModulesPlugins(options, loaderContext) { } function normalizeSourceMap(map) { - let newMap = map; - - // Some loader emit source map as string - // Strip any JSON XSSI avoidance prefix from the string (as documented in the source maps specification), and then parse the string as JSON. - if (typeof newMap === 'string') { - newMap = JSON.parse(newMap); - } + const newMap = map.toJSON(); // Source maps should use forward slash because it is URLs (https://github.com/mozilla/source-map/issues/91) // We should normalize path because previous loaders like `sass-loader` using backslash when generate source map if (newMap.file) { - newMap.file = normalizePath(newMap.file); + delete newMap.file; } if (newMap.sourceRoot) { @@ -274,14 +268,18 @@ function getModuleCode( apiImports, urlReplacements, icssReplacements, - esModule + esModule, + loaderContext ) { if (exportType !== 'full') { return ''; } const { css, map } = result; - const sourceMapValue = sourceMap && map ? `,${map}` : ''; + const sourceMapValue = + sourceMap && map + ? `,${JSON.stringify(normalizeSourceMap(map, loaderContext))}` + : ''; let code = JSON.stringify(css); let beforeCode = ''; diff --git a/test/__snapshots__/sourceMap-option.test.js.snap b/test/__snapshots__/sourceMap-option.test.js.snap index 02092fd5..b6d809d9 100644 --- a/test/__snapshots__/sourceMap-option.test.js.snap +++ b/test/__snapshots__/sourceMap-option.test.js.snap @@ -294,6 +294,61 @@ Array [ exports[`"sourceMap" option not specified should not generate source maps: warnings 1`] = `Array []`; +exports[`"sourceMap" option should use forward slash in url with "css-loader" and with source maps: errors 1`] = `Array []`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader" and with 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\\":[\\"test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +// Exports +module.exports = exports; +" +`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader" and with source maps: warnings 1`] = `Array []`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader" and without source maps: errors 1`] = `Array []`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader" and without 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 +module.exports = exports; +" +`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader" and without source maps: warnings 1`] = `Array []`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader", source maps and MiniCssExtractPlugin: errors 1`] = `Array []`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader", source maps and MiniCssExtractPlugin: module 1`] = ` +".nested { + color: blue; +} + +.class { + color: red; +} + + +/*# sourceMappingURL=main.css.map*/" +`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader", source maps and MiniCssExtractPlugin: module 2`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///test/fixtures/source-map/nested/nested.css\\",\\"webpack:///test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,WAAW;AACb;;ACAA;EACE,UAAU;AACZ\\",\\"file\\":\\"main.css\\",\\"sourcesContent\\":[\\".nested {\\\\n color: blue;\\\\n}\\\\n\\",\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader", source maps and MiniCssExtractPlugin: module 3`] = `"// extracted by mini-css-extract-plugin"`; + +exports[`"sourceMap" option should use forward slash in url with "css-loader", source maps and MiniCssExtractPlugin: warnings 1`] = `Array []`; + exports[`"sourceMap" option true should generate source maps when source maps equal to "null" from an other loader: errors 1`] = `Array []`; exports[`"sourceMap" option true should generate source maps when source maps equal to "null" from an other loader: module 1`] = ` @@ -303,7 +358,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ide 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\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -319,11 +374,10 @@ Array [ ", "", Object { - "file": "nested.css", "mappings": "AAAA;EACE,WAAW;AACb", "names": Array [], "sources": Array [ - "nested.css", + "test/fixtures/source-map/nested/nested.css", ], "sourcesContent": Array [ ".nested { @@ -342,11 +396,10 @@ Array [ ", "", Object { - "file": "basic.css", "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ - "basic.css", + "test/fixtures/source-map/basic.css", ], "sourcesContent": Array [ "@import \\"./nested/nested.css\\"; @@ -373,7 +426,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ide 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\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -389,11 +442,10 @@ Array [ ", "", Object { - "file": "nested.css", "mappings": "AAAA;EACE,WAAW;AACb", "names": Array [], "sources": Array [ - "nested.css", + "test/fixtures/source-map/nested/nested.css", ], "sourcesContent": Array [ ".nested { @@ -412,11 +464,10 @@ Array [ ", "", Object { - "file": "basic.css", "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ - "basic.css", + "test/fixtures/source-map/basic.css", ], "sourcesContent": Array [ "@import \\"./nested/nested.css\\"; @@ -443,7 +494,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ide 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\\":\\"AAEA;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\\":[\\"test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\".class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -459,11 +510,10 @@ Array [ ", "", Object { - "file": "nested.css", "mappings": "AAAA;EACE,WAAW;AACb", "names": Array [], "sources": Array [ - "nested.css", + "test/fixtures/source-map/nested/nested.css", ], "sourcesContent": Array [ ".nested { @@ -482,11 +532,10 @@ Array [ ", "", Object { - "file": "basic.css", "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ - "basic.css", + "test/fixtures/source-map/basic.css", ], "sourcesContent": Array [ ".class { @@ -511,7 +560,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ide 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\\":\\"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.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\\":[\\"test/fixtures/source-map/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\\",\\"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; " @@ -527,11 +576,10 @@ Array [ ", "", Object { - "file": "nested.postcss.css", "mappings": "AAAA;EACE,WAAW;AACb", "names": Array [], "sources": Array [ - "nested.postcss.css", + "test/fixtures/source-map/nested/nested.postcss.css", ], "sourcesContent": Array [ ".nested { @@ -588,11 +636,10 @@ a:hover { ", "", Object { - "file": "basic.postcss.css", "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", + "test/fixtures/source-map/basic.postcss.css", ], "sourcesContent": Array [ "@import \\"./nested/nested.postcss.css\\"; @@ -651,7 +698,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ide 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\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"file\\":\\"basic.css\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); +exports.push([module.id, \\".class {\\\\n color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n color: red;\\\\n}\\\\n\\"]}]); // Exports module.exports = exports; " @@ -667,11 +714,10 @@ Array [ ", "", Object { - "file": "nested.css", "mappings": "AAAA;EACE,WAAW;AACb", "names": Array [], "sources": Array [ - "nested.css", + "test/fixtures/source-map/nested/nested.css", ], "sourcesContent": Array [ ".nested { @@ -690,11 +736,10 @@ Array [ ", "", Object { - "file": "basic.css", "mappings": "AAEA;EACE,UAAU;AACZ", "names": Array [], "sources": Array [ - "basic.css", + "test/fixtures/source-map/basic.css", ], "sourcesContent": Array [ "@import \\"./nested/nested.css\\"; diff --git a/test/sourceMap-option.test.js b/test/sourceMap-option.test.js index 8aacdce8..ed285764 100644 --- a/test/sourceMap-option.test.js +++ b/test/sourceMap-option.test.js @@ -9,8 +9,11 @@ import { getExecutedCode, getModuleSource, getWarnings, + readAsset, } from './helpers/index'; +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + describe('"sourceMap" option', () => { describe('not specified', () => { it('should not generate source maps', async () => { @@ -491,4 +494,443 @@ describe('"sourceMap" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); }); + + it('should use forward slash in url with "css-loader" and without source maps', async () => { + const compiler = getCompiler( + './source-map/basic.js', + {}, + { + output: { + path: path.resolve(__dirname, '../outputs'), + filename: '[name].bundle.js', + chunkFilename: '[name].chunk.js', + publicPath: '/webpack/public/path/', + }, + module: { + rules: [ + { + test: /\.css$/i, + rules: [ + { + loader: path.resolve(__dirname, '../src'), + options: { sourceMap: false }, + }, + ], + }, + ], + }, + } + ); + const stats = await compile(compiler); + + expect(getModuleSource('./source-map/basic.css', stats)).toMatchSnapshot( + 'module' + ); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); + + it('should use forward slash in url with "css-loader" and with source maps', async () => { + const compiler = getCompiler( + './source-map/basic.js', + {}, + { + output: { + path: path.resolve(__dirname, '../outputs'), + filename: '[name].bundle.js', + chunkFilename: '[name].chunk.js', + publicPath: '/webpack/public/path/', + }, + module: { + rules: [ + { + test: /\.css$/i, + rules: [ + { + loader: path.resolve(__dirname, '../src'), + options: { sourceMap: true }, + }, + ], + }, + ], + }, + } + ); + const stats = await compile(compiler); + + expect(getModuleSource('./source-map/basic.css', stats)).toMatchSnapshot( + 'module' + ); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); + + // it('should use forward slash in url with "postcss-loader" and without source maps', async () => { + // const compiler = getCompiler( + // './source-map/basic-postcss.js', + // {}, + // { + // output: { + // path: path.resolve(__dirname, '../outputs'), + // filename: '[name].bundle.js', + // chunkFilename: '[name].chunk.js', + // publicPath: '/webpack/public/path/', + // }, + // module: { + // rules: [ + // { + // test: /\.css$/i, + // rules: [ + // { + // loader: path.resolve(__dirname, '../src'), + // options: { + // sourceMap: false, + // importLoaders: 1, + // }, + // }, + // { + // loader: 'postcss-loader', + // options: { + // plugins: () => [postcssPresetEnv({ stage: 0 })], + // sourceMap: false, + // }, + // }, + // ], + // }, + // ], + // }, + // } + // ); + // const stats = await compile(compiler); + // + // expect( + // getModuleSource('./source-map/basic.postcss.css', stats) + // ).toMatchSnapshot('module'); + // expect(getWarnings(stats)).toMatchSnapshot('warnings'); + // expect(getErrors(stats)).toMatchSnapshot('errors'); + // }); + + // it('should use forward slash in url with "postcss-loader" and with source maps', async () => { + // const compiler = getCompiler( + // './source-map/basic-postcss.js', + // {}, + // { + // output: { + // path: path.resolve(__dirname, '../outputs'), + // filename: '[name].bundle.js', + // chunkFilename: '[name].chunk.js', + // publicPath: '/webpack/public/path/', + // }, + // module: { + // rules: [ + // { + // test: /\.css$/i, + // rules: [ + // { + // loader: path.resolve(__dirname, '../src'), + // options: { + // sourceMap: true, + // }, + // }, + // { + // loader: 'postcss-loader', + // options: { + // plugins: () => [postcssPresetEnv({ stage: 0 })], + // sourceMap: true, + // }, + // }, + // ], + // }, + // ], + // }, + // } + // ); + // const stats = await compile(compiler); + // + // expect( + // getModuleSource('./source-map/basic.postcss.css', stats) + // ).toMatchSnapshot('module'); + // expect(getWarnings(stats)).toMatchSnapshot('warnings'); + // expect(getErrors(stats)).toMatchSnapshot('errors'); + // }); + + // it('should use forward slash in url with "sass-loader" and without source maps', async () => { + // const compiler = getCompiler( + // './source-map/basic-scss.js', + // {}, + // { + // output: { + // path: path.resolve(__dirname, '../outputs'), + // filename: '[name].bundle.js', + // chunkFilename: '[name].chunk.js', + // publicPath: '/webpack/public/path/', + // }, + // module: { + // rules: [ + // { + // test: /\.s[ca]ss$/i, + // rules: [ + // { + // loader: path.resolve(__dirname, '../src'), + // options: { + // sourceMap: false, + // }, + // }, + // { + // loader: 'postcss-loader', + // options: { + // plugins: () => [postcssPresetEnv({ stage: 0 })], + // sourceMap: false, + // }, + // }, + // { + // loader: 'sass-loader', + // options: { + // // eslint-disable-next-line global-require + // implementation: require('sass'), + // sourceMap: false, + // }, + // }, + // ], + // }, + // ], + // }, + // } + // ); + // const stats = await compile(compiler); + // + // expect(getModuleSource('./source-map/basic.scss', stats)).toMatchSnapshot( + // 'module' + // ); + // expect(getWarnings(stats)).toMatchSnapshot('warnings'); + // expect(getErrors(stats)).toMatchSnapshot('errors'); + // }); + // + // it('should use forward slash in url with "sass-loader" and with source maps', async () => { + // const compiler = getCompiler( + // './source-map/basic-scss.js', + // {}, + // { + // output: { + // path: path.resolve(__dirname, '../outputs'), + // filename: '[name].bundle.js', + // chunkFilename: '[name].chunk.js', + // publicPath: '/webpack/public/path/', + // }, + // module: { + // rules: [ + // { + // test: /\.s[ca]ss$/i, + // rules: [ + // { + // loader: path.resolve(__dirname, '../src'), + // options: { + // sourceMap: true, + // importLoaders: 1, + // }, + // }, + // { + // loader: 'postcss-loader', + // options: { + // plugins: () => [postcssPresetEnv({ stage: 0 })], + // sourceMap: true, + // }, + // }, + // { + // loader: 'sass-loader', + // options: { + // // eslint-disable-next-line global-require + // implementation: require('sass'), + // sourceMap: true, + // }, + // }, + // ], + // }, + // ], + // }, + // } + // ); + // const stats = await compile(compiler); + // + // expect(getModuleSource('./source-map/basic.scss', stats)).toMatchSnapshot( + // 'module' + // ); + // expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot( + // 'result' + // ); + // expect(getWarnings(stats)).toMatchSnapshot('warnings'); + // expect(getErrors(stats)).toMatchSnapshot('errors'); + // }); + + it('should use forward slash in url with "css-loader", source maps and MiniCssExtractPlugin', async () => { + const compiler = getCompiler( + './source-map/basic.js', + {}, + { + devtool: 'source-map', + output: { + path: path.resolve(__dirname, '../outputs'), + filename: '[name].bundle.js', + chunkFilename: '[name].chunk.js', + publicPath: '/webpack/public/path/', + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: 'main.css', + }), + ], + module: { + rules: [ + { + test: /\.css$/i, + rules: [ + { + loader: MiniCssExtractPlugin.loader, + }, + { + loader: path.resolve(__dirname, '../src'), + options: { sourceMap: true }, + }, + ], + }, + ], + }, + } + ); + const stats = await compile(compiler); + + expect(readAsset('main.css', compiler, stats)).toMatchSnapshot('module'); + expect(readAsset('main.css.map', compiler, stats)).toMatchSnapshot( + 'module' + ); + expect(getModuleSource('./source-map/basic.css', stats)).toMatchSnapshot( + 'module' + ); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); + + // it('should use forward slash in url with "sass-loader", source maps and MiniCssExtractPlugin', async () => { + // const compiler = getCompiler( + // './source-map/basic-scss.js', + // {}, + // { + // devtool: 'source-map', + // output: { + // path: path.resolve(__dirname, '../outputs'), + // filename: '[name].bundle.js', + // chunkFilename: '[name].chunk.js', + // publicPath: '/webpack/public/path/', + // }, + // plugins: [ + // new MiniCssExtractPlugin({ + // filename: 'main.css', + // }), + // ], + // module: { + // rules: [ + // { + // test: /\.s[ca]ss$/i, + // rules: [ + // { + // loader: MiniCssExtractPlugin.loader, + // }, + // { + // loader: path.resolve(__dirname, '../src'), + // options: { + // sourceMap: true, + // importLoaders: 1, + // }, + // }, + // { + // loader: 'postcss-loader', + // options: { + // plugins: () => [postcssPresetEnv({ stage: 0 })], + // sourceMap: true, + // }, + // }, + // { + // loader: 'sass-loader', + // options: { + // // eslint-disable-next-line global-require + // implementation: require('sass'), + // sourceMap: true, + // }, + // }, + // ], + // }, + // ], + // }, + // } + // ); + // const stats = await compile(compiler); + // + // expect(readAsset('main.css', compiler, stats)).toMatchSnapshot('module'); + // expect(readAsset('main.css.map', compiler, stats)).toMatchSnapshot( + // 'module' + // ); + // expect(getModuleSource('./source-map/basic.scss', stats)).toMatchSnapshot( + // 'module' + // ); + // expect(getWarnings(stats)).toMatchSnapshot('warnings'); + // expect(getErrors(stats)).toMatchSnapshot('errors'); + // }); + // + // it('should use forward slash in url with "postcss-loader", source maps and MiniCssExtractPlugin', async () => { + // const compiler = getCompiler( + // './source-map/basic-postcss.js', + // {}, + // { + // devtool: 'source-map', + // output: { + // path: path.resolve(__dirname, '../outputs'), + // filename: '[name].bundle.js', + // chunkFilename: '[name].chunk.js', + // publicPath: '/webpack/public/path/', + // }, + // plugins: [ + // new MiniCssExtractPlugin({ + // filename: 'main.css', + // }), + // ], + // module: { + // rules: [ + // { + // test: /\.css$/i, + // rules: [ + // { + // loader: MiniCssExtractPlugin.loader, + // }, + // { + // loader: path.resolve(__dirname, '../src'), + // options: { + // sourceMap: true, + // importLoaders: 1, + // }, + // }, + // { + // loader: 'postcss-loader', + // options: { + // plugins: () => [postcssPresetEnv({ stage: 0 })], + // sourceMap: true, + // }, + // }, + // ], + // }, + // ], + // }, + // } + // ); + // const stats = await compile(compiler); + // + // expect(readAsset('main.css', compiler, stats)).toMatchSnapshot('module'); + // expect(readAsset('main.css.map', compiler, stats)).toMatchSnapshot( + // 'module' + // ); + // expect( + // getModuleSource('./source-map/basic.postcss.css', stats) + // ).toMatchSnapshot('module'); + // expect(getWarnings(stats)).toMatchSnapshot('warnings'); + // expect(getErrors(stats)).toMatchSnapshot('errors'); + // }); });