f12788dee8
Follow-up to #39758, this PR makes sure that CSS imports (both global and CSS modules) from client components are not handled by mini-css-extract's HMR logic. Instead, we trigger a server component update and let the client to refetch the RSC payload. However, we are still leveraging the mini-css-extract plugin to emit CSS assets. So in this PR we add a new pitch loader to calculate the original file hash, but replace the final content to eliminate HMR logic but only keep the hash (so hot reloader can keep tracking that). ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
29 lines
807 B
TypeScript
29 lines
807 B
TypeScript
/**
|
|
* For server-side CSS imports, we need to ignore the actual module content but
|
|
* still trigger the hot-reloading diff mechanism. So here we put the content
|
|
* inside a comment.
|
|
*/
|
|
|
|
export function pitch(this: any) {
|
|
const content = this.fs.readFileSync(this.resource)
|
|
this.data.__checksum = (
|
|
typeof content === 'string' ? Buffer.from(content) : content
|
|
).toString('hex')
|
|
}
|
|
|
|
const NextServerCSSLoader = function (this: any, content: string) {
|
|
this.cacheable && this.cacheable()
|
|
|
|
const isCSSModule = this.resource.match(/\.module\.css$/)
|
|
if (isCSSModule) {
|
|
return (
|
|
content +
|
|
'\nmodule.exports.__checksum = ' +
|
|
JSON.stringify(this.data.__checksum)
|
|
)
|
|
}
|
|
|
|
return `export default ${JSON.stringify(this.data.__checksum)}`
|
|
}
|
|
|
|
export default NextServerCSSLoader
|