3.4.2 introduced breaking change with PR #12715

nodegin commented 7 months ago

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

https://github.com/tailwindlabs/tailwindcss/commit/f2a7c2c4532b76d61351f1ca7e26ec8c93729b5d#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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago