Tailwind runs out of memory in v3.2.3+ with duplicate selectors in a layer

[nd9600]

What version of Tailwind CSS are you using?
v3.2.3

What build tool are you using?
Gulp v2.3.0, postcss v8.4.21

What version of Node.js are you using?
v14.21.2

What browser are you using?
N/A

What operating system are you using?
Linux

Reproduction URL
https://play.tailwindcss.com/brgSOna4ng

Describe your issue

Tailwind runs out of memory and crashes when I put this in one of my CSS files (I duplicate selectors to increase their specificity):

@layer utilities {
    .underline.underline {
        text-decoration-line: underline;
    }
}

then put <div class="hover:underline"></div> in a HTML file,.

This is what Gulp reports:

<--- Last few GCs --->

[2769643:0x6027f90]     2895 ms: Scavenge 718.1 (757.1) -> 718.1 (757.1) MB, 38.8 / 0.0 ms  (average mu = 0.942, current mu = 0.915) allocation failure 
[2769643:0x6027f90]     3357 ms: Scavenge 1100.6 (1139.7) -> 1100.6 (1139.7) MB, 64.0 / 0.0 ms  (average mu = 0.942, current mu = 0.915) allocation failure 
[2769643:0x6027f90]     4494 ms: Mark-sweep 1674.4 (1713.5) -> 627.0 (664.4) MB, 531.0 / 0.0 ms  (average mu = 0.809, current mu = 0.748) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory
 1: 0xa3ac30 node::Abort() [gulp designSystem]
 2: 0x970199 node::FatalError(char const*, char const*) [gulp designSystem]
 3: 0xbba76e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [gulp designSystem]
 4: 0xbbaae7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [gulp designSystem]
 5: 0xd76d05  [gulp designSystem]
 6: 0xd4f535  [gulp designSystem]
 7: 0xed921e  [gulp designSystem]
 8: 0xed936d  [gulp designSystem]
 9: 0x1077923 v8::internal::Runtime_GrowArrayElements(int, unsigned long*, v8::internal::Isolate*) [gulp designSystem]
10: 0x14491d9  [gulp designSystem]
Aborted (core dumped)

I think it is because of #9765, specifically this line - if I change line #72 in my node_modules to be } else if (a.type === 'class' && b.type === 'pseudo' && b.value !== ':merge') { again, Tailwind doesn't crash.

[adamwathan]

Hey! We can probably fix this either way but can you share an example of something you’d actually want to do in a real project that looks like this?

[nd9600]

Hi Adam, thanks for replying so quickly.

That snippet is an example of something we actually use in a project, I just made it as small as possible for a reproducable example.
We have old CSS files that have too high specificity, like

a:link, a:visited
{
    color: #3384B9;
    text-decoration: none;
}

a:hover
{
    color: #27668F;
    text-decoration: underline;
}

and then, to override their specificity, as recommended in these CSS Guidelines, we chain classes together with themselves so their specificity is increased without introducing location dependency (there are other examples than just these 2):

.ftb-btn.ftb-btn {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.underline.underline {
    text-decoration-line: underline;
}

We put the .underline utility into a @layer utilities so that Tailwind adds hover states, responsive variants, etc (.ftb-btn is a component, and not in a layer).

If you would like to see our HTML:

<div>
    <textarea
        ref="textarea"
        v-model="templateContentDisplayWrapper"
        :class="{
            invalid: isContentEmpty
        }"
        :maxlength="maximumCharacters"
        class="w-full p-3 textarea"
        placeholder="Enter a message here"
        required
    >
    </textarea>

    <div class="flex justify-end">
        <button
            class="ftb-btn ftb-btn--flat border-0 text-base text-blue-dark cursor-pointer hover:underline"
            type="button"
            @click="templateContent = ''"
        >
            Clear
        </button>
    </div>
    <slot name="slotBelowTextarea"></slot>
</div>

and our CSS

@charset "utf-8";

@layer utilities {
    /*------------------------------------*\
      #TAILWIND-OVERRIDES
      we want to override our too-specific rules like a:hover {text-decoration: underline;} - these are the same as
      Tailwind's utilities, just more specific
    \*------------------------------------*/
    
    .underline.underline {
        text-decoration-line: underline;
    }
    .overline.overline {
        text-decoration-line: overline;
    }
    .line-through.line-through {
        text-decoration-line: line-through;
    }
    .no-underline.no-underline {
        text-decoration-line: none;
    }
}

[thecrypticace]

Hey! I've merged the fix for this in #10397. It'll be available in our next release but you can also test it using our insiders build: npm install tailwindcss@insiders which should be updated in a few minutes. Thanks again for reporting this! ✨

[nd9600]

Thanks for fixing it so quickly!