search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.81k stars 190 forks source link

0.4.1 broke class suggestions when TW config not in project root #159

Closed mmirus closed 3 years ago

mmirus commented 4 years ago

It seems like 0.4.1 broke class suggestions for me when my Tailwind config file is not in the workspace root.

My config is in a subfolder within the project, and previously the extension suggested class names without any trouble. This stopped working recently, and I found today that I can fix the problem by doing either of the following:

  1. keeping vscode opened to the project root but downgrading to 0.4.0
  2. directly opening vscode in the subfolder that contains the tailwind config (on 0.4.1)

Happy to provide any additional info that would be helpful or do testing/troubleshooting for you!

Thanks!

Version: 1.47.3 Commit: 91899dcef7b8110878ea59626991a18c8a6a1b3e Date: 2020-07-23T15:51:39.791Z Electron: 7.3.2 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Linux x64 5.4.53-1-MANJARO

bradlc commented 3 years ago

Are you still seeing this issue @mmirus?

mmirus commented 3 years ago

Thanks for following up, @bradlc! Unfortunately, yes, still hitting this. Please let me know if I can help test things / provide additional information, and I'll do my best to give you a hand!

bradlc commented 3 years ago

Are you able to share the repository of a project where this is happening? If not please could you let me know which package manager you are using, and if possible a summary of how your project is structured, in particular the location of node_modules and your Tailwind config file

mmirus commented 3 years ago

I can't share the repository, unfortunately. Here's a cleaned up version of the folder structure with some notes. In reality there are way, way more folders and files--but the path down to the TW config, node_modules, etc., is accurate.

. 😢 if I open vscode here at the root, class name suggestions do not work
├── ...various top-level folders
└── site
    ├── ...various sub folders
    └── web
        |── ...various sub folders
        └── app
            ├── ...various sub folders
            └── plugins
                ├── ...various sub folders
                └── dashboard (🥳 if I open vscode to this folder, class name suggestions work)
                    ├── ...various sub folders
                    ├── dist
                    ├── node_modules ℹ️
                    ├── scripts
                    |-- src
                    |   ├── components
                    |   │   └── 👉 commonly would be using TW in here, in React components
                    |   ├── hooks
                    |   ├── reducers
                    |   ├── scss
                    |   │   └── 👉 also sometimes using TW in here, via @apply
                    |   |-- utils
                    |   └── tailwind.css ℹ️ this is where we include `@tailwind base;` and such
                    ├── vendor ℹ️ compiled TW css file goes here
                    ├── package-lock.json
                    ├── package.json
                    ├── tailwind.config.js ℹ️
                    ├── webpack.config.js
                    ├── webpack.dev.js
                    └── webpack.profile.js

Edit: Oh, and using npm for package management!

bradlc commented 3 years ago

Thanks for that! I tried to reproduce with no luck. I have added some basic logging to the new release (v0.5.3). If you get chance please could you reload your project and take a look in the server log? You can find this in the Output panel (View: Toggle Output in the command palette). Make sure to select tailwindcss-intellisense in the dropdown:

image

mmirus commented 3 years ago

Ooooh, that gives some output that looks like it will be helpful--thank you!

Failed to initialise: Error: Invariant failed: No Tailwind CSS config found.
    at t.default (/home/mmirus/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js:38:20657)
    at n (/home/mmirus/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js:13:91525)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async Module.U (/home/mmirus/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js:13:93613)
Found Tailwind config file: /myprojectroot/site/web/app/plugins/dashboard/tailwind.config.js
Found tailwindcss v1.4.6: /myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss
Failed to initialise: Error: Cannot find module '@wordpress/browserslist-config'
Require stack:
- /myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/node.js
- /myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/index.js
- /myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/lib/util/processPlugins.js
- /myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/lib/processTailwindFeatures.js
- /myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/lib/index.js
- /home/mmirus/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:844:17)
    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
    at Object.loadQueries (/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/node.js:158:35)
    at Function.select (/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/index.js:1096:26)
    at /myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/index.js:336:33
    at Array.reduce (<anonymous>)
    at resolve (/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/index.js:318:18)
    at browserslist (/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/index.js:443:21)
    at n (/home/mmirus/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js:13:92837)
    at processTicksAndRejections (internal/process/task_queues.js:94:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/node.js',
    '/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/node_modules/browserslist/index.js',
    '/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/lib/util/processPlugins.js',
    '/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/lib/processTailwindFeatures.js',
    '/myprojectroot/site/web/app/plugins/dashboard/node_modules/tailwindcss/lib/index.js',
    '/home/mmirus/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js'
  ]
}

(I think that first failure right at the top showed up b/c the editor opened to a file that was outside the area that has TW; after that, I believe the output is from when I switched to a file inside the area with TW.)

In our package.json we have:

"browserslist": [
  "extends @wordpress/browserslist-config"
],

And under devDependencies:

"@wordpress/browserslist-config": "^2.6.0",

I have verified that node_modules/@wordpress/browserslist-config exists.

When I open the dashboard folder directly, here's the output:

Found Tailwind config file: /myprojectroot/site/web/app/plugins/oncarrot-admin-v2/tailwind.config.js
Found tailwindcss v1.4.6: /myprojectroot/site/web/app/plugins/oncarrot-admin-v2/node_modules/tailwindcss
Initialised successfully.

Finally, when I change browserslist to this in package.json:

"browserslist": [
  "defaults"
],

The extension initializes successfully when vscode is opened from the project root.

So it seems like maybe either tailwind itself or the vscode extension has trouble finding @wordpress/browserslist-config when node_modules is not in the root of the project?

palicko commented 3 years ago

Hey guys, I have the same problem and @mmirus solution with defaults works for me as well. This is what my log looks like


Found Tailwind config file: /Users/palicko/localhost/sage10/web/app/themes/test/tailwind.config.js
Found tailwindcss v2.0.1: /Users/palicko/localhost/sage10/web/app/themes/test/node_modules/tailwindcss
Failed to initialise: Error: Cannot find module '@wordpress/browserslist-config'
Require stack:
- /Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/node.js
- /Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/index.js
- /Users/palicko/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:844:17)
    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
    at Object.loadQueries (/Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/node.js:161:35)
    at Function.select (/Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/index.js:1111:26)
    at /Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/index.js:336:33
    at Array.reduce (<anonymous>)
    at resolve (/Users/palicko/localhost/sage10/web/app/test/node_modules/browserslist/index.js:318:18)
    at browserslist (/Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/index.js:443:21)
    at n (/Users/palicko/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js:13:92837)
    at processTicksAndRejections (internal/process/task_queues.js:94:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/node.js',
    '/Users/palicko/localhost/sage10/web/app/themes/test/node_modules/browserslist/index.js',
    '/Users/palicko/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.3/dist/server/index.js'
  ]
}```
bradlc commented 3 years ago

Thanks for that @mmirus and @palicko! Super useful. This should be fixed now in v0.5.4 of the extension 👍

mmirus commented 3 years ago

Working for me now with 0.5.4! Thank you, @bradlc! Really appreciate your work on this.

smoooty commented 3 years ago

I'm seeing the issue ('...No Tailwind CSS config found') when my tailwind.config is in a directory with a . prefix, ie a directory called /tailwind works, but not one called /.tailwind