[v4] `@import` not following `style` specifier in `exports`

[aaronadamsCA]

What version of VS Code are you using?

v1.87.2

What version of Tailwind CSS IntelliSense are you using?

v0.11.54 (pre-release)

What version of Tailwind CSS are you using?

4.0.0-alpha.10

What package manager are you using?

pnpm

What operating system are you using?

Ubuntu

Tailwind config

@import "tailwindcss";

@theme {
  --color-foo: #f00;
}

VS Code settings

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "npm.packageManager": "pnpm",
  "tailwindCSS.experimental.configFile": {
    "./apps/app-1/app/tailwind.css": "./apps/app-1/app/**/*",
    "./apps/app-2/app/tailwind.css": "./apps/app-2/app/**/*",
    "./packages/ui-1/src/tailwind.css": "./packages/ui-1/src/**/*",
    "./packages/ui-2/src/tailwind.css": "./packages/ui-2/src/**/*"
  }
}

Reproduction URL

https://github.com/aaronadamsCA/tailwindcss-intellisense-issue-933

Describe your issue

If I import like this:

@import "@monorepo/ui";

From a package like this:

{
  "name": "@monorepo/ui",
  "type": "module",
  "exports": {
    ".": {
      "style": "./src/tailwind.css"
    }
  }
}

Tailwind resolves the import, but this extension does not.

If I change the import to this:

@import "@monorepo/ui/src/tailwind.css";

OR if I change the package to this:

{
  "name": "@monorepo/ui",
  "type": "module",
  "style": "./src/tailwind.css"
}

Both Tailwind and the extension can resolve the import.

I think this extension should be able to resolve all of the same imports as Tailwind.

Thanks! Really appreciate the v4 support, always a great extension 🙌

[adamwathan]

Hey! A reproduction would actually help a lot with this one if you have one 👍🏻

[aaronadamsCA]

Fair enough! Here you go:

https://github.com/aaronadamsCA/tailwindcss-intellisense-issue-933

This monorepo contains two Remix Vite apps. Tailwind works properly in both, but IntelliSense only works in one. The only difference is the way the child package exposes its stylesheet.

It took me a while to figure out what was broken! Thankfully it was easy enough to work around once I figured it out.

[thecrypticace]

This is happening because postcss-import uses the resolve package to find out where an import resolves to and that package doesn't support the exports or imports fields yet. Afaik, this is one of the reasons Vite has to override resolution for postcss-import and looks like we'll have to do the same in Intellisense.

[thecrypticace]

An updated pre-release that fixes this should be out shortly (~10 minutes — possibly less).