Skip to content

Commit

Permalink
Types: allow for arbitrary theme values (for 3rd party plugins) (#7926)
Browse files Browse the repository at this point in the history
* allow for arbitrary configuration in the `theme` section

This is useful for third party plugins otherwise you will get an error.

* WIP: `theme()` utility function code completion

This will give you code completion in the `theme()` function. The reason
it is still a WIP is that this only works with the default config right
now and not 100% sure if it is possible to define generics in JSDoc.

The idea would be to:
- Provide types from the default config
- Provide types from the custom config (e.g.: 3rd party plugin)
- Override default config types with the overrides of the user's config

Right now this only provides types for the defaultConfig which might
result in dropping all of this in favor of a much simpler:

```ts
theme<D = any>(path: string, defaultValue: D) => D
```

But this sadly doesn't give you "nice" auto completion. However, the
default might be good enough if we don't error on for example
`theme('customPlugin')` which is currently not the case.

* update changelog

* undo all `theme` types, and type it as `theme(path: string): any`

Since currently we don't want to investigate time to make the code
completion *perfect* (because it might be even impossible to do it
properly due to resolving of overrides, extend and deeply nested presets)

For now we will provide a way simpler type, which is better than
incorrect types. So far we only had types for the default config theme
*only*.
  • Loading branch information
RobinMalfait committed Mar 31, 2022
1 parent 8ba3d61 commit 010f787
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 2 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Expand Up @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fix generation of `div:not(.foo)` if `.foo` is never defined ([#7815](https://github.com/tailwindlabs/tailwindcss/pull/7815))
- Allow for custom properties in `rgb`, `rgba`, `hsl` and `hsla` colors ([#7933](https://github.com/tailwindlabs/tailwindcss/pull/7933))
- Remove autoprefixer as explicit peer-dependency to avoid invalid warnings in situations where it isn't actually needed ([#7949](https://github.com/tailwindlabs/tailwindcss/pull/7949))
- Types: allow for arbitrary theme values (for 3rd party plugins) ([#7926](https://github.com/tailwindlabs/tailwindcss/pull/7926))

### Changed

Expand Down
6 changes: 4 additions & 2 deletions types/config.d.ts
Expand Up @@ -15,7 +15,7 @@ type ResolvableTo<T> = T | ((utils: PluginUtils) => T)

interface PluginUtils {
colors: DefaultColors
theme(path: string, defaultValue: unknown): keyof ThemeConfig
theme(path: string, defaultValue?: unknown): any
breakpoints<I = Record<string, unknown>, O = I>(arg: I): O
rgb(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
hsl(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
Expand Down Expand Up @@ -218,6 +218,9 @@ interface ThemeConfig {
transitionDuration: ResolvableTo<KeyValuePair>
willChange: ResolvableTo<KeyValuePair>
content: ResolvableTo<KeyValuePair>

/** Custom */
[key: string]: any
}

// Core plugins related config
Expand Down Expand Up @@ -320,4 +323,3 @@ interface OptionalConfig {
}

export type Config = RequiredConfig & Partial<OptionalConfig>

0 comments on commit 010f787

Please sign in to comment.