From 868769d7a0c95870345a8af50cafe24352820b89 Mon Sep 17 00:00:00 2001 From: Erlend Seppola Date: Wed, 4 Sep 2024 21:08:01 +0200 Subject: [PATCH] Add support for .mts and .cts config files (#1025) Co-authored-by: Jordan Pittman --- .../tailwindcss-language-server/src/lib/constants.ts | 2 +- .../src/project-locator.test.ts | 10 ++++++++++ .../tests/fixtures/v3/cts-config/tailwind.config.cts | 7 +++++++ .../tests/fixtures/v3/mts-config/tailwind.config.mts | 7 +++++++ packages/vscode-tailwindcss/CHANGELOG.md | 2 +- packages/vscode-tailwindcss/README.md | 6 +++--- 6 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 packages/tailwindcss-language-server/tests/fixtures/v3/cts-config/tailwind.config.cts create mode 100644 packages/tailwindcss-language-server/tests/fixtures/v3/mts-config/tailwind.config.mts diff --git a/packages/tailwindcss-language-server/src/lib/constants.ts b/packages/tailwindcss-language-server/src/lib/constants.ts index 4f9462c6..29d0e641 100644 --- a/packages/tailwindcss-language-server/src/lib/constants.ts +++ b/packages/tailwindcss-language-server/src/lib/constants.ts @@ -1,4 +1,4 @@ export const CONFIG_GLOB = - '{tailwind,tailwind.config,tailwind.*.config,tailwind.config.*}.{js,cjs,ts,mjs}' + '{tailwind,tailwind.config,tailwind.*.config,tailwind.config.*}.{js,cjs,ts,mjs,mts,cts}' export const PACKAGE_LOCK_GLOB = '{package-lock.json,yarn.lock,pnpm-lock.yaml}' export const CSS_GLOB = '*.{css,scss,sass,less,pcss}' diff --git a/packages/tailwindcss-language-server/src/project-locator.test.ts b/packages/tailwindcss-language-server/src/project-locator.test.ts index 7db5f1b1..85a2dbef 100644 --- a/packages/tailwindcss-language-server/src/project-locator.test.ts +++ b/packages/tailwindcss-language-server/src/project-locator.test.ts @@ -86,6 +86,16 @@ testFixture('v3/ts-config', [ { config: 'tailwind.config.ts' }, ]) +testFixture('v3/cts-config', [ + // + { config: 'tailwind.config.cts' }, +]) + +testFixture('v3/mts-config', [ + // + { config: 'tailwind.config.mts' }, +]) + testFixture('v4/basic', [ // { config: 'app.css' }, diff --git a/packages/tailwindcss-language-server/tests/fixtures/v3/cts-config/tailwind.config.cts b/packages/tailwindcss-language-server/tests/fixtures/v3/cts-config/tailwind.config.cts new file mode 100644 index 00000000..12077ba3 --- /dev/null +++ b/packages/tailwindcss-language-server/tests/fixtures/v3/cts-config/tailwind.config.cts @@ -0,0 +1,7 @@ +export default { + theme: { + colors: { cool: 'blue' }, + }, +} satisfies { + theme: Record +} diff --git a/packages/tailwindcss-language-server/tests/fixtures/v3/mts-config/tailwind.config.mts b/packages/tailwindcss-language-server/tests/fixtures/v3/mts-config/tailwind.config.mts new file mode 100644 index 00000000..12077ba3 --- /dev/null +++ b/packages/tailwindcss-language-server/tests/fixtures/v3/mts-config/tailwind.config.mts @@ -0,0 +1,7 @@ +export default { + theme: { + colors: { cool: 'blue' }, + }, +} satisfies { + theme: Record +} diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index bd243738..9a056fc0 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -2,7 +2,7 @@ ## Prerelease -- Nothing yer! +- Add support for `.cts` and `.mts` config files ([#1025](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1025)) ## 0.12.10 diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 59bf2d3a..9b7d626c 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -6,7 +6,7 @@ Tailwind CSS IntelliSense enhances the Tailwind development experience by provid **[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** -In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and a [Tailwind config file](https://tailwindcss.com/docs/installation#create-your-configuration-file) named `tailwind.config.{js,cjs,mjs,ts}` in your workspace. +In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and a [Tailwind config file](https://tailwindcss.com/docs/installation#create-your-configuration-file) named `tailwind.config.{js,cjs,mjs,ts,cts,mts}` in your workspace. ## Features @@ -164,7 +164,7 @@ Enable the Node.js inspector agent for the language server and listen on the spe **Default: `null`** -By default the extension will automatically use the first `tailwind.config.{js,cjs,mjs,ts}` file that it can find to provide Tailwind CSS IntelliSense. Use this setting to manually specify the config file(s) yourself instead. +By default the extension will automatically use the first `tailwind.config.{js,cjs,mjs,ts,cts,mts}` file that it can find to provide Tailwind CSS IntelliSense. Use this setting to manually specify the config file(s) yourself instead. If your project contains a single Tailwind config file you can specify a string value: @@ -185,7 +185,7 @@ For projects with multiple config files use an object where each key is a config If you’re having issues getting the IntelliSense features to activate, there are a few things you can check: -- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.{js,cjs,mjs,ts}`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation#create-your-configuration-file). +- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.{js,cjs,mjs,ts,cts,mts}`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation#create-your-configuration-file). - Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`. - Make sure your VS Code settings aren’t causing your Tailwind config file to be hidden/ignored, for example via the `files.exclude` or `files.watcherExclude` settings. - Take a look at the language server output by running the `Tailwind CSS: Show Output` command from the command palette. This may show errors that are preventing the extension from activating.