Skip to content

Commit

Permalink
fix: source map generation for cssnano and clean-css (#135)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Nov 10, 2021
1 parent b7304ed commit a9dd43e
Show file tree
Hide file tree
Showing 4 changed files with 253 additions and 28 deletions.
15 changes: 13 additions & 2 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ async function cssnanoMinify(

const [[name, code]] = Object.entries(input);
const postcssOptions = {
to: name,
from: name,
...minimizerOptions.processorOptions,
};
Expand Down Expand Up @@ -162,9 +161,21 @@ async function cleanCssMinify(input, inputSourceMap, minimizerOptions) {
...minimizerOptions,
}).minify({ [name]: { styles: code } });

const sourceMap = result.sourceMap && result.sourceMap.toJSON();

// workaround for source maps on windows
if (sourceMap) {
// eslint-disable-next-line global-require
const isWindowsPathSep = require("path").sep === "\\";

sourceMap.sources = sourceMap.sources.map((item) =>
isWindowsPathSep ? item.replace(/\\/g, "/") : item
);
}

return {
code: result.styles,
map: result.sourceMap && result.sourceMap.toJSON(),
map: sourceMap,
warnings: result.warnings,
};
}
Expand Down
77 changes: 63 additions & 14 deletions test/__snapshots__/minify-option.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,18 @@ Error: minimizer function doesn't return the 'code' property or result is not a

