DocumentProps without files: breaking change in 9.5.3?

[bobaaaaa]

Bug report

Describe the bug

In this PR #16184, the files property was removed from the DocumentProps (types) and the corresponding implementation. Is this intended? And if yes: how can I access the files like in the following code:

To Reproduce

import React from 'react';
import { readFileSync } from 'fs';
import { resolve } from 'path';
import { Head } from 'next/document';

import type { DocumentContext } from 'next/document';

class CriticalHead extends Head {
  getCssLinks() {
    const cssFiles = this.context.files.filter(f => /\.css$/.test(f));
    const { nonce } = this.props;

    const cssLinks = cssFiles.map(file => {
      const styleContent = readFileSync(resolve(process.cwd(), '.next', file), 'utf-8');

      return <style key={file} nonce={nonce} dangerouslySetInnerHTML={{ __html: styleContent }} />;
    });

    return cssLinks.length ? cssLinks : null;
  }
}

System information

• Version of Next.js: 9.5.3
• Version of Node.js: 12.18.2

[bobaaaaa]

Hey @Timer can you confirm that this change is intended? If so I can look for a solution by myself

[deadcoder0904]

@bobaaaaa I am facing this issue as well now 🙋‍♂️

Offtopic: what does the getCssLinks() function actually do? I didn't actually get it, I just copied it from the Tailwind CSS blog :)

[bobaaaaa]

It returns all <link href="styles.css" rel="stylesheet" /> but as JSX element. I guess we need to parse the href prop.

[deadcoder0904]

Ohh, got it. It actually takes all .css files & makes it inline & then returns them. Wondering why they need to do that though as they also include tailwind.css in _app.js?

[bobaaaaa]

Because nobody of the nextjs core team answered my question: Here is our workaround. It's the same impl. @Timer used in the related PR.

import { getPageFiles } from 'next/dist/next-server/server/get-page-files';
import type { BuildManifest } from 'next/dist/next-server/server/get-page-files';

type DocumentFiles = {
  sharedFiles: readonly string[];
  pageFiles: readonly string[];
  allFiles: readonly string[];
};

function getDocumentFiles(buildManifest: BuildManifest, pathname: string): DocumentFiles {
  const sharedFiles: readonly string[] = getPageFiles(buildManifest, '/_app');
  const pageFiles: readonly string[] = pathname !== '/_error' ? getPageFiles(buildManifest, pathname) : [];
  return {
    sharedFiles,
    pageFiles,
    allFiles: [...new Set([...sharedFiles, ...pageFiles])],
  };
}

class InlineStylesHead extends Head {
  getCssLinks() {
    return this.__getInlineStyles();
  }

  __getInlineStyles() {
    const { assetPrefix } = this.context;
    const files: DocumentFiles = getDocumentFiles(this.context.buildManifest, this.context.__NEXT_DATA__.page);

    if (!files || files.allFiles.length === 0) {
      return null;
    }

    return files.allFiles
      .filter(f => f.endsWith('.css'))
      .map(file => (
        <style
          key={file}
          nonce={this.props.nonce}
          data-href={`${assetPrefix}/_next/${file}`}
          dangerouslySetInnerHTML={{
            __html: readFileSync(resolve(process.cwd(), '.next', file), 'utf-8'),
          }}
        />
      ));
  }
}

[mandava]

@bobaaaaa

In 9.5.3, files are passed as argument to getCssLinks

getCssLinks({ allFiles }) {
  return allFiles
    .filter((file) => file.endsWith('.css'))
    .map((file) => (
      <style
        key={file}
        nonce={this.props.nonce}
        dangerouslySetInnerHTML={{
          __html: fs.readFileSync(path.join('.next', file), 'utf-8'),
        }}
      />
    ));
}

Ref: vercel/next-plugins#238 (comment)

[bobaaaaa]

wow, thats nice. Thx @mandava 👍

[deadcoder0904]

@mandava it's not files, it's allFiles when destructuring.

When I click on Head in VSCode, I see the following:

getCssLinks(files: DocumentFiles): JSX.Element[] | null;

And DocumentFiles is defined as:

declare type DocumentFiles = {
    sharedFiles: readonly string[];
    pageFiles: readonly string[];
    allFiles: readonly string[];
};

So either you can do getCssLinks(files) or literally any variable (x or y) instead of files but while destructuring only one of sharedFiles, pageFiles & allFiles :)

[mandava]

@deadcoder0904 Thank you. Updated the code snippet.