Potential Node memory leak caused by safeList > pattern RegEx

[damianof]

What version of Tailwind CSS are you using?

v3.1.8

What build tool (or framework if it abstracts the build tool) are you using?

vite: v3.1.0
postcss: v8.4.16
autoprefixer: v10.4.8

What version of Node.js are you using?

v16.17.0

What browser are you using?

Chrome or Edge (latest)

What operating system are you using?

macOS (Monterey 12.5 on MacBook Air M2 where the issue happens)

Reproduction URL

https://github.com/damianof/tailwind-config-memory-issue

Describe your issue

Receiving FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory in terminal from Node.

Repro steps:

• run the sample project with npm start
• expected: the application loads in the browser without errors in the Node console
• actual: receive FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (for the full output see here )

Additional details can be found within the README.md file on the sample project.

[thecrypticace]

Hey! So this isn't a memory leak really. It's because you're asking Tailwind CSS to generate almost 430k utilities! 😅 This is because we're generating all the colors and, along side that, each color gets all of the configured opacities.

I would suggest optimizing your safelist pattern to be a bit more constrained. One example of that is this: /^(bg|text|border|shadow|placeholder|ring|rounded)[^/]*$/ — this eliminates any color + opacity combo from the safelist brining the total to around 30k. This is still quite large but it's much more manageable.

@RobinMalfait gave some really good response(s) about this here If you want to read a more in-depth how/why/etc…:
#8845 (comment)
#8845 (comment)

[damianofusco]

@thecrypticace You can strip out everything from config safeList and just leave the pattern regex, it happens as soon as you have more than 2-3 keywords:

safelist: [
    {
      pattern: /^(bg|text|border|shadow|placeholder|ring|rounded)+/,
      variants: [
        'sm', 'md', 'lg'
      ]
    }
  ]

It would be interesting to hear from other users if they are experiencing this as well, especially on Apple M processors, or with similar Ram.

I do not experience the same error on an Intel based iMac with 32 GB of Ram. Most of the articles around that Node error mention the cause being usually a memory leak in the js run by node.

[thecrypticace]

@damianofusco I'm on an M series processor. Though I have 64GB of RAM in my machine — not 8GB.

…and just leave the pattern regex,

My point was that the regex itself is too permissive and causes the generation of a large number of rules because bg, text, border, placeholder , and ring match utilities for every color and every opacity. About a 14x increase. Neither Safari nor Chrome can handle this many classes in a stylesheet without slowing down a good bit.

What is the intent your after with this regex specifically? Are you wanting all colors available for dev tools reasons? Or something else?

… JavaScript heap out of memory

This means that Node could not allocate enough memory because it's past its max limit — or there isn't enough available. Given that macOS utilizes virtual memory the second option isn't really possible. It's common for this to happen when there's a memory leak because of memory growth over time. But that is not the only reason it can happen. It can also happen because there just isn't enough memory that can be allocated for the operation or operations in question.

[damianof]

Gotcha. Just to be clear, my issue is in Node to just run the application, not on the browser at all.
I am going to try to find an older Intel Mac with only 8GB RAM and see if it happens there too, just for curiosity. Unfortunately besides this new MacBook Air, all the other machines I have around are at least 32GB.

[thecrypticace]

Yeah if you can get by not generating so many utilities you should be fine in such a tight memory budget — it's just the large amount will cause lots of issues (as you've experienced).

With 8GB everything on the machine probably has ~4–6GB of RAM that can be split among all the applications as the system reserves some memory for itself (technically the kernel and drivers). From the error it looks like it was trying to allocate roughly up to 2GB of RAM but couldn't (or was using 2GB but couldn't allocate any more).

Would you mind posting the error / trace you get when you get the error with just 2–3 patterns in the regex and no variants? I'd be surprised that it was using that much memory for that.

[damianof]

This is how I solved it for now:

const safeListPatterns = ['text', 'border', 'shadow', 'placeholder', 'ring', 'rounded']
const safeListVariants = [
  'sm', 'md', 'lg',
  'hover', 'focus', 
  'sm:hover', 'md:hover', 'lg:hover'
]

module.exports = {
  plugins: [],
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  safelist: [
    {
      pattern: /^(bg)+/
    },
    ...safeListPatterns.flatMap(p => safeListVariants.map(v => `${ p }-${ v }`))
  ]
}

[damianof]

@thecrypticace The full error displayed in the terminal after many seconds waiting for the application to start, is the same as here https://github.com/damianof/tailwind-config-memory-issue/blob/main/node-error.txt