Skip to content

Commit fd9abac

Browse files
cap-Bernarditocap-Bernardito
authored
fix: do not crash on the minify option
1 parent fecefed commit fd9abac

File tree

7 files changed

+104
-27
lines changed

7 files changed

+104
-27
lines changed

‎README.md‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -311,9 +311,9 @@ module.exports = {
311311
minimize: true,
312312
minimizer: [
313313
new CssMinimizerPlugin({
314-
minify: (data) => {
314+
sourceMap: true,
315+
minify: (data, inputMap, minimizerOptions) => {
315316
const postcss = require('postcss');
316-
const { input, postcssOptions, minimizerOptions } = data;
317317

318318
const plugin = postcss.plugin(
319319
'custom-plugin',
@@ -322,6 +322,16 @@ module.exports = {
322322
}
323323
);
324324

325+
const [[filename, input]] = Object.entries(data);
326+
327+
const postcssOptions = {
328+
from: filename,
329+
to: filename,
330+
map: {
331+
prev: inputMap,
332+
},
333+
};
334+
325335
return postcss([plugin])
326336
.process(input, postcssOptions)
327337
.then((result) => {
@@ -475,15 +485,24 @@ module.exports = {
475485
minimize: true,
476486
minimizer: [
477487
new CssMinimizerPlugin({
478-
minify: ({ input, postcssOptions }) => {
479-
// eslint-disable-next-line global-require
488+
sourceMap: true,
489+
minify: async (data, inputMap) => {
480490
const csso = require('csso');
491+
const sourcemap = require('source-map');
481492

493+
const [[filename, input]] = Object.entries(data);
482494
const minifiedCss = csso.minify(input, {
483-
filename: postcssOptions.from,
495+
filename: filename,
484496
sourceMap: true,
485497
});
486498

499+
if (inputMap) {
500+
minifiedCss.map.applySourceMap(
501+
new sourcemap.SourceMapConsumer(inputMap),
502+
filename
503+
);
504+
}
505+
487506
return {
488507
css: minifiedCss.css,
489508
map: minifiedCss.map.toJSON(),
@@ -511,13 +530,16 @@ module.exports = {
511530
minimize: true,
512531
minimizer: [
513532
new CssMinimizerPlugin({
514-
minify: async ({ input, postcssOptions }) => {
533+
sourceMap: true,
534+
minify: async (data, inputMap) => {
515535
// eslint-disable-next-line global-require
516536
const CleanCSS = require('clean-css');
517537

538+
const [[filename, input]] = Object.entries(data);
518539
const minifiedCss = await new CleanCSS({ sourceMap: true }).minify({
519-
[postcssOptions.from]: {
540+
[filename]: {
520541
styles: input,
542+
sourceMap: inputMap,
521543
},
522544
});
523545

‎src/minify.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ const minify = async (options) => {
2222

2323
if (minifyFn) {
2424
const result = await minifyFn(
25-
{ input, postcssOptions, minimizerOptions },
26-
inputSourceMap
25+
{ [assetName]: input },
26+
inputSourceMap,
27+
minimizerOptions
2728
);
2829

2930
return {
@@ -34,7 +35,7 @@ const minify = async (options) => {
3435
}
3536

3637
if (inputSourceMap) {
37-
postcssOptions.map = { prev: inputSourceMap, ...map };
38+
postcssOptions.map = { annotation: false, prev: inputSourceMap, ...map };
3839
}
3940

4041
const result = await cssnano.process(input, postcssOptions, minimizerOptions);

‎test/CssMinimizerPlugin.test.js‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -274,8 +274,10 @@ describe('CssMinimizerPlugin', () => {
274274
});
275275
});
276276

277+
const [[filename, input]] = Object.entries(data);
278+
277279
return postcss([plugin])
278-
.process(data.input, data.postcssOptions)
280+
.process(input, { from: filename, to: filename })
279281
.then((result) => {
280282
return result;
281283
});
@@ -315,8 +317,10 @@ describe('CssMinimizerPlugin', () => {
315317
});
316318
});
317319

320+
const [[filename, input]] = Object.entries(data);
321+
318322
return postcss([plugin])
319-
.process(data.input, data.postcssOptions)
323+
.process(input, { from: filename, to: filename })
320324
.then((result) => {
321325
return {
322326
css: result.css,
@@ -612,20 +616,43 @@ describe('CssMinimizerPlugin', () => {
612616
const compiler = getCompiler({
613617
devtool: 'source-map',
614618
entry: {
615-
foo: `${__dirname}/fixtures/foo.css`,
619+
foo: `${__dirname}/fixtures/sourcemap/foo.scss`,
620+
},
621+
module: {
622+
rules: [
623+
{
624+
test: /.s?css$/i,
625+
use: [
626+
MiniCssExtractPlugin.loader,
627+
{ loader: 'css-loader', options: { sourceMap: true } },
628+
{ loader: 'sass-loader', options: { sourceMap: true } },
629+
],
630+
},
631+
],
616632
},
617633
});
618634

619635
new CssMinimizerPlugin({
620-
minify: ({ input, postcssOptions }) => {
636+
sourceMap: true,
637+
minify: async (data, inputMap) => {
621638
// eslint-disable-next-line global-require
622639
const csso = require('csso');
640+
// eslint-disable-next-line global-require
641+
const sourcemap = require('source-map');
623642

643+
const [[filename, input]] = Object.entries(data);
624644
const minifiedCss = csso.minify(input, {
625-
filename: postcssOptions.from,
645+
filename,
626646
sourceMap: true,
627647
});
628648

649+
if (inputMap) {
650+
minifiedCss.map.applySourceMap(
651+
new sourcemap.SourceMapConsumer(inputMap),
652+
filename
653+
);
654+
}
655+
629656
return {
630657
css: minifiedCss.css,
631658
map: minifiedCss.map.toJSON(),
@@ -638,7 +665,7 @@ describe('CssMinimizerPlugin', () => {
638665
const maps = readAssets(compiler, stats, '.css.map');
639666

640667
Object.keys(maps).forEach((assetKey) => {
641-
expect(maps[assetKey]).toMatchSnapshot(assetKey);
668+
expect(normalizedSourceMap(maps[assetKey])).toMatchSnapshot(assetKey);
642669
});
643670

644671
expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
@@ -655,13 +682,15 @@ describe('CssMinimizerPlugin', () => {
655682
});
656683

657684
new CssMinimizerPlugin({
658-
minify: async ({ input, postcssOptions }) => {
685+
minify: async (data, inputMap) => {
659686
// eslint-disable-next-line global-require
660687
const CleanCSS = require('clean-css');
661688

689+
const [[filename, input]] = Object.entries(data);
662690
const minifiedCss = await new CleanCSS({ sourceMap: true }).minify({
663-
[postcssOptions.from]: {
691+
[filename]: {
664692
styles: input,
693+
sourceMap: inputMap,
665694
},
666695
});
667696

@@ -678,7 +707,7 @@ describe('CssMinimizerPlugin', () => {
678707
const maps = readAssets(compiler, stats, '.css.map');
679708

680709
Object.keys(maps).forEach((assetKey) => {
681-
expect(maps[assetKey]).toMatchSnapshot(assetKey);
710+
expect(normalizedSourceMap(maps[assetKey])).toMatchSnapshot(assetKey);
682711
});
683712

684713
expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');

‎test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack4‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,20 +148,20 @@ Object {
148148

149149
exports[`CssMinimizerPlugin should work with custom clean-css minifier: error 1`] = `Array []`;
150150

151-
exports[`CssMinimizerPlugin should work with custom clean-css minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
151+
exports[`CssMinimizerPlugin should work with custom clean-css minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\": [replaced for tests], \\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
152152

153153
exports[`CssMinimizerPlugin should work with custom clean-css minifier: warning 1`] = `Array []`;
154154

155155
exports[`CssMinimizerPlugin should work with custom csso minifier: assets 1`] = `
156156
Object {
157-
"foo.css": "body{color:red}a{color:#00f}
157+
"foo.css": "body{font-weight:700;color:red}body a{text-align:center}
158158
/*# sourceMappingURL=foo.css.map*/",
159159
}
160160
`;
161161

162162
exports[`CssMinimizerPlugin should work with custom csso minifier: error 1`] = `Array []`;
163163

164-
exports[`CssMinimizerPlugin should work with custom csso minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,S,CAEF,C,CACE,U\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
164+
exports[`CssMinimizerPlugin should work with custom csso minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\": [replaced for tests], \\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,e,CCEA,S,CADF,M,CAGI,iB\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"sourceRoot\\":\\"\\"}"`;
165165

166166
exports[`CssMinimizerPlugin should work with custom csso minifier: warning 1`] = `Array []`;
167167

‎test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack5‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,20 +158,20 @@ Object {
158158

159159
exports[`CssMinimizerPlugin should work with custom clean-css minifier: error 1`] = `Array []`;
160160

161-
exports[`CssMinimizerPlugin should work with custom clean-css minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"sourceRoot\\":\\"\\",\\"file\\":\\"foo.css\\"}"`;
161+
exports[`CssMinimizerPlugin should work with custom clean-css minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\": [replaced for tests], \\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"sourceRoot\\":\\"\\",\\"file\\":\\"foo.css\\"}"`;
162162

163163
exports[`CssMinimizerPlugin should work with custom clean-css minifier: warning 1`] = `Array []`;
164164

165165
exports[`CssMinimizerPlugin should work with custom csso minifier: assets 1`] = `
166166
Object {
167-
"foo.css": "body{color:red}a{color:#00f}
167+
"foo.css": "body{font-weight:700;color:red}body a{text-align:center}
168168
/*# sourceMappingURL=foo.css.map*/",
169169
}
170170
`;
171171

172172
exports[`CssMinimizerPlugin should work with custom csso minifier: error 1`] = `Array []`;
173173

174-
exports[`CssMinimizerPlugin should work with custom csso minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,S,CAEF,C,CACE,U\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
174+
exports[`CssMinimizerPlugin should work with custom csso minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\": [replaced for tests], \\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,e,CCEA,S,CADF,M,CAGI,iB\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"sourceRoot\\":\\"\\"}"`;
175175

176176
exports[`CssMinimizerPlugin should work with custom csso minifier: warning 1`] = `Array []`;
177177

‎test/sourceMap-option.test.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -354,8 +354,10 @@ describe('when applied with "sourceMap" option', () => {
354354
});
355355
});
356356

357+
const [[filename, input]] = Object.entries(data);
358+
357359
return postcss([plugin])
358-
.process(data.input, data.postcssOptions)
360+
.process(input, { from: filename, to: filename })
359361
.then((result) => {
360362
return result;
361363
});
@@ -367,4 +369,25 @@ describe('when applied with "sourceMap" option', () => {
367369
expect(getErrors(stats)).toMatchSnapshot('errors');
368370
expect(getWarnings(stats)).toMatchSnapshot('warnings');
369371
});
372+
373+
it('should do not contain sourcemap link in minified source', async () => {
374+
const compiler = getCompiler({
375+
devtool: 'source-map',
376+
entry: {
377+
foo: `${__dirname}/fixtures/foo.css`,
378+
},
379+
});
380+
381+
new CssMinimizerPlugin({
382+
sourceMap: false,
383+
}).apply(compiler);
384+
385+
const stats = await compile(compiler);
386+
387+
const assets = readAssets(compiler, stats, '.css');
388+
389+
const [[, input]] = Object.entries(assets);
390+
391+
expect(/sourceMappingURL/i.test(input)).toBe(false);
392+
});
370393
});

‎test/warningsFilter-option.test.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@ describe('warningsFilter option', () => {
3434
new CssMinimizerPlugin({
3535
parallel: false,
3636
minify: (data) => {
37+
const [[fileName, input]] = Object.entries(data);
38+
3739
return postcss([plugin])
38-
.process(data.input, data.postcssOptions)
40+
.process(input, { from: fileName, to: fileName })
3941
.then((result) => {
4042
return {
4143
css: result.css,

0 commit comments

Comments
 (0)