Styles do not apply Once Deployed on Github page

[Patrick Desjardins]

I am using rehypePrettyCode in a NextJS server-side generated website (static assets) that is hosted on Github page. In a development environment next dev or when the generated assets are served locally npx build && npx serve@latest out the code highlight works well. Very easy to configure and use.

However, the same code in Github action compiles and deploys without a warning/error message but the end result is different.

Locally, the output looks like what I expect:

<figure data-rehype-pretty-code-figure="">
<pre tabindex="0" data-language="tsx" data-theme="github-light" style="background-color: rgb(255, 255, 255); color: rgb(36, 41, 46);"><code data-language="tsx" data-theme="github-light" style="display: grid;">
<span data-line="">
<span style="color: rgb(215, 58, 73);">export</span>
<span style="color: rgb(215, 58, 73);"> interface</span>
<span style="color: rgb(111, 66, 193);"> MyComponentProps</span>
<span style="color: rgb(36, 41, 46);"> {</span></span>

However, the code deployed by Github action looks like this:

<figure data-rehype-pretty-code-figure="">
<pre tabindex="0" data-language="tsx" data-theme="github-light" style="background-color: rgb(255, 255, 255); color: rgb(36, 41, 46);"><code data-language="tsx" data-theme="github-light" style="display: grid;">
<span data-line=""><span>export interface MyComponentProps {</span></span>
<span data-line=""><span>  configuration: ConfigType;</span></span>
<span data-line=""><span>  metadata: MetadataType;</span></span>
<span data-line=""><span>  variant: Variant;</span></span>
<span data-line=""><span>  color: PrimaryColor;</span></span>
<span data-line=""><span>  link: string;</span></span>

As we can see the style is missing and lines are not broken by tokens.

I've tried to run dev/build in WSL and on a MacOS. Both work well, it's really on Github page that it does not work out.

The configuration:

import { compileMDX } from "next-mdx-remote/rsc";
import rehypePrettyCode from "rehype-pretty-code";
//...
  const options = {
    defaultLang: "plaintext",
    theme: "github-light",
    keepBackground: true,
  };
  const { content, frontmatter } = await compileMDX({
    source: post.rawFileContent,
    options: {
      parseFrontmatter: true,
      mdxOptions: { rehypePlugins: [[rehypePrettyCode as any, options]] },
    },
    components: {
      TocAzureContainerSeries: TocAzureContainerSeries,
      CodeSandbox: CodeSandbox,
      YouTube: YouTube,
      SoundCloud: SoundCloud,
    },
  });

Full source code is available on Github.

I'll try to do a small repo but what is hard to repro is that it works running the dev command or even the build + serve the static file locally 🤔

[omar]

@MrDesjardins can you try using the official github actions for publishing to pages? You need these two:

https://github.com/actions/upload-pages-artifact

https://github.com/actions/deploy-pages

More details here: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#creating-a-custom-github-actions-workflow-to-publish-your-site

Also update your node step to use latest node action v4.

I'll take a closer look at this this week.