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'
|
2021-10-07 01:46:46 +02:00
|
|
|
import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
|
2021-01-10 02:12:13 +01:00
|
|
|
import { spans } from './profiling-plugin'
|
2020-08-22 14:16:13 +02:00
|
|
|
|
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 }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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
|
2021-08-17 09:18:08 +02:00
|
|
|
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()
|
|
|
|
}
|
|
|
|
|
2021-07-08 13:10:43 +02:00
|
|
|
return postcss([cssnanoSimple({}, postcss)])
|
2020-10-21 12:31:07 +02:00
|
|
|
.process(input, postcssOptions)
|
|
|
|
.then((res) => {
|
|
|
|
if (res.map) {
|
2021-01-14 02:59:08 +01:00
|
|
|
return new sources.SourceMapSource(res.css, file, res.map.toJSON())
|
2020-10-21 12:31:07 +02:00
|
|
|
} else {
|
2021-01-14 02:59:08 +01:00
|
|
|
return new sources.RawSource(res.css)
|
2020-10-21 12:31:07 +02:00
|
|
|
}
|
|
|
|
})
|
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) => {
|
2021-10-07 01:46:46 +02:00
|
|
|
const cache = compilation.getCache('CssMinimizerPlugin')
|
|
|
|
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) => {
|
2021-09-20 22:19:00 +02:00
|
|
|
const compilationSpan = spans.get(compilation) || spans.get(compiler)
|
|
|
|
const cssMinimizerSpan = compilationSpan!.traceChild(
|
2021-09-13 15:49:29 +02:00
|
|
|
'css-minimizer-plugin'
|
Telemetry-compatible tracing (#22713)
A number of changes here. I recommend viewing the diff with the <a href="?w=1">whitespace flag enabled</a>.
- OpenTelemetry is replaced with a custom and lightweight tracing solution.
- Three trace targets are currently supported: console, Zipkin, and NextJS.
- Tracing is now governed by environment variables rather than `--require instrument.js`.
+ `TRACE_TARGET`: one of `CONSOLE`, `ZIPKIN`, or `TELEMETRY`; defaults to `TELEMETRY` if unset or invalid.
+ `TRACE_ID`: an 8-byte hex-encoded value used as the Zipkin trace ID; if not provided, this value will be randomly generated and passed down to subprocesses.
Other sundry:
- I'm missing something, probably a setup step, with the Zipkin target. Traces are captured successfully, but you have to manually enter the Trace ID in order to view the trace - it doesn't show up in queries.
- I'm generally unhappy with [this commit](https://github.com/vercel/next.js/pull/22713/commits/235cedcb3ead76b630b4c8aa695f904489da2831). It is... untidy to provide a telemetry object via `setGlobal`, but I don't have a ready alternative. Is `distDir` strictly required when creating a new Telemetry object? I didn't dig too deep here.
As noted, there are a lot of changes, so it'd be great if a reviewer could:
- [ ] pull down the branch and try to break it
- [ ] check the Zipkin traces and identify possible regressions in the functionality
Closes #22570
Fixes #22574
2021-03-10 22:00:20 +01:00
|
|
|
)
|
2021-10-07 01:46:46 +02:00
|
|
|
cssMinimizerSpan.setAttribute('webpackVersion', 5)
|
Telemetry-compatible tracing (#22713)
A number of changes here. I recommend viewing the diff with the <a href="?w=1">whitespace flag enabled</a>.
- OpenTelemetry is replaced with a custom and lightweight tracing solution.
- Three trace targets are currently supported: console, Zipkin, and NextJS.
- Tracing is now governed by environment variables rather than `--require instrument.js`.
+ `TRACE_TARGET`: one of `CONSOLE`, `ZIPKIN`, or `TELEMETRY`; defaults to `TELEMETRY` if unset or invalid.
+ `TRACE_ID`: an 8-byte hex-encoded value used as the Zipkin trace ID; if not provided, this value will be randomly generated and passed down to subprocesses.
Other sundry:
- I'm missing something, probably a setup step, with the Zipkin target. Traces are captured successfully, but you have to manually enter the Trace ID in order to view the trace - it doesn't show up in queries.
- I'm generally unhappy with [this commit](https://github.com/vercel/next.js/pull/22713/commits/235cedcb3ead76b630b4c8aa695f904489da2831). It is... untidy to provide a telemetry object via `setGlobal`, but I don't have a ready alternative. Is `distDir` strictly required when creating a new Telemetry object? I didn't dig too deep here.
As noted, there are a lot of changes, so it'd be great if a reviewer could:
- [ ] pull down the branch and try to break it
- [ ] check the Zipkin traces and identify possible regressions in the functionality
Closes #22570
Fixes #22574
2021-03-10 22:00:20 +01:00
|
|
|
|
|
|
|
return cssMinimizerSpan.traceAsyncFn(async () => {
|
2021-10-07 01:46:46 +02:00
|
|
|
const files = Object.keys(assets)
|
|
|
|
await Promise.all(
|
|
|
|
files
|
|
|
|
.filter((file) => CSS_REGEX.test(file))
|
Telemetry-compatible tracing (#22713)
A number of changes here. I recommend viewing the diff with the <a href="?w=1">whitespace flag enabled</a>.
- OpenTelemetry is replaced with a custom and lightweight tracing solution.
- Three trace targets are currently supported: console, Zipkin, and NextJS.
- Tracing is now governed by environment variables rather than `--require instrument.js`.
+ `TRACE_TARGET`: one of `CONSOLE`, `ZIPKIN`, or `TELEMETRY`; defaults to `TELEMETRY` if unset or invalid.
+ `TRACE_ID`: an 8-byte hex-encoded value used as the Zipkin trace ID; if not provided, this value will be randomly generated and passed down to subprocesses.
Other sundry:
- I'm missing something, probably a setup step, with the Zipkin target. Traces are captured successfully, but you have to manually enter the Trace ID in order to view the trace - it doesn't show up in queries.
- I'm generally unhappy with [this commit](https://github.com/vercel/next.js/pull/22713/commits/235cedcb3ead76b630b4c8aa695f904489da2831). It is... untidy to provide a telemetry object via `setGlobal`, but I don't have a ready alternative. Is `distDir` strictly required when creating a new Telemetry object? I didn't dig too deep here.
As noted, there are a lot of changes, so it'd be great if a reviewer could:
- [ ] pull down the branch and try to break it
- [ ] check the Zipkin traces and identify possible regressions in the functionality
Closes #22570
Fixes #22574
2021-03-10 22:00:20 +01:00
|
|
|
.map(async (file) => {
|
2021-09-13 15:49:29 +02:00
|
|
|
const assetSpan = cssMinimizerSpan.traceChild('minify-css')
|
Telemetry-compatible tracing (#22713)
A number of changes here. I recommend viewing the diff with the <a href="?w=1">whitespace flag enabled</a>.
- OpenTelemetry is replaced with a custom and lightweight tracing solution.
- Three trace targets are currently supported: console, Zipkin, and NextJS.
- Tracing is now governed by environment variables rather than `--require instrument.js`.
+ `TRACE_TARGET`: one of `CONSOLE`, `ZIPKIN`, or `TELEMETRY`; defaults to `TELEMETRY` if unset or invalid.
+ `TRACE_ID`: an 8-byte hex-encoded value used as the Zipkin trace ID; if not provided, this value will be randomly generated and passed down to subprocesses.
Other sundry:
- I'm missing something, probably a setup step, with the Zipkin target. Traces are captured successfully, but you have to manually enter the Trace ID in order to view the trace - it doesn't show up in queries.
- I'm generally unhappy with [this commit](https://github.com/vercel/next.js/pull/22713/commits/235cedcb3ead76b630b4c8aa695f904489da2831). It is... untidy to provide a telemetry object via `setGlobal`, but I don't have a ready alternative. Is `distDir` strictly required when creating a new Telemetry object? I didn't dig too deep here.
As noted, there are a lot of changes, so it'd be great if a reviewer could:
- [ ] pull down the branch and try to break it
- [ ] check the Zipkin traces and identify possible regressions in the functionality
Closes #22570
Fixes #22574
2021-03-10 22:00:20 +01:00
|
|
|
assetSpan.setAttribute('file', file)
|
|
|
|
|
|
|
|
return assetSpan.traceAsyncFn(async () => {
|
2021-10-07 01:46:46 +02:00
|
|
|
const asset = assets[file]
|
|
|
|
|
|
|
|
const etag = cache.getLazyHashedEtag(asset)
|
|
|
|
|
|
|
|
const cachedResult = await cache.getPromise(file, etag)
|
|
|
|
|
|
|
|
assetSpan.setAttribute(
|
|
|
|
'cache',
|
|
|
|
cachedResult ? 'HIT' : 'MISS'
|
Telemetry-compatible tracing (#22713)
A number of changes here. I recommend viewing the diff with the <a href="?w=1">whitespace flag enabled</a>.
- OpenTelemetry is replaced with a custom and lightweight tracing solution.
- Three trace targets are currently supported: console, Zipkin, and NextJS.
- Tracing is now governed by environment variables rather than `--require instrument.js`.
+ `TRACE_TARGET`: one of `CONSOLE`, `ZIPKIN`, or `TELEMETRY`; defaults to `TELEMETRY` if unset or invalid.
+ `TRACE_ID`: an 8-byte hex-encoded value used as the Zipkin trace ID; if not provided, this value will be randomly generated and passed down to subprocesses.
Other sundry:
- I'm missing something, probably a setup step, with the Zipkin target. Traces are captured successfully, but you have to manually enter the Trace ID in order to view the trace - it doesn't show up in queries.
- I'm generally unhappy with [this commit](https://github.com/vercel/next.js/pull/22713/commits/235cedcb3ead76b630b4c8aa695f904489da2831). It is... untidy to provide a telemetry object via `setGlobal`, but I don't have a ready alternative. Is `distDir` strictly required when creating a new Telemetry object? I didn't dig too deep here.
As noted, there are a lot of changes, so it'd be great if a reviewer could:
- [ ] pull down the branch and try to break it
- [ ] check the Zipkin traces and identify possible regressions in the functionality
Closes #22570
Fixes #22574
2021-03-10 22:00:20 +01:00
|
|
|
)
|
2021-10-07 01:46:46 +02:00
|
|
|
if (cachedResult) {
|
|
|
|
assets[file] = cachedResult
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const result = await this.optimizeAsset(file, asset)
|
|
|
|
await cache.storePromise(file, etag, result)
|
|
|
|
assets[file] = result
|
2020-12-21 17:02:41 +01:00
|
|
|
})
|
Telemetry-compatible tracing (#22713)
A number of changes here. I recommend viewing the diff with the <a href="?w=1">whitespace flag enabled</a>.
- OpenTelemetry is replaced with a custom and lightweight tracing solution.
- Three trace targets are currently supported: console, Zipkin, and NextJS.
- Tracing is now governed by environment variables rather than `--require instrument.js`.
+ `TRACE_TARGET`: one of `CONSOLE`, `ZIPKIN`, or `TELEMETRY`; defaults to `TELEMETRY` if unset or invalid.
+ `TRACE_ID`: an 8-byte hex-encoded value used as the Zipkin trace ID; if not provided, this value will be randomly generated and passed down to subprocesses.
Other sundry:
- I'm missing something, probably a setup step, with the Zipkin target. Traces are captured successfully, but you have to manually enter the Trace ID in order to view the trace - it doesn't show up in queries.
- I'm generally unhappy with [this commit](https://github.com/vercel/next.js/pull/22713/commits/235cedcb3ead76b630b4c8aa695f904489da2831). It is... untidy to provide a telemetry object via `setGlobal`, but I don't have a ready alternative. Is `distDir` strictly required when creating a new Telemetry object? I didn't dig too deep here.
As noted, there are a lot of changes, so it'd be great if a reviewer could:
- [ ] pull down the branch and try to break it
- [ ] check the Zipkin traces and identify possible regressions in the functionality
Closes #22570
Fixes #22574
2021-03-10 22:00:20 +01:00
|
|
|
})
|
|
|
|
)
|
2020-12-21 17:02:41 +01:00
|
|
|
})
|
|
|
|
}
|
2019-09-18 19:59:46 +02:00
|
|
|
)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|