Support ESM and TS config files (#137)

* add failing tests

* fix loading esm/ts configs

* Update ESM/TS support

---------

Co-authored-by: Brad Cornes <hello@bradley.dev>

package.json

@@ -21,6 +21,7 @@
     "build": "npm run _esbuild -- --minify",
     "predev": "npm run _pre",
     "dev": "npm run _esbuild -- --watch",
+    "pretest": "node scripts/install-fixture-deps.js",
     "test": "jest",
     "prepublishOnly": "npm run build && npm test && node scripts/copy-licenses.js",
     "format": "prettier \"src/**/*.js\" \"scripts/**/*.js\" \"tests/test.js\" --write --print-width 100 --single-quote --no-semi --plugin-search-dir ./tests"
@@ -33,10 +34,10 @@
     "@shufo/prettier-plugin-blade": "^1.8.4",
     "@tailwindcss/line-clamp": "^0.3.0",
     "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "clear-module": "^4.1.2",
     "cpy-cli": "^3.1.1",
     "esbuild": "^0.14.11",
     "escalade": "^3.1.1",
-    "import-fresh": "^3.3.0",
     "import-from": "^4.0.0",
     "import-sort-style-module": "^6.0.0",
     "jest": "^27.4.7",
@@ -57,7 +58,7 @@
     "recast": "^0.20.5",
     "rimraf": "^3.0.2",
     "svelte": "^3.55.0",
-    "tailwindcss": "^3.0.23"
+    "tailwindcss": "^3.3.0"
   },
   "peerDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "*",

scripts/install-fixture-deps.js

@@ -0,0 +1,12 @@
+const fs = require('fs')
+const path = require('path')
+const { execSync } = require('child_process')
+
+let fixturesDir = path.resolve(__dirname, '../tests/fixtures')
+let fixtures = fs.readdirSync(fixturesDir).map((name) => path.join(fixturesDir, name))
+
+for (let fixture of fixtures) {
+  if (fs.existsSync(path.join(fixture, 'package.json'))) {
+    execSync('npm install', { cwd: fixture })
+  }
+}

src/index.js

@@ -11,15 +11,16 @@ import prettierParserTypescript from 'prettier/parser-typescript'
 import { createContext as createContextFallback } from 'tailwindcss/lib/lib/setupContextUtils'
 import { generateRules as generateRulesFallback } from 'tailwindcss/lib/lib/generateRules'
 import resolveConfigFallback from 'tailwindcss/resolveConfig'
+import loadConfigFallback from 'tailwindcss/loadConfig'
 import * as recast from 'recast'
 import * as astTypes from 'ast-types'
 import * as path from 'path'
 import requireFrom from 'import-from'
-import requireFresh from 'import-fresh'
 import objectHash from 'object-hash'
 import lineColumn from 'line-column'
 import jsesc from 'jsesc'
 import escalade from 'escalade/sync'
+import clearModule from 'clear-module'
 
 let base = getBasePlugins()
 
