2020-10-21 12:31:07 +02:00
|
|
|
import cssnanoSimple from 'cssnano-simple'
|
2020-11-14 16:03:04 +01:00
|
|
|
import postcssScss from 'next/dist/compiled/postcss-scss'
|
|
|
|
import postcss, { Parser } from 'postcss'
|
2019-09-18 19:59:46 +02:00
|
|
|
import webpack from 'webpack'
|
2020-08-22 14:16:13 +02:00
|
|
|
import sources from 'webpack-sources'
|
2020-12-21 17:02:41 +01:00
|
|
|
import { tracer, traceAsyncFn } from '../../tracer'
|
2020-08-22 14:16:13 +02:00
|
|
|
|
|
|
|
// @ts-ignore: TODO: remove ignore when webpack 5 is stable
|
|
|
|
const { RawSource, SourceMapSource } = webpack.sources || sources
|
2019-09-18 19:59:46 +02:00
|
|
|
|
|
|
|
// https://github.com/NMFR/optimize-css-assets-webpack-plugin/blob/0a410a9bf28c7b0e81a3470a13748e68ca2f50aa/src/index.js#L20
|
|
|
|
const CSS_REGEX = /\.css(\?.*)?$/i
|
|
|
|
|
|
|
|
type CssMinimizerPluginOptions = {
|
|
|
|
postcssOptions: {
|
|
|
|
map: false | { prev?: string | false; inline: boolean; annotation: boolean }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-17 12:59:44 +02:00
|
|
|
const isWebpack5 = parseInt(webpack.version!) === 5
|
|
|
|
|
2019-09-18 19:59:46 +02:00
|
|
|
export class CssMinimizerPlugin {
|
2019-12-13 21:23:28 +01:00
|
|
|
__next_css_remove = true
|
|
|
|
|
2019-09-18 19:59:46 +02:00
|
|
|
private options: CssMinimizerPluginOptions
|
|
|
|
|
|
|
|
constructor(options: CssMinimizerPluginOptions) {
|
|
|
|
this.options = options
|
|
|
|
}
|
|
|
|
|
2020-08-17 12:59:44 +02:00
|
|
|
optimizeAsset(file: string, asset: any) {
|
|
|
|
const postcssOptions = {
|
|
|
|
...this.options.postcssOptions,
|
|
|
|
to: file,
|
|
|
|
from: file,
|
2020-11-14 16:03:04 +01:00
|
|
|
|
|
|
|
// We don't actually add this parser to support Sass. It can also be used
|
|
|
|
// for inline comment support. See the README:
|
|
|
|
// https://github.com/postcss/postcss-scss/blob/master/README.md#2-inline-comments-for-postcss
|
|
|
|
parser: (postcssScss as any) as Parser,
|
2020-08-17 12:59:44 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
let input: string
|
|
|
|
if (postcssOptions.map && asset.sourceAndMap) {
|
|
|
|
const { source, map } = asset.sourceAndMap()
|
|
|
|
input = source
|
|
|
|
postcssOptions.map.prev = map ? map : false
|
|
|
|
} else {
|
|
|
|
input = asset.source()
|
|
|
|
}
|
|
|
|
|
2020-10-21 12:31:07 +02:00
|
|
|
return postcss([cssnanoSimple])
|
|
|
|
.process(input, postcssOptions)
|
|
|
|
.then((res) => {
|
|
|
|
if (res.map) {
|
|
|
|
return new SourceMapSource(res.css, file, res.map.toJSON())
|
|
|
|
} else {
|
|
|
|
return new RawSource(res.css)
|
|
|
|
}
|
|
|
|
})
|
2020-08-17 12:59:44 +02:00
|
|
|
}
|
|
|
|
|
2019-09-18 19:59:46 +02:00
|
|
|
apply(compiler: webpack.Compiler) {
|
2020-07-15 19:56:27 +02:00
|
|
|
compiler.hooks.compilation.tap('CssMinimizerPlugin', (compilation: any) => {
|
2020-08-17 12:59:44 +02:00
|
|
|
if (isWebpack5) {
|
2020-08-22 14:16:13 +02:00
|
|
|
const cache = compilation.getCache('CssMinimizerPlugin')
|
2020-08-17 12:59:44 +02:00
|
|
|
compilation.hooks.processAssets.tapPromise(
|
|
|
|
{
|
|
|
|
name: 'CssMinimizerPlugin',
|
|
|
|
// @ts-ignore TODO: Remove ignore when webpack 5 is stable
|
|
|
|
stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
|
|
|
|
},
|
|
|
|
async (assets: any) => {
|
2020-12-21 17:02:41 +01:00
|
|
|
const span = tracer.startSpan('css-minimizer-plugin', {
|
|
|
|
attributes: {
|
|
|
|
webpackVersion: 5,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
return traceAsyncFn(span, async () => {
|
|
|
|
const files = Object.keys(assets)
|
|
|
|
await Promise.all(
|
|
|
|
files
|
|
|
|
.filter((file) => CSS_REGEX.test(file))
|
|
|
|
.map(async (file) => {
|
|
|
|
const assetSpan = tracer.startSpan('minify-css', {
|
|
|
|
attributes: {
|
|
|
|
file,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
return traceAsyncFn(span, async () => {
|
|
|
|
const asset = assets[file]
|
|
|
|
|
|
|
|
const etag = cache.getLazyHashedEtag(asset)
|
|
|
|
|
|
|
|
const cachedResult = await cache.getPromise(file, etag)
|
|
|
|
|
|
|
|
assetSpan.setAttribute(
|
|
|
|
'cache',
|
|
|
|
cachedResult ? 'HIT' : 'MISS'
|
|
|
|
)
|
|
|
|
if (cachedResult) {
|
|
|
|
assets[file] = cachedResult
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const result = await this.optimizeAsset(file, asset)
|
|
|
|
await cache.storePromise(file, etag, result)
|
|
|
|
assets[file] = result
|
|
|
|
})
|
|
|
|
})
|
|
|
|
)
|
|
|
|
})
|
2020-08-17 12:59:44 +02:00
|
|
|
}
|
|
|
|
)
|
|
|
|
return
|
|
|
|
}
|
2019-09-18 19:59:46 +02:00
|
|
|
compilation.hooks.optimizeChunkAssets.tapPromise(
|
|
|
|
'CssMinimizerPlugin',
|
2020-12-21 17:02:41 +01:00
|
|
|
(chunks: webpack.compilation.Chunk[]) => {
|
|
|
|
const span = tracer.startSpan('css-minimizer-plugin', {
|
|
|
|
attributes: {
|
|
|
|
webpackVersion: 4,
|
|
|
|
compilationName: compilation.name,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
return traceAsyncFn(span, async () => {
|
|
|
|
const res = await Promise.all(
|
|
|
|
chunks
|
|
|
|
.reduce(
|
|
|
|
(acc, chunk) => acc.concat(chunk.files || []),
|
|
|
|
[] as string[]
|
|
|
|
)
|
|
|
|
.filter((entry) => CSS_REGEX.test(entry))
|
|
|
|
.map(async (file) => {
|
|
|
|
const assetSpan = tracer.startSpan('minify-css', {
|
|
|
|
attributes: {
|
|
|
|
file,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
return traceAsyncFn(assetSpan, async () => {
|
|
|
|
const asset = compilation.assets[file]
|
|
|
|
// Makes trace attributes the same as webpack 5
|
|
|
|
// When using webpack 4 the result is not cached
|
|
|
|
assetSpan.setAttribute('cache', 'MISS')
|
|
|
|
compilation.assets[file] = await this.optimizeAsset(
|
|
|
|
file,
|
|
|
|
asset
|
|
|
|
)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
)
|
|
|
|
return res
|
|
|
|
})
|
|
|
|
}
|
2019-09-18 19:59:46 +02:00
|
|
|
)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|