Add support for tailwind config files in ESM/TS format + Update prettier

package.json

@@ -118,12 +118,11 @@
     "eslint-plugin-unicorn": "^44.0.2",
     "glob-all": "^3.3.0",
     "husky": "4.3.8",
-    "import-fresh": "^3.3.0",
     "jest": "^29.2.2",
     "lint-staged": "^13.0.3",
     "microbundle": "^0.15.1",
     "nodemon": "^2.0.20",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.7",
     "react": "^18.2.0",
     "string-similarity": "^4.0.4",
     "styled-components": "^5.3.6",

src/core/lib/configHelpers.ts

@@ -1,7 +1,6 @@
 import { resolve, dirname } from 'path'
 import { existsSync } from 'fs'
 import escalade from 'escalade/sync'
-import requireFresh from 'import-fresh'
 import { configTwinValidators, configDefaultsTwin } from './twinConfig'
 import defaultTwinConfig from './defaultTailwindConfig'
 import { resolveTailwindConfig, getAllConfigs } from './util/twImports'
@@ -15,6 +14,7 @@ import type {
   Assert,
   AssertContext,
 } from 'core/types'
+import loadConfig from 'tailwindcss/loadConfig'
 
 type Validator = [(value: unknown) => boolean, string]
 
@@ -76,7 +76,7 @@ function getTailwindConfig({
 
   const configs = [
     // User config
-    ...(configExists ? getAllConfigs(requireFresh(configPath as string)) : []),
+    ...(configExists ? getAllConfigs(loadConfig(configPath as string)) : []),
     // Default config
     ...getAllConfigs(defaultTwinConfig),
   ]

tests/__fixtures__/config/tailwind.config.js → tests/__fixtures__/config/tailwind.config.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { Config } from 'tailwindcss'
+
+export default {
   theme: {
     animation: {
       'zoom-.5': 'zoom-.5 2s',
@@ -50,4 +52,4 @@ module.exports = {
       customFontWeightAsNumber: 800,
     },
   },
-}
+} satisfies Config

tests/plugin.test.js

@@ -30,6 +30,11 @@ pluginTester({
           ) && {
             config: path.join(path.dirname(file), 'tailwind.config.js'),
           }),
+          ...(fs.existsSync(
+            path.join(path.dirname(file), 'tailwind.config.ts')
+          ) && {
+            config: path.join(path.dirname(file), 'tailwind.config.ts'),
+          }),
           ...(fs.existsSync(configFile(file)) &&
             JSON.parse(fs.readFileSync(configFile(file), 'utf8'))),
         },

types/tests/__fixtures__/config/tailwind.config.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+  theme: {
+    animation: {
+      'zoom-.5': string
+    }
+    colors: {
+      number: number
+      purple: string
+      'purple-hyphen': string
+      mycolors: {
+        DEFAULT: string
+        'a-purple': string
+        'a-number': number
+      }
+      'my-blue': {
+        100: string
+      }
+      'color-opacity': ({ opacityVariable }: { opacityVariable: any }) => string
+      color: {
+        deep: {
+          config: {
+            500: string
+          }
+        }
+      }
+      blue: {
+        DEFAULT: string
+        gray: {
+          200: string
+        }
+      }
+      'blue-gray': {
+        DEFAULT: string
+        200: string
+      }
+      'blue-gray-green': {
+        DEFAULT: string
+        200: string
+        'deep-dish': {
+          DEFAULT: string
+          200: string
+        }
+      }
+      'blue-gray-green-pink': string
+    }
+    fontWeight: {
+      customFontWeightAsString: string
+      customFontWeightAsNumber: number
+    }
+  }
+}
+export default _default