exports[`"minify" option should work throw an error if minimizer function doesn't return: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps #2: assets 1`] = `
Object {
"foo/foo.css": "body{font-weight:700}body{color:red}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo/foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo/foo.css\\",\\"mappings\\":\\"AAAA,KACE,YAAa,ICCf,KACE,MAAO,IACP,OACE,WAAY\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps #2: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps #2: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps: assets 1`] = `
Object {
"foo.css": "body{color:red}a{color:#00f}
Expand All @@ -154,21 +166,43 @@ exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" mi

exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and generate source maps: assets 1`] = `
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps #2: assets 1`] = `
Object {
"foo/foo.css": "body{color:red;font-weight:700}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo/foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo/foo.css\\",\\"mappings\\":\\"AAAA,KCGE,SAAU,CDFV,eCCF,CAEE,OACE,iBAIJ\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps #2: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps #2: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps: assets 1`] = `
Object {
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo.css\\",\\"mappings\\":\\"AAAA,KCGE,SAAU,CDFV,eCCF,CAEE,OACE,iBAIJ\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and generate source maps: error 1`] = `Array []`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and parser option as "String": entry.js.map 1`] = `"{\\"version\\":3,\\"file\\":\\"entry.js\\",\\"mappings\\":\\";;UAAA;UACA;;;;;WCDA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;ACNO\\",\\"sources\\":[\\"webpack:///webpack/bootstrap\\",\\"webpack:///webpack/runtime/define property getters\\",\\"webpack:///webpack/runtime/hasOwnProperty shorthand\\",\\"webpack:///webpack/runtime/make namespace object\\",\\"webpack:///./sugarss.js\\"],\\"sourcesContent\\":[\\"// The require scope\\\\nvar __webpack_require__ = {};\\\\n\\\\n\\",\\"// define getter functions for harmony exports\\\\n__webpack_require__.d = (exports, definition) => {\\\\n\\\\tfor(var key in definition) {\\\\n\\\\t\\\\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\\\\n\\\\t\\\\t\\\\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\\\\n\\\\t\\\\t}\\\\n\\\\t}\\\\n};\\",\\"__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))\\",\\"// define __esModule on exports\\\\n__webpack_require__.r = (exports) => {\\\\n\\\\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\\\\n\\\\t\\\\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\\\\n\\\\t}\\\\n\\\\tObject.defineProperty(exports, '__esModule', { value: true });\\\\n};\\",\\"export const foo = 'foo';\\\\n\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}"`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and generate source maps: warning 1`] = `Array []`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and parser option as "String": index.sss 1`] = `"a{color:#000}"`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier: assets 1`] = `
Object {
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and parser option as "String": entry.js.map 1`] = `"{\\"version\\":3,\\"file\\":\\"entry.js\\",\\"mappings\\":\\";;UAAA;UACA;;;;;WCDA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;ACNO\\",\\"sources\\":[\\"webpack:///webpack/bootstrap\\",\\"webpack:///webpack/runtime/define property getters\\",\\"webpack:///webpack/runtime/hasOwnProperty shorthand\\",\\"webpack:///webpack/runtime/make namespace object\\",\\"webpack:///./sugarss.js\\"],\\"sourcesContent\\":[\\"// The require scope\\\\nvar __webpack_require__ = {};\\\\n\\\\n\\",\\"// define getter functions for harmony exports\\\\n__webpack_require__.d = (exports, definition) => {\\\\n\\\\tfor(var key in definition) {\\\\n\\\\t\\\\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\\\\n\\\\t\\\\t\\\\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\\\\n\\\\t\\\\t}\\\\n\\\\t}\\\\n};\\",\\"__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))\\",\\"// define __esModule on exports\\\\n__webpack_require__.r = (exports) => {\\\\n\\\\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\\\\n\\\\t\\\\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\\\\n\\\\t}\\\\n\\\\tObject.defineProperty(exports, '__esModule', { value: true });\\\\n};\\",\\"export const foo = 'foo';\\\\n\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}"`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and parser option as "String": index.sss 1`] = `"a{color:#000}"`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify", "CssMinimizerPlugin.cssoMinify" and "CssMinimizerPlugin.cleanCssMinify" minifiers and generate source maps: assets 1`] = `
Object {
Expand All @@ -192,27 +226,29 @@ exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify", "

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify", "CssMinimizerPlugin.cssoMinify" and "CssMinimizerPlugin.cleanCssMinify" minifiers: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify": assets 1`] = `
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: assets 1`] = `
Object {
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}",
"foo.css": "body{font-weight:700;color:red}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo.css\\",\\"mappings\\":\\"AAAA,I,CACE,e,CCEA,S,CACA,M,CACE,iB\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify": error 1`] = `Array []`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify": warning 1`] = `Array []`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: assets 1`] = `
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source maps #2: assets 1`] = `
Object {
"foo.css": "body{font-weight:700;color:red}body a{text-align:center}
"foo/foo.css": "body{font-weight:700;color:red}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo.css\\",\\"mappings\\":\\"AAAA,I,CACE,e,CCEA,S,CACA,M,CACE,iB\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
"foo/foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo/foo.css\\",\\"mappings\\":\\"AAAA,I,CACE,e,CCEA,S,CACA,M,CACE,iB\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: error 1`] = `Array []`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source maps #2: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: warning 1`] = `Array []`;
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source maps #2: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier: assets 1`] = `
Object {
Expand Down Expand Up @@ -242,6 +278,19 @@ Unexpected \\"calc(\\"",
]
`;

exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps #2: assets 1`] = `
Object {
"foo/foo.css": "body{font-weight:bold}body{color:red}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo/foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo/foo.css\\",\\"mappings\\":\\"AAAA,KACE,iBCCF,KACE,UACA,OACE\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps #2: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps #2: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps: assets 1`] = `
Object {
"foo.css": "body{color:red}a{color:#00f}
Expand Down
24 changes: 15 additions & 9 deletions test/__snapshots__/sourceMap-option.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ Object {
"dist/entry2.css.map": {
"version": 3,
"file": "dist/entry2.css",
"mappings": "AAAA,KAKE,SAAU,CAJV,eACF,CAMA,OACE,iBACF",
"mappings": "AAAA,KCGE,SAAU,CDFV,eCCF,CAIA,OACE,iBAGF",
"sources": [
"webpack:///entry2.css"
"webpack:///./sourcemap/bar.scss",
"webpack:///./sourcemap/foo.css"
],
"sourcesContent": [
"body {\\n font-weight: bold;\\n}\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}\\n"
"body {\\n font-weight: bold;\\n}",
"@import 'bar';\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}"
],
"names": [],
"sourceRoot": ""
Expand All @@ -49,25 +51,29 @@ Object {
"sourcemaps/entry.css.map": {
"version": 3,
"file": "dist/entry.css",
"mappings": "AAAA,KAKE,SAAU,CAJV,eACF,CAKA,OACE,iBACF",
"mappings": "AAAA,KCGE,SAAU,CDFV,eCCF,CAEE,OACE,iBAIJ",
"sources": [
"webpack:///entry.css"
"webpack:///./sourcemap/bar.scss",
"webpack:///./sourcemap/foo.scss"
],
"sourcesContent": [
"body {\\n font-weight: bold;\\n}\\n\\nbody {\\n color: red;\\n}\\nbody a {\\n text-align: center;\\n}\\n"
"body {\\n font-weight: bold;\\n}",
"@import 'bar';\\n\\nbody {\\n color: red;\\n a {\\n text-align: center;\\n }\\n}"
],
"names": [],
"sourceRoot": ""
},
"sourcemaps/entry2.css.map": {
"version": 3,
"file": "dist/entry2.css",
"mappings": "AAAA,KAKE,SAAU,CAJV,eACF,CAMA,OACE,iBACF",
"mappings": "AAAA,KCGE,SAAU,CDFV,eCCF,CAIA,OACE,iBAGF",
"sources": [
"webpack:///entry2.css"
"webpack:///./sourcemap/bar.scss",
"webpack:///./sourcemap/foo.css"
],
"sourcesContent": [
"body {\\n font-weight: bold;\\n}\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}\\n"
"body {\\n font-weight: bold;\\n}",
"@import 'bar';\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}"
],
"names": [],
"sourceRoot": ""
Expand Down

0 comments on commit a9dd43e

Please sign in to comment.