3.4.2 introduced breaking change with PR #12715

[nodegin]

What version of Tailwind CSS are you using?

3.4.2

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

PostCSS 8.4.35 Vite 5.1.5

What version of Node.js are you using?

v21.6.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Sorry I don't have reproduction as the repo is my company private repo.

Describe your issue

f2a7c2c#diff-e52d7cbb53c2deb88bfe15cfc210a387853cf9f243172b6e2844bb88bc9743a3R115

In this change, a regex replace was added to manipulate the file path.
After some research, I found this regex will try to add backslash to parentheses.

    // Escape special characters in the file path such as: ()[]
    // But only if the special character isn't already escaped
    console.log("filePath before", filePath);
    filePath = filePath.replace(/(?<!\\)([\[\]\(\)])/g, "\\$1");
    console.log("filePath after", filePath);

# console log below
filePath before /Users/user/Desktop/project/apps/web/src/**/*!(*.stories|*.spec).tsx
filePath after /Users/user/Desktop/project/apps/web/src/**/*!\(*.stories|*.spec\).tsx

However this line breaks my entire project, I am getting this error:

By commenting this line, I don't get any warning anymore and my styles can be processed now.

[nodegin]

So it looks the original line is trying to solve the issue with paths that contains parentheses (or bracklets).

However in normal glob pattern, the parentheses is reserved for the OR operation, for example:

./src/**/*!(*.stories|*.spec).{ts,tsx,html}

I think in case user want to support paths with parentheses, they can escape manually by doing like:

./\\(src\\)/**/*!(*.stories|*.spec).{ts,tsx,html}

[thecrypticace]

@nodegin Hey, I've merged a PR that reverts our changes to glob handling. Can you test our insiders build on your project and let me know if that fixes things? If so I'll push out another patch ASAP.

You can install our insiders build by doing the following:

npm install tailwindcss@insiders

[nodegin]

@thecrypticace Thank you for quick response!
I just tested with insiders version and it seem working fine!

Here's my package-lock.json FYI:

[thecrypticace]

Also, as an aside, I'm like 95% sure you can write your above glob as two separate patterns:

content: [
  // This covers all .tsx files
  "./src/**/*.tsx",

  // And excludes any of those that are specs and stories
  "!./src/**/*.{spec,stories}.tsx",
],

Which doesn't use parentheses at all. The leading ! treats a pattern as a negative and files matching any negative are removed.

[thecrypticace]

@thecrypticace Thank you for quick response! I just tested with insiders version and it seem working fine!

Here's my package-lock.json FYI:

Excellent! I'll get a new patch out soon! Thanks for testing!

[nodegin]

@thecrypticace Thanks for the suggestion on using negative approach, I will give it a try.

However if I remember correctly the pattern is come from boilerplate,

also I'm using NX as monorepo so they have a function also using this way:

https://github.com/nrwl/nx/blob/538174237913ad8fceb841a516993776bd21cac8/packages/react/tailwind.ts#L8

[thecrypticace]

Ah okay!

[thecrypticace]

v3.4.3 has been released!