Fix loading of ESM and TypeScript configs

packages/tailwindcss-language-server/src/project-locator.test.ts

@@ -57,6 +57,18 @@ testFixture('multi-config-content', [
   { config: 'tailwind.config.two.js' },
 ])
 
+
+testFixture('v3/esm-config', [
+  //
+  { config: 'tailwind.config.mjs' },
+])
+
+testFixture('v3/ts-config', [
+  //
+  { config: 'tailwind.config.ts' },
+])
+
+
 testFixture('v4/basic', [
   //
   { config: 'app.css' },

packages/tailwindcss-language-server/src/project-locator.ts

@@ -347,7 +347,19 @@ async function* contentSelectorsFromJsConfig(
   features: Feature[],
   actualConfig?: any,
 ): AsyncIterable<DocumentSelector> {
-  let config = actualConfig ?? require(entry.path)
+  let config: any
+
+  // This is wrapped in a try catch because a user might be using an ESM- or TypeScript-based config
+  // and we don't want to stop the project from loading just because of that. We'll recover the list
+  // of document selectors later in the loading process when initializing the project by using
+  // Tailwind's `loadConfig` API. Ideally the configuration loading is either NOT done here or
+  // all of it is done here. But that's a much larger refactor.
+  try {
+    config = actualConfig ?? require(entry.path)
+  } catch {
+    return
+  }
+
   let files: unknown = config.content?.files ?? config.content
   let content: (string | {})[] = Array.isArray(files) ? files : []
 

packages/tailwindcss-language-server/tests/fixtures/v3/esm-config/tailwind.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  theme: {
+    colors: { cool: 'blue' },
+  },
+}

packages/tailwindcss-language-server/tests/fixtures/v3/ts-config/tailwind.config.ts

@@ -0,0 +1,7 @@
+export default {
+  theme: {
+    colors: { cool: 'blue' }
+  }
+} satisfies {
+  theme: Record<string, any>
+}