Skip to content

Commit a9dd43e

Browse files
alexander-akaitalexander-akait
authored
fix: source map generation for cssnano and clean-css (#135)
1 parent b7304ed commit a9dd43e

File tree

4 files changed

+253
-28
lines changed

4 files changed

+253
-28
lines changed

‎src/utils.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@ async function cssnanoMinify(
8080

8181
const [[name, code]] = Object.entries(input);
8282
const postcssOptions = {
83-
to: name,
8483
from: name,
8584
...minimizerOptions.processorOptions,
8685
};
@@ -162,9 +161,21 @@ async function cleanCssMinify(input, inputSourceMap, minimizerOptions) {
162161
...minimizerOptions,
163162
}).minify({ [name]: { styles: code } });
164163

164+
const sourceMap = result.sourceMap && result.sourceMap.toJSON();
165+
166+
// workaround for source maps on windows
167+
if (sourceMap) {
168+
// eslint-disable-next-line global-require
169+
const isWindowsPathSep = require("path").sep === "\\";
170+
171+
sourceMap.sources = sourceMap.sources.map((item) =>
172+
isWindowsPathSep ? item.replace(/\\/g, "/") : item
173+
);
174+
}
175+
165176
return {
166177
code: result.styles,
167-
map: result.sourceMap && result.sourceMap.toJSON(),
178+
map: sourceMap,
168179
warnings: result.warnings,
169180
};
170181
}

‎test/__snapshots__/minify-option.test.js.snap‎

Lines changed: 63 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,18 @@ Error: minimizer function doesn't return the 'code' property or result is not a
132132

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

135+
exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps #2: assets 1`] = `
136+
Object {
137+
"foo/foo.css": "body{font-weight:700}body{color:red}body a{text-align:center}
138+
/*# sourceMappingURL=foo.css.map*/",
139+
"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\\":\\"\\"}",
140+
}
141+
`;
142+
143+
exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps #2: error 1`] = `Array []`;
144+
145+
exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps #2: warning 1`] = `Array []`;
146+
135147
exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" minifier and generate source maps: assets 1`] = `
136148
Object {
137149
"foo.css": "body{color:red}a{color:#00f}
@@ -154,21 +166,43 @@ exports[`"minify" option should work with "CssMinimizerPlugin.cleanCssMinify" mi
154166

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

157-
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and generate source maps: assets 1`] = `
169+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps #2: assets 1`] = `
170+
Object {
171+
"foo/foo.css": "body{color:red;font-weight:700}body a{text-align:center}
172+
/*# sourceMappingURL=foo.css.map*/",
173+
"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\\":\\"\\"}",
174+
}
175+
`;
176+
177+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps #2: error 1`] = `Array []`;
178+
179+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps #2: warning 1`] = `Array []`;
180+
181+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps: assets 1`] = `
158182
Object {
159183
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}
160184
/*# sourceMappingURL=foo.css.map*/",
161185
"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\\":\\"\\"}",
162186
}
163187
`;
164188

165-
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and generate source maps: error 1`] = `Array []`;
189+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps: error 1`] = `Array []`;
190+
191+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and generate source maps: warning 1`] = `Array []`;
192+
193+
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\\":\\"\\"}"`;
166194

167-
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" and generate source maps: warning 1`] = `Array []`;
195+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier and parser option as "String": index.sss 1`] = `"a{color:#000}"`;
196+
197+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier: assets 1`] = `
198+
Object {
199+
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}",
200+
}
201+
`;
168202

169-
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\\":\\"\\"}"`;
203+
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify" minifier: error 1`] = `Array []`;
170204

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

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

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

195-
exports[`"minify" option should work with "CssMinimizerPlugin.cssnanoMinify": assets 1`] = `
229+
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: assets 1`] = `
196230
Object {
197-
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}",
231+
"foo.css": "body{font-weight:700;color:red}body a{text-align:center}
232+
/*# sourceMappingURL=foo.css.map*/",
233+
"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\\":\\"\\"}",
198234
}
199235
`;
200236

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

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

