search

code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.51k stars 140 forks source link

Looks good on local but doesn't work on Vercel deploy #153

Closed marcelgruber closed 2 years ago

marcelgruber commented 2 years ago

All seems to work well on my local, but when I deploy to Vercel, it doesn't work.

Local

Screen Shot 2022-04-08 at 10 05 52

Vercel

Screen Shot 2022-04-08 at 10 05 57

Inspecting Vercel

Screen Shot 2022-04-08 at 10 08 03

What's odd is that when I click the "tab", the code shows for a few seconds but then disappears again.

Nothing in the console indicates any issues.

pomber commented 2 years ago

Looks like codehike's css is missing in prod. Do you have a link to your project?

marcelgruber commented 2 years ago

Thanks for the quick reply! I added you as a collaborator to the repo so you can see.

Here is where I import the CSS.

Screen Shot 2022-04-08 at 10 15 24

Instructions for adding that was from here:

https://dev.to/anishde12020/powerful-code-blocks-with-code-hike-and-mdx-21e2

pomber commented 2 years ago

Hmm, I've used Next.js + Tailwind + Code Hike + Vercel multiple times without problems, so in theory, it should work.

I'll try to investigate when I have some time. It would help if you could try to find a minimal reproducible example.

marcelgruber commented 2 years ago

Thank you. I'll keep hacking away. It's probably something silly.

marcelgruber commented 2 years ago

I see the issue. I'm using postcss to purge unused CSS. There isn't a way to exclude entire imports at this time. For example, this doesn't work:

/*! purgecss start ignore */
import '@code-hike/mdx/dist/index.css'
/*! purgecss end ignore */

There's an oustanding issue for this and the feature is scheduled to be released in a later version: https://github.com/FullHuman/purgecss/issues/170

postcss does have a way to do this by specifying certain selectors to ignore, but the styles for Code Hike don't share a common ancestor class, so there isn't a way to do this reliably.

Solution 1: move the code hike dist CSS into the project and import that and wrap the CSS in ignore comments Solution 2: don't use postcss Solution 3: add a common ancestor style class in Code Hike (though this will add bloat) Solution 4: identify all parent classes in Code Hike and add them one by one to the ignore selector list in the postcss config

I chose solution 1 for now.

pomber commented 2 years ago

I think all the code hike classes start with ch- maybe you can use that together with purgecss's whitelistPatterns