error TS2322 with exactOptionalPropertyTypes enabled

[montchr]

What version of @tailwindcss/container-queries are you using?

v0.1.1

What version of Node.js are you using?

v18.16.1

What browser are you using?

n/a

What operating system are you using?

macOS

Reproduction repository

https://github.com/montchr/tailwind-container-queries-types-repro

Describe your issue

With this tsconfig.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["tailwind.config.ts"],
  "exclude": ["node_modules"]
}

And this tailwind.config.ts:

import ContainerQueriesPlugin from '@tailwindcss/container-queries'
import type {Config} from 'tailwindcss'

export default {
  plugins: [ContainerQueriesPlugin],
} satisfies Config

I get the following TypeScript error when attempting to load this plugin:

tailwind.config.ts:5:13 - error TS2322: Type '{ handler: PluginCreator; config?: Partial<Config> | undefined; }' is not assignable to type 'PluginCreator | { handler: PluginCreator; config?: Partial<Config>; } | { (options: any): { handler: PluginCreator; config?: Partial<...>; }; __isOptionsFunction: true; } | undefined'.
  Type '{ handler: PluginCreator; config?: Partial<Config> | undefined; }' is not assignable to type '{ handler: PluginCreator; config?: Partial<Config>; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'config' are incompatible.
      Type 'Partial<Config> | undefined' is not assignable to type 'Partial<Config>'.
        Type 'undefined' is not assignable to type 'Partial<Config>'.

5   plugins: [ContainerQueriesPlugin],
              ~~~~~~~~~~~~~~~~~~~~~~

When I disable exactOptionalPropertyTypes there is no error.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

Enabling that extractOptionalPropertyTypes compiler options changes the underlying types and makes type checks more strict. If this is a property that you have to use, then you can use a workaround by casting the plugin itself. If this is something you don't have to use, then I would drop the check entirely.

Internally in Tailwind we do allow to set config: undefined which is not allowed when enabling this compiler option if the config is typed as config?: Config.

For a workaround, you can use something like this:

import ContainerQueriesPlugin from '@tailwindcss/container-queries'
import type {Config} from 'tailwindcss'
import {PluginCreator} from 'tailwindcss/types/config'

export default {
  content: [],
  plugins: [ContainerQueriesPlugin as {
    handler: PluginCreator,
    config?: Partial<Config>
  }],
} satisfies Config

Hope this helps!

[montchr]

Thanks for your detailed response! I did end up disabling the option already. My approach to "strict mode" was basically along the lines of flipping all of the switches on and seeing how long it would take until that level of strictness became unmaintainable.