diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx index 2273211de182c..5882642cb5260 100644 --- a/packages/next/pages/_document.tsx +++ b/packages/next/pages/_document.tsx @@ -17,6 +17,8 @@ import { } from '../next-server/server/get-page-files' import { cleanAmpPath } from '../next-server/server/utils' import { htmlEscapeJsonString } from '../server/htmlescape' +import { readFileSync } from 'fs' +import { join } from 'path' export { DocumentContext, DocumentInitialProps, DocumentProps } @@ -156,12 +158,8 @@ export class Head extends Component< context!: React.ContextType - getCssLinks(files: DocumentFiles): JSX.Element[] | null { - const { - assetPrefix, - devOnlyCacheBusterQueryString, - dynamicImports, - } = this.context + getCssFiles(files: DocumentFiles): string[] { + const { dynamicImports } = this.context const cssFiles = files.allFiles.filter((f) => f.endsWith('.css')) const sharedFiles: Set = new Set(files.sharedFiles) @@ -180,6 +178,43 @@ export class Head extends Component< cssFiles.push(...dynamicCssFiles) } + return cssFiles + } + + getAmpCss( + files: DocumentFiles, + curStyles: React.ReactElement[] + ): JSX.Element | null { + const cssFromFiles = this.getCssFiles(files) + .map((file) => readFileSync(join('.next', file), { encoding: 'utf-8' })) + .join('') + .replace(/\/\*# sourceMappingURL=.*\*\//g, '') + .replace(/\/\*@ sourceURL=.*?\*\//g, '') + const cssFromElements = curStyles + .map((style) => style.props.dangerouslySetInnerHTML.__html) + .join('') + .replace(/\/\*# sourceMappingURL=.*\*\//g, '') + .replace(/\/\*@ sourceURL=.*?\*\//g, '') + + if (cssFromFiles || cssFromElements) { + return ( +