Fix resolution of paths that contain a # (#1225)

Fixes #1221

Author: thecrypticace

packages/tailwindcss-language-server/src/resolver/index.ts

@@ -196,7 +196,7 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
     id = normalizeYarnPnPDriveLetter(id)
     base = normalizeYarnPnPDriveLetter(base)
 
-    return new Promise((resolve, reject) => {
+    let result = await new Promise<string | false>((resolve, reject) => {
       resolver.resolve({}, base, id, {}, (err, res) => {
         if (err) {
           reject(err)
@@ -205,6 +205,21 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
         }
       })
     })
+
+    if (!result) return false
+
+    // The `enhanced-resolve` package supports resolving paths with fragment
+    // identifiers. For example, it can resolve `foo/bar#baz` to `foo/bar.js`
+    // However, it's also possible that a path contains a `#` character as part
+    // of the path itself. For example, `foo#bar` might point to a file named
+    // `foo#bar.js`. The resolver distinguishes between these two cases by
+    // escaping the `#` character with a NUL byte when it's part of the path.
+    //
+    // Since the real path doesn't actually contain NUL bytes, we need to remove
+    // them to get the correct path otherwise readFileSync will throw an error.
+    result = result.replace(/\0(.)/g, '$1')
+
+    return result
   }
 
   async function resolveJsId(id: string, base: string): Promise<string> {

packages/tailwindcss-language-server/tests/env/v4.test.js

@@ -618,3 +618,111 @@ defineTest({
     })
   },
 })
+
+defineTest({
+  name: 'Plugins with a `#` in the name are loadable',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+      @plugin './a#b.js';
+    `,
+    'a#b.js': js`
+      export default function ({ addUtilities }) {
+        addUtilities({
+          '.example': {
+            color: 'red',
+          },
+        })
+      }
+    `,
+  },
+  prepare: async ({ root }) => ({ c: await init(root) }),
+  handle: async ({ c }) => {
+    let document = await c.openDocument({
+      lang: 'html',
+      text: '<div class="example">',
+    })
+
+    // <div class="example">
+    //             ^
+    let hover = await c.sendRequest(HoverRequest.type, {
+      textDocument: document,
+      position: { line: 0, character: 13 },
+    })
+
+    expect(hover).toEqual({
+      contents: {
+        language: 'css',
+        value: dedent`
+          .example {
+            color: red;
+          }
+        `,
+      },
+      range: {
+        start: { line: 0, character: 12 },
+        end: { line: 0, character: 19 },
+      },
+    })
+  },
+})
+
+defineTest({
+  name: 'v3: Presets with a `#` in the name are loadable',
+  fs: {
+    'package.json': json`
+      {
+        "dependencies": {
+          "tailwindcss": "3.4.17"
+        }
+      }
+    `,
+    'tailwind.config.js': js`
+      module.exports = {
+        presets: [require('./a#b.js').default]
+      }
+    `,
+    'a#b.js': js`
+      export default {
+        plugins: [
+          function ({ addUtilities }) {
+            addUtilities({
+              '.example': {
+                color: 'red',
+              },
+            })
+          }
+        ]
+      }
+    `,
+  },
+  prepare: async ({ root }) => ({ c: await init(root) }),
+  handle: async ({ c }) => {
+    let document = await c.openDocument({
+      lang: 'html',
+      text: '<div class="example">',
+    })
+
+    // <div class="example">
+    //             ^
+    let hover = await c.sendRequest(HoverRequest.type, {
+      textDocument: document,
+      position: { line: 0, character: 13 },
+    })
+
+    expect(hover).toEqual({
+      contents: {
+        language: 'css',
+        value: dedent`
+          .example {
+            color: red;
+          }
+        `,
+      },
+      range: {
+        start: { line: 0, character: 12 },
+        end: { line: 0, character: 19 },
+      },
+    })
+  },
+})

packages/vscode-tailwindcss/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Prerelease
 
 - LSP: Declare capability for handling workspace folder change notifications ([#1223](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1223))
+- Don't throw when resolving paths containing a `#` character ([#1225](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1225))
 
 ## 0.14.6