feat(types): use typescript types for config

BREAKING CHANGE: The config to the plugin has been migrated to use tailwind's published typescript types instead of custom types. This shouldn't be major for most people since the types used in this plugin were intentionally a subset of tailwind's types.
RyanClementsHax · Feb 22, 2023 · e54ae58 · e54ae58
1 parent 1d9160d
commit e54ae58
Show file tree

Hide file tree

Showing 7 changed files with 1,171 additions and 1,071 deletions.
diff --git a/package.json b/package.json
@@ -47,39 +47,39 @@
   },
   "dependencies": {
     "color": "^4.1.0",
-    "just-unique": "^4.1.1",
+    "just-unique": "^4.2.0",
     "lodash.merge": "^4.6.2",
     "lodash.mergewith": "^4.6.2"
   },
   "devDependencies": {
     "@types/color": "^3.0.2",
-    "@types/jest": "^29.2.4",
+    "@types/jest": "^29.4.0",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.mergewith": "^4.6.6",
-    "@typescript-eslint/eslint-plugin": "^5.45.1",
-    "@typescript-eslint/parser": "^5.45.1",
-    "commitizen": "^4.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "commitizen": "^4.3.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-config-typescript": "^3.0.0",
-    "eslint-plugin-jest": "^27.1.6",
-    "husky": "^8.0.2",
-    "jest": "^29.3.1",
+    "eslint-plugin-jest": "^27.2.1",
+    "husky": "^8.0.3",
+    "jest": "^29.4.3",
     "jest-mock-extended": "^3.0.1",
-    "jest-watch-typeahead": "^2.2.1",
-    "lint-staged": "^13.1.0",
-    "prettier": "^2.8.0",
-    "semantic-release": "^19.0.5",
-    "stylelint": "^14.16.0",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-recommended-scss": "^8.0.0",
-    "stylelint-config-standard": "^29.0.0",
+    "jest-watch-typeahead": "^2.2.2",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4",
+    "semantic-release": "^20.1.0",
+    "stylelint": "^15.2.0",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended-scss": "^9.0.1",
+    "stylelint-config-standard": "^30.0.1",
     "stylelint-prettier": "^2.0.0",
-    "tailwindcss": "^3.2.4",
-    "ts-jest": "^29.0.3",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.3"
+    "tailwindcss": "^3.2.7",
+    "ts-jest": "^29.0.5",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "tailwindcss": "^3.1.0"

diff --git a/src/config.ts b/src/config.ts
@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-// tailwind doesn't have type definitions so we need to create them on our own until types are added
-
-export type WithExtensions<T, U = any> = T & { [key: string]: T[keyof T] | U }
+import { ResolvableTo, ThemeConfig } from 'tailwindcss/types/config'
 
 export type OpacityCb = ({
   opacityVariable,
@@ -11,30 +9,7 @@ export type OpacityCb = ({
   opacityVariable?: string
   opacityValue?: string
 }) => string
-
-export type ExtensionValue =
-  | string
-  | number
-  | { [key: string]: ExtensionValue }
-  | ExtensionValue[]
-
-export type Theme = (key: string) => any
-export type ThemeCb<T> = ({ theme }: { theme: Theme }) => T
-export type WithThemeCb<T> = T | ThemeCb<T>
-
-export type TailwindExtension = WithExtensions<
-  Partial<{
-    colors?: WithThemeCb<ExtensionValue>
-  }>,
-  WithThemeCb<ExtensionValue>
->
-export type TailwindTheme = WithExtensions<
-  Partial<{
-    colors: WithThemeCb<ExtensionValue>
-    extend: TailwindExtension
-  }>,
-  WithThemeCb<ExtensionValue>
->
-export type TailwindConfig = WithExtensions<{
-  theme: TailwindTheme
-}>
+export type PluginUtils = Parameters<Exclude<ResolvableTo<string>, string>>[0]
+export type Theme = PluginUtils['theme']
+export type ResolutionCallback<T> = (utils: PluginUtils) => T
+export type TailwindExtension = Partial<ThemeConfig>
diff --git a/src/index.spec.ts b/src/index.spec.ts
@@ -112,9 +112,9 @@ describe('multiThemePlugin', () => {
         multiThemePlugin({
           defaultTheme: {
             extend: {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-expect-error
               colors: {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-expect-error
                 primary: ({ theme }: { theme: Theme }) => theme('thing')
               }
             }

diff --git a/src/types/just.shim.d.ts b/src/types/just.shim.d.ts
diff --git a/src/utils/themeUtils.spec.ts b/src/utils/themeUtils.spec.ts
@@ -2,18 +2,18 @@ import {
   resolveThemeExtensionAsCustomProps,
   resolveThemeExtensionsAsTailwindExtension
 } from './themeUtils'
-import { TailwindExtension, ExtensionValue, Theme, ThemeCb } from '../config'
+import { PluginUtils, TailwindExtension, Theme } from '../config'
 import { PluginAPI } from 'tailwindcss/types/config'
 import { mock } from 'jest-mock-extended'
 
 describe('themeUtils', () => {
-  let callbackObj: { theme: Theme }
+  let pluginUtils: PluginUtils
   let opacityConfig: { opacityVariable: string; opacityValue: string }
 
   beforeEach(() => {
-    callbackObj = {
+    pluginUtils = mock<PluginUtils>({
       theme: jest.fn(x => x)
-    }
+    })
     opacityConfig = {
       opacityValue: 'opacityValue',
       opacityVariable: '--opacity-variable'
@@ -51,10 +51,7 @@ describe('themeUtils', () => {
     const extensionWithResolvedThemeCbs = Object.entries(extension).reduce(
       (acc, [key, value]) => ({
         ...acc,
-        [key]:
-          typeof value === 'function'
-            ? (value as ThemeCb<ExtensionValue>)(callbackObj)
-            : value
+        [key]: typeof value === 'function' ? value(pluginUtils) : value
       }),
       {}
     ) as TailwindExtension
@@ -425,18 +422,16 @@ describe('themeUtils', () => {
           {
             name: 'first',
             extend: {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-expect-error
               colors: {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-expect-error
                 primary: null
               }
             }
           },
           {
             name: 'second',
             extend: {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-expect-error
               foo: {
                 secondary: null
               }
@@ -459,18 +454,16 @@ describe('themeUtils', () => {
           {
             name: 'first',
             extend: {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-expect-error
               colors: {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-expect-error
                 secondary: undefined
               }
             }
           },
           {
             name: 'second',
             extend: {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-expect-error
               foo: {
                 secondary: undefined
               }
@@ -503,7 +496,7 @@ describe('themeUtils', () => {
               {
                 name: 'second',
                 extend: {
-                  somethingElse: ({ theme }) => ({
+                  fontFamily: ({ theme }) => ({
                     foo: theme('some.different.key')
                   })
                 }
@@ -514,8 +507,8 @@ describe('themeUtils', () => {
           colors: {
             primary: 'var(--colors-primary)'
           },
-          somethingElse: {
-            foo: 'var(--somethingElse-foo)'
+          fontFamily: {
+            foo: 'var(--fontFamily-foo)'
           }
         })
       })
@@ -642,8 +635,6 @@ describe('themeUtils', () => {
             {
               name: 'second',
               extend: {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                //@ts-expect-error
                 foo: {
                   bar: ({ theme }: { theme: Theme }) => ({
                     primary: theme('some.key')
@@ -821,13 +812,11 @@ describe('themeUtils', () => {
       expect(
         resolveThemeExtensionAsCustomProps(
           {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-expect-error
             colors: {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-expect-error
               primary: null
             },
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-expect-error
             foo: {
               secondary: null
             }
@@ -841,13 +830,11 @@ describe('themeUtils', () => {
       expect(
         resolveThemeExtensionAsCustomProps(
           {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-expect-error
             colors: {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-expect-error
               primary: undefined
             },
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-expect-error
             foo: {
               secondary: undefined
             }
@@ -877,8 +864,6 @@ describe('themeUtils', () => {
         expect(() =>
           resolveThemeExtensionAsCustomProps(
             {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-expect-error
               foo: {
                 bar: ({ theme }: { theme: Theme }) => ({
                   primary: theme('some.key')

diff --git a/src/utils/themeUtils.ts b/src/utils/themeUtils.ts
@@ -6,7 +6,7 @@ import {
   toCustomPropName,
   toCustomPropValue
 } from './customPropUtils'
-import { ThemeCb, TailwindExtension } from '../config'
+import { ResolutionCallback, TailwindExtension } from '../config'
 import { ThemeConfig } from './optionsUtils'
 import { PluginAPI } from 'tailwindcss/types/config'
 
@@ -91,7 +91,10 @@ export const resolveThemeExtensionAsCustomProps = (
  * @return a function that will resolve the theme extension provided by the callback when given the tailwind theme helper
  */
 const toThemeExtensionResolverCallback =
-  <T>(value: ThemeCb<T>, valuePath: string[]): ThemeCb<T> =>
+  <T>(
+    value: ResolutionCallback<T>,
+    valuePath: string[]
+  ): ResolutionCallback<T> =>
   theme => {
     const config = value(theme)
     return resolveThemeExtensionsAsTailwindExtensionRecursionHelper(