"JavaScript heap out of memory" problems with PostCSS 7 compatibility build

• Node version: 12.20.0
• NPM version: 6.14.8

I’m upgrading a Vue 2 SPA from tailwindcss 1.4.6 to 2.0. Because of the PostCSS plugin tailwindcss requires PostCSS 8. error I’m trying to use PostCSS 7 compatibility build ("tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"). But this version somehow causes OOM errors while building the app.

Compilation gets really slow at around 66% and it crashes at random vendor files.

Report 1

68% building 1423/1448 modules 25 active /projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/core-js/internals/number-parse-int.js
<--- Last few GCs --->

[46476:0x36ffe40]   128027 ms: Scavenge 2018.7 (2044.6) -> 2009.1 (2045.1) MB, 5.5 / 0.0 ms  (average mu = 0.378, current mu = 0.507) allocation failure 
[46476:0x36ffe40]   128050 ms: Scavenge 2019.6 (2045.1) -> 2009.9 (2046.3) MB, 5.4 / 0.0 ms  (average mu = 0.378, current mu = 0.507) allocation failure 
[46476:0x36ffe40]   128077 ms: Scavenge 2020.4 (2046.3) -> 2011.3 (2055.8) MB, 6.3 / 0.0 ms  (average mu = 0.378, current mu = 0.507) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1409219]
Security context: 0x3237200808d1 <JSObject>
    1: hasPromises(aka hasPromises) [0x1ad84b4dd8f1] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss-functions/dist/lib/helpers.js:~13] [pc=0x156946016760](this=0x02489c5c04b1 <undefined>,0x1dcca55116b1 <JSArray[1]>)
    2: transformValue(aka transformValue) [0x138b35f5c8c1] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss-functions/dist/li...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa17c40 node::Abort() [node]
 2: 0xa1804c node::OnFatalError(char const*, char const*) [node]
 3: 0xb95a7e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb95df9 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd53075  [node]
 6: 0xd53706 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd5ffc5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd60e75 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd6251f v8::internal::Heap::HandleGCRequest() [node]
10: 0xd10f85 v8::internal::StackGuard::HandleInterrupts() [node]
11: 0x106c5c6 v8::internal::Runtime_StackGuard(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x1409219  [node]
Aborted (core dumped)

Report 2

69% building 1431/1454 modules 23 active /projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/core-js/internals/number-is-finite.js
<--- Last few GCs --->

[47804:0x3687e40]   125747 ms: Scavenge 2034.7 (2050.7) -> 2032.7 (2051.2) MB, 6.1 / 0.0 ms  (average mu = 0.218, current mu = 0.226) allocation failure 
[47804:0x3687e40]   125770 ms: Scavenge 2034.9 (2051.2) -> 2033.4 (2051.7) MB, 9.8 / 0.0 ms  (average mu = 0.218, current mu = 0.226) allocation failure 
[47804:0x3687e40]   125784 ms: Scavenge 2036.5 (2052.2) -> 2034.8 (2060.0) MB, 6.0 / 0.0 ms  (average mu = 0.218, current mu = 0.226) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1409219]
Security context: 0x0d9c5db408d1 <JSObject>
    1: decl [0x15da80f63e9] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss/lib/stringifier.js:~46] [pc=0x1932bddae6e9](this=0x386477080159 <Stringifier map = 0x39833f572529>,0x3c0398def181 <Declaration map = 0x1f27d8b26599>,0x01fc985c0639 <true>)
    2: rule [0x15da80f6429] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss/lib/stringifier.j...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa17c40 node::Abort() [node]
 2: 0xa1804c node::OnFatalError(char const*, char const*) [node]
 3: 0xb95a7e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb95df9 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd53075  [node]
 6: 0xd53706 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd5ffc5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd60e75 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd6251f v8::internal::Heap::HandleGCRequest() [node]
10: 0xd10f85 v8::internal::StackGuard::HandleInterrupts() [node]
11: 0x106c5c6 v8::internal::Runtime_StackGuard(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x1409219  [node]
Aborted (core dumped)

Report 3

68% building 1396/1421 modules 25 active /projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js
<--- Last few GCs --->

[122815:0x3d88fc0]   124493 ms: Scavenge 2038.6 (2049.4) -> 2038.5 (2050.4) MB, 5.1 / 0.0 ms  (average mu = 0.176, current mu = 0.067) allocation failure 
[122815:0x3d88fc0]   124500 ms: Scavenge 2039.1 (2050.4) -> 2039.0 (2050.4) MB, 5.3 / 0.0 ms  (average mu = 0.176, current mu = 0.067) allocation failure 
[122815:0x3d88fc0]   124506 ms: Scavenge 2039.4 (2050.4) -> 2039.3 (2051.1) MB, 5.1 / 0.0 ms  (average mu = 0.176, current mu = 0.067) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1409d59]
    1: StubFrame [pc: 0x1472718]
Security context: 0x3e57bdb408d1 <JSObject>
    2: /* anonymous */(aka /* anonymous */) [0x36eaf0b501b1] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:121] [bytecode=0x3f058753b5a1 offset=11](this=0x3db550c804b1 <undefined>,0x03b5993f9e19 <String[#4]: p-10>,0)
    3: forEach [0x3e57bdb56769](this=0x07953314a1b9...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa18150 node::Abort() [node]
 2: 0xa1855c node::OnFatalError(char const*, char const*) [node]
 3: 0xb965be v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb96939 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd53bb5  [node]
 6: 0xd54246 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd60b05 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd619b5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd6446c v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
10: 0xd2ae8b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
11: 0x106d45e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x1409d59  [node]
Aborted (core dumped)

I tried to disable some components & webpack at least was able to finish compilation process without crashing.

The app is relatively large (112 Vue SFCs) but even if number of components can cause such crashes, I have no idea why it was working with previous versions of tailwindcs.

I suspect that this might be related to that compatibility build because with PostCSS 8 there’re no OOM errors & it doesn’t slow down at ~66%. Also it seems that previous version (1.4.6) was also running on PostCSS 7 and compliation process didn’t have such issues.

Repoduction repo

I wasn’t able to reproduce this bug in small codebases. Also this is a private project, so I can’t share sources with everyone but if someone wants to look into it and/or knows how to debug memory allocation crashes, I can add collaborator to private repository here on Github.

[kiily]

I can also confirm I still have the issue on tailwind 2.0.2. Will try to reproduce the problem in a simpler way, but simply building tailwind shoots my memory up for 1GB. Are there any bad practices in the usage of the library that could be causing this?

[AlexVipond]

@tzurbaev When I had a similar error, the root cause was an endless loop when postcss tried to apply a class recursively.

The simplified version of my original code:

.italic {
  @apply italic;
}

My workaround was to simply use CSS instead of @apply:

.italic {
  font-style: italic;
}

In my case, I was designing a code syntax theme, and the .italic class was used by a third-party syntax highlighting library (refractor + rehype, processing markdown files to highlight syntax), which is why I didn’t catch it right away. Definitely worth checking your code to see if something similar might be happening.