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

mmirus · 2020-07-27T21:17:23Z

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:

keeping vscode opened to the project root but downgrading to 0.4.0
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 · 2020-12-01T13:37:44Z

Are you still seeing this issue @mmirus?

mmirus · 2020-12-01T17:11:40Z

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 · 2020-12-01T17:31:59Z

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 · 2020-12-01T18:21:40Z

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 · 2020-12-01T19:24:39Z

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:

mmirus · 2020-12-01T20:17:01Z

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 · 2020-12-01T20:57:17Z

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'
  ]
}```

fixes "extends" in browserslist config

bradlc · 2020-12-02T14:14:38Z

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

mmirus · 2020-12-02T16:25:09Z

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

smoooty · 2020-12-18T20:41:25Z

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

bradlc added a commit that referenced this issue Dec 2, 2020

update browserslist usage (#159)

f62a5e9

fixes "extends" in browserslist config

mmirus closed this as completed Dec 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mmirus commented Jul 27, 2020 •

edited

Loading

bradlc commented Dec 1, 2020

mmirus commented Dec 1, 2020

bradlc commented Dec 1, 2020

mmirus commented Dec 1, 2020 •

edited

Loading

bradlc commented Dec 1, 2020

mmirus commented Dec 1, 2020 •

edited

Loading

palicko commented Dec 1, 2020

bradlc commented Dec 2, 2020

mmirus commented Dec 2, 2020

smoooty commented Dec 18, 2020

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

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

Comments

mmirus commented Jul 27, 2020 • edited Loading

bradlc commented Dec 1, 2020

mmirus commented Dec 1, 2020

bradlc commented Dec 1, 2020

mmirus commented Dec 1, 2020 • edited Loading

bradlc commented Dec 1, 2020

mmirus commented Dec 1, 2020 • edited Loading

palicko commented Dec 1, 2020

bradlc commented Dec 2, 2020

mmirus commented Dec 2, 2020

smoooty commented Dec 18, 2020

mmirus commented Jul 27, 2020 •

edited

Loading

mmirus commented Dec 1, 2020 •

edited

Loading

mmirus commented Dec 1, 2020 •

edited

Loading