205-
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source map: assets 1`] = `
241+
exports[`"minify" option should work with "CssMinimizerPlugin.cssoMinify" minifier and generate source maps #2: assets 1`] = `
206242
Object {
207-
"foo.css": "body{font-weight:700;color:red}body a{text-align:center}
243+
"foo/foo.css": "body{font-weight:700;color:red}body a{text-align:center}
208244
/*# sourceMappingURL=foo.css.map*/",
209-
"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\\":\\"\\"}",
245+
"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\\":\\"\\"}",
210246
}
211247
`;
212248

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

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

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

281+
exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps #2: assets 1`] = `
282+
Object {
283+
"foo/foo.css": "body{font-weight:bold}body{color:red}body a{text-align:center}
284+
285+
/*# sourceMappingURL=foo.css.map*/",
286+
"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\\":\\"\\"}",
287+
}
288+
`;
289+
290+
exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps #2: error 1`] = `Array []`;
291+
292+
exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps #2: warning 1`] = `Array []`;
293+
245294
exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier and generate source maps: assets 1`] = `
246295
Object {
247296
"foo.css": "body{color:red}a{color:#00f}

‎test/__snapshots__/sourceMap-option.test.js.snap‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@ Object {
1919
"dist/entry2.css.map": {
2020
"version": 3,
2121
"file": "dist/entry2.css",
22-
"mappings": "AAAA,KAKE,SAAU,CAJV,eACF,CAMA,OACE,iBACF",
22+
"mappings": "AAAA,KCGE,SAAU,CDFV,eCCF,CAIA,OACE,iBAGF",
2323
"sources": [
24-
"webpack:///entry2.css"
24+
"webpack:///./sourcemap/bar.scss",
25+
"webpack:///./sourcemap/foo.css"
2526
],
2627
"sourcesContent": [
27-
"body {\\n font-weight: bold;\\n}\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}\\n"
28+
"body {\\n font-weight: bold;\\n}",
29+
"@import 'bar';\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}"
2830
],
2931
"names": [],
3032
"sourceRoot": ""
@@ -49,25 +51,29 @@ Object {
4951
"sourcemaps/entry.css.map": {
5052
"version": 3,
5153
"file": "dist/entry.css",
52-
"mappings": "AAAA,KAKE,SAAU,CAJV,eACF,CAKA,OACE,iBACF",
54+
"mappings": "AAAA,KCGE,SAAU,CDFV,eCCF,CAEE,OACE,iBAIJ",
5355
"sources": [
54-
"webpack:///entry.css"
56+
"webpack:///./sourcemap/bar.scss",
57+
"webpack:///./sourcemap/foo.scss"
5558
],
5659
"sourcesContent": [
57-
"body {\\n font-weight: bold;\\n}\\n\\nbody {\\n color: red;\\n}\\nbody a {\\n text-align: center;\\n}\\n"
60+
"body {\\n font-weight: bold;\\n}",
61+
"@import 'bar';\\n\\nbody {\\n color: red;\\n a {\\n text-align: center;\\n }\\n}"
5862
],
5963
"names": [],
6064
"sourceRoot": ""
6165
},
6266
"sourcemaps/entry2.css.map": {
6367
"version": 3,
6468
"file": "dist/entry2.css",
65-
"mappings": "AAAA,KAKE,SAAU,CAJV,eACF,CAMA,OACE,iBACF",
69+
"mappings": "AAAA,KCGE,SAAU,CDFV,eCCF,CAIA,OACE,iBAGF",
6670
"sources": [
67-
"webpack:///entry2.css"
71+
"webpack:///./sourcemap/bar.scss",
72+
"webpack:///./sourcemap/foo.css"
6873
],
6974
"sourcesContent": [
70-
"body {\\n font-weight: bold;\\n}\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}\\n"
75+
"body {\\n font-weight: bold;\\n}",
76+
"@import 'bar';\\n\\nbody {\\n color: red;\\n}\\n\\nbody a {\\n text-align: center;\\n}"
7177
],
7278
"names": [],
7379
"sourceRoot": ""

0 commit comments

Comments
 (0)