Project discovery should honor .gitignore files

[david-pw]

What version of VS Code are you using?

1.98.2

What version of Tailwind CSS IntelliSense are you using?

0.14.12 (pre-release)

What version of Tailwind CSS are you using?

^4.0.17

What package manager are you using?

npm

What operating system are you using?

Windows 11

Tailwind config

/* Offending Issue is this import - fonts doesn't exist in this folder */
@import "./fonts.css" layer(base);

@import "tailwindcss" prefix(tw);

@plugin 'tailwindcss-animate';

@theme {
   ...
}

VS Code settings

{
  "tailwindCSS.experimental.classRegex": [["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
}

Reproduction URL

N/A

Describe your issue

Just raising to your attention that the latest release of the content detection scans folders that are git-ignored, which can result in intellisense breaking for the entire project.

The error I'm receiving is:

[design\dist\tailwind.css] Initializing...
[Global] Adding watch patterns: D:/my-project/design/dist/tailwind.css
  details: "resolve './fonts.css' in 'd:/my-project/design/dist'\n" +
    '  using description file: d:\\my-project\\package.json (relative path: ./design/dist)\n' +
    '    using description file: d:\\my-project\\package.json (relative path: ./design/dist/fonts.css)\n' +
    '      no extension\n' +
    "        d:\\my-project\\design\\dist\\fonts.css doesn't exist\n" +
    '      .css\n' +
    "        d:\\my-project\\design\\dist\\fonts.css.css doesn't exist\n" +
    '      as directory\n' +
    "        d:\\my-project\\design\\dist\\fonts.css doesn't exist"

My actual tailwind css file is located in D:/my-project/src/styles/tailwind.css, and will resolve the imports correctly.

I'm wondering if the error is handled, potentially the extension could try and find another tailwind file? that way you don't have to consider a gitignore? not sure.

Thanks for your hard work on this extension btw - love it.

[thecrypticace]

I'll have to take a look. I'm not sure if this is Tailwind's fault or the extensions. We weren't using Oxide (Tailwind's content scanning engine) properly in prior releases which I fixed in v0.14.12. We've got some changes coming in v4.1 that's going to make the rules around content scanning simpler but I don't know for sure if it'll fix this.

@david-pw Any chance you can provide a reproduction repo I can quickly test with tomorrow? (or just some instructions on how to create one?)

[david-pw]

@thecrypticace sure - here you go: https://github.com/david-pw/tw-intellisense-issue-1290

[thecrypticace]

@david-pw Is design/tailwind.css meant to be in the .gitignore file in that repo b/c it is not.

[david-pw]

@thecrypticace yes it is, I've just pushed some new changes to better reflect my repo's setup

[thecrypticace]

Okay, if I understand what the problem is that you're having. This didn't "break" in a recent release — it's been this way. (I'm not testing on Windows at the moment but the behavior is supposed to be identical).

The problem here is during what I call "project discovery" where a workspace is scanned for potential stylesheets that represent a project. In this case we discard things using files.exclude and tailwindCSS.files.exclude but not .gitignore (and never did). Generally, this isn't a problem because it only contains compiled CSS and no relative imports. In this case it definitely is a problem.

I think this is something we should let user's configure in settings (like VSCode does for search, explorer, etc…)

[thecrypticace]

A workaround right now would be to change your project settings to something like this:

{
  "tailwindCSS.experimental.classRegex": [["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
  "tailwindCSS.files.exclude": [
    // Defaults
    "**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**",

    // Custom for this project
    "**/dist/**"
  ]
}

Aside: you should be able to drop your classRegex setting and use classFunctions instead:

{
  "tailwindCSS.classFunctions": ["tv"],
  "tailwindCSS.files.exclude": [
    // Defaults
    "**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**",

    // Custom for this project
    "**/dist/**"
  ]
}

If you do lemme know if you happen to run into any problems with it

[david-pw]

Yes, you're right - I just downgraded to v0.14.0 and the issue still persists. I tried your vscode settings suggestion and I'm happy with that solution. Thanks for your help 🙂!

[thecrypticace]

Gonna add this to my todo list to figure out how to make it work because this seems pretty reasonable but I'll put it behind an option (likely defaulted to on).

Note to self: VSCode's ignore file parsing / handling is found here: https://github.com/microsoft/vscode/blob/966a672107ce33bcc65a413f984254bab492a70e/src/vs/workbench/services/search/common/ignoreFile.ts

Probably should base whatever we do off of that so it's consistent.

[EhabY]

If you can write some simple specification then I can take a look, I've worked on something similar at my company so already familiar with this concept. From what I understand, for this to work correctly we need the following:

• Add a setting to honor .gitignore such that ignored files/directories are excluded, similar to tailwindCSS.files.exclude (default is on)
• A way to access ignoreFile.ts or perhaps even implement a simplified version of it with whatever VS Code API allows (hopefully no need to reinvent the wheel)
  • This should be an exact match, so hierarchies of .gitignore files are interpreted correctly
• If something is ignored then we do not even need to traverse the directory so this could have the benefit of having faster project builds