@@ -148,20 +149,36 @@ function createParser(parserFormat, transform) {
       let resolveConfig = resolveConfigFallback
       let createContext = createContextFallback
       let generateRules = generateRulesFallback
+      let loadConfig = loadConfigFallback
 
       let baseDir
       let prettierConfigPath = prettier.resolveConfigFile.sync(options.filepath)
 
       if (options.tailwindConfig) {
         baseDir = prettierConfigPath ? path.dirname(prettierConfigPath) : process.cwd()
-        tailwindConfigPath = path.resolve(baseDir, options.tailwindConfig)
-        tailwindConfig = requireFresh(tailwindConfigPath)
       } else {
         baseDir = prettierConfigPath
           ? path.dirname(prettierConfigPath)
           : options.filepath
           ? path.dirname(options.filepath)
           : process.cwd()
+      }
+
+      try {
+        resolveConfig = requireFrom(baseDir, 'tailwindcss/resolveConfig')
+        createContext = requireFrom(baseDir, 'tailwindcss/lib/lib/setupContextUtils').createContext
+        generateRules = requireFrom(baseDir, 'tailwindcss/lib/lib/generateRules').generateRules
+
+        // Prior to `tailwindcss@3.3.0` this won't exist so we load it last
+        loadConfig = requireFrom(baseDir, 'tailwindcss/loadConfig')
+      } catch {}
+
+      if (options.tailwindConfig) {
+        tailwindConfigPath = path.resolve(baseDir, options.tailwindConfig)
+        clearModule(tailwindConfigPath)
+        const loadedConfig = loadConfig(tailwindConfigPath)
+        tailwindConfig = loadedConfig.default ?? loadedConfig
+      } else {
         let configPath
         try {
           configPath = escalade(baseDir, (_dir, names) => {
@@ -171,20 +188,22 @@ function createParser(parserFormat, transform) {
             if (names.includes('tailwind.config.cjs')) {
               return 'tailwind.config.cjs'
             }
+            if (names.includes('tailwind.config.mjs')) {
+              return 'tailwind.config.mjs'
+            }
+            if (names.includes('tailwind.config.ts')) {
+              return 'tailwind.config.ts'
+            }
           })
         } catch {}
         if (configPath) {
           tailwindConfigPath = configPath
-          tailwindConfig = requireFresh(configPath)
+          clearModule(tailwindConfigPath)
+          const loadedConfig = loadConfig(tailwindConfigPath)
+          tailwindConfig = loadedConfig.default ?? loadedConfig
         }
       }
 
-      try {
-        resolveConfig = requireFrom(baseDir, 'tailwindcss/resolveConfig')
-        createContext = requireFrom(baseDir, 'tailwindcss/lib/lib/setupContextUtils').createContext
-        generateRules = requireFrom(baseDir, 'tailwindcss/lib/lib/generateRules').generateRules
-      } catch {}
-
       // suppress "empty content" warning
       tailwindConfig.content = ['no-op']
 

tests/fixtures/esm-explicit/config.mjs

@@ -0,0 +1,9 @@
+export default {
+  theme: {
+    extend: {
+      colors: {
+        hotpink: "hotpink",
+      },
+    },
+  },
+};

tests/fixtures/esm-explicit/index.html

@@ -0,0 +1 @@
+<div class="sm:bg-hotpink bg-red-500"></div>

tests/fixtures/esm-explicit/prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  tailwindConfig: './config.mjs'
+};

tests/fixtures/esm/index.html

@@ -0,0 +1 @@
+<div class="sm:bg-hotpink bg-red-500"></div>

tests/fixtures/esm/prettier.config.js

@@ -0,0 +1 @@
+module.exports = {};

tests/fixtures/esm/tailwind.config.mjs

@@ -0,0 +1,9 @@
+export default {
+  theme: {
+    extend: {
+      colors: {
+        hotpink: "hotpink",
+      },
+    },
+  },
+};

tests/fixtures/ts-explicit/config.ts

@@ -0,0 +1,12 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["index.html"],
+  theme: {
+    extend: {
+      colors: {
+        hotpink: "hotpink",
+      },
+    },
+  },
+} satisfies Config;

tests/fixtures/ts-explicit/index.html

@@ -0,0 +1 @@
+<div class="sm:bg-hotpink bg-red-500"></div>

tests/fixtures/ts-explicit/prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  tailwindConfig: './config.ts'
+};

tests/fixtures/ts/index.html

@@ -0,0 +1 @@
+<div class="sm:bg-hotpink bg-red-500"></div>

tests/fixtures/ts/prettier.config.js

@@ -0,0 +1 @@
+module.exports = {};

tests/fixtures/ts/tailwind.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["index.html"],
+  theme: {
+    extend: {
+      colors: {
+        hotpink: "hotpink",
+      },
+    },
+  },
+} satisfies Config;

tests/fixtures/v3-2/index.html

@@ -0,0 +1 @@
+<div class="sm:bg-tomato bg-red-500"></div>