Syntax Highlighting is being purged

[tailwindlabs]

Syntax Highlighting is being purged

[adamwathan]

Not sure what's going on here, I cloned your repo (and undid your changes, like your purge comments and switching to the conservative purge mode) and everything works the way I'd expect. Perhaps make sure you are on the latest version of node and try again? Closing since not actually an issue for us (everything works as expected) and this isn't like a blog template we offer for other people to use or provide support for. Curious to know if you figure out the issue though!

[coreyc]

@laurosilvacom - what fixed this for me (not sure if this will cause other issues or not) was configuring purgecss to ignore everything in tailwind.css, not just base

[jackyef]

Hi! I encountered this issue as well and I found that this is an issue when deploying with Vercel. I just want to share the findings here in case someone else encountered this issue as well.

The debugging process

I added the following bash script to my build process to see what's happening in Vercel build worker.

ls -la && cat ./next.config.js 

Here is the output that I got

16:27:51.948 | total 500
-- | --
16:27:51.948 | drwxr-xr-x  10 root root   4096 Sep 26 09:27 .
16:27:51.948 | drwxr-xr-x   1 root root   4096 Sep 26 09:27 ..
16:27:51.948 | -rw-r--r--   1 root root    809 Sep 26 09:27 .eslintrc.js
16:27:51.948 | drwxr-xr-x   7 root root   4096 Sep 26 09:27 .git
16:27:51.948 | -rw-r--r--   1 root root    386 Sep 26 09:27 .gitignore
16:27:51.948 | drwxr-xr-x   3 root root   4096 Sep 26 09:27 .next
16:27:51.948 | -rw-r--r--   1 root root    908 Sep 26 09:27 next.config.js
16:27:51.948 | -rw-r--r--   1 root root   6595 Sep 26 09:27 next.config.original.1601112471648.js
16:27:51.948 | -rw-r--r--   1 root root    113 Sep 26 09:27 next-env.d.ts
16:27:51.948 | drwxr-xr-x 804 root root  32768 Sep 26 09:27 node_modules
16:27:51.948 | -rw-r--r--   1 root root   1896 Sep 26 09:27 package.json
16:27:51.948 | -rw-r--r--   1 root root     82 Sep 26 09:27 postcss.config.js
16:27:51.948 | -rw-r--r--   1 root root    124 Sep 26 09:27 .prettierrc
16:27:51.948 | drwxr-xr-x   5 root root   4096 Sep 26 09:27 public
16:27:51.948 | -rw-r--r--   1 root root   1645 Sep 26 09:27 README.md
16:27:51.948 | drwxr-xr-x   2 root root   4096 Sep 26 09:27 scripts
16:27:51.948 | drwxr-xr-x   8 root root   4096 Sep 26 09:27 src
16:27:51.948 | -rw-r--r--   1 root root   4097 Sep 26 09:27 tailwind.config.js
16:27:51.948 | -rw-r--r--   1 root root    800 Sep 26 09:27 tsconfig.json
16:27:51.948 | drwxr-xr-x   2 root root   4096 Sep 26 09:27 types
16:27:51.948 | drwxr-xr-x   2 root root   4096 Sep 26 09:27 utils
16:27:51.948 | -rw-r--r--   1 root root    525 Sep 26 09:27 vercel.json
16:27:51.948 | -rw-r--r--   1 root root 376147 Sep 26 09:27 yarn.lock
16:27:51.949 | module.exports = function(...args) {
16:27:51.949 | let original = require('./next.config.original.1601112471648.js');
16:27:51.949 | const finalConfig = {};
16:27:51.949 | const target = { target: 'experimental-serverless-trace' };
16:27:51.949 | if (typeof original === 'function' && original.constructor.name === 'AsyncFunction') {
16:27:51.949 | // AsyncFunctions will become promises
16:27:51.949 | original = original(...args);
16:27:51.949 | }
16:27:51.949 | if (original instanceof Promise) {
16:27:51.949 | // Special case for promises, as it's currently not supported
16:27:51.949 | // and will just error later on
16:27:51.949 | return original
16:27:51.949 | .then((orignalConfig) => Object.assign(finalConfig, orignalConfig))
16:27:51.949 | .then((config) => Object.assign(config, target));
16:27:51.949 | } else if (typeof original === 'function') {
16:27:51.949 | Object.assign(finalConfig, original(...args));
16:27:51.949 | } else if (typeof original === 'object') {
16:27:51.949 | Object.assign(finalConfig, original);
16:27:51.949 | }
16:27:51.950 | Object.assign(finalConfig, target);
16:27:51.950 | return finalConfig;

Notice that there are next.config.js and next.config.original.1601112471648.js. It seems like there is Vercel is injecting stuffs to the build process by replacing our next.config.js file, while our original config is now renamed to next.config.original.1601112471648.js.

Solution

My solution is to extract the classnames used for the tokens to a separate file

// code-highlighter-token.js
// needed to map token to tailwind classes
const tokenClassNames = {
  tag: 'text-code-red',
  'attr-name': 'text-code-yellow',
  'attr-value': 'text-code-green',
  deleted: 'text-code-red',
  inserted: 'text-code-green',
  punctuation: 'text-code-white',
  'template-punctuation': 'text-code-green',
  keyword: 'text-code-purple',
  string: 'text-code-green',
  'template-string': 'text-code-green',
  function: 'text-code-blue',
  boolean: 'text-code-red',
  comment: 'text-gray-400 italic',
  property: 'text-code-teal',
  'property-access': 'text-code-teal',
  dom: 'text-code-blue',
  'method': 'text-code-teal',
  class: 'text-code-yellow',
  color: 'text-code-purple',
  'function-variable': 'text-code-blue', // foo`something`; Here, foo is a function-variable
  'variable': 'text-code-blue', // foo`something`; Here, foo is a function-variable
  'interpolation-punctuation': 'text-code-teal', 
  'interpolation': 'text-code-red', 
};

module.exports = tokenClassNames;

And tell tailwind about that file:

// tailwind.config.js
purge: {
    mode: 'all',
    content: [
      './next.config.js',
      './code-highlighter-token.js', // we add this file
      './src/**/*.{ts,tsx,js,jsx,mdx}',
    ],

And that's it! The classes should now be correctly excluded from purging.