DEV Community

Discussion on: How To Add Monaco Editor to a Next.js app

View post
Collapse
 
jaakkolantero profile image
Tero Jaakkola •

This is fantastic. Took me 15 minutes to add to my own starter and get it running. Running pretty smoothly on localhost. Hosting to now breaks it a little bit.

github.com/jaakkolantero/monaco-st...

Big thanks!

Collapse
 
swyx profile image
swyx • • Edited

thanks! looks like the production build is missing this file github.com/microsoft/vscode/blob/a...

I figured it out! postcss is clearing monaco's overflow guard styling since it thinks it is unused.

// postcss.config.js
const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    // https://purgecss.com/configuration.html#options
    content: ["./components/**/*.tsx", "./pages/**/*.tsx"],
    css: [],
    whitelistPatternsChildren: [/monaco-editor/], // so it handles .monaco-editor .foo .bar
    defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
  }
];