Fix Tailwind config file resolution when Prettier config file is not present (#62)

* Update config file resolution

* Add "no prettier config" test case

Author: bradlc

package-lock.json

@@ -21,12 +21,14 @@
     "predev": "npm run _pre",
     "dev": "npm run _esbuild -- --watch",
     "test": "jest",
-    "prepublishOnly": "npm run build && npm test && node scripts/copy-licenses.js"
+    "prepublishOnly": "npm run build && npm test && node scripts/copy-licenses.js",
+    "format": "prettier \"src/**/*.js\" \"tests/test.js\" --write --print-width 80 --single-quote --no-semi --plugin-search-dir ./tests"
   },
   "devDependencies": {
     "@tailwindcss/line-clamp": "^0.3.0",
     "cpy-cli": "^3.1.1",
     "esbuild": "^0.14.11",
+    "escalade": "^3.1.1",
     "import-fresh": "^3.3.0",
     "import-from": "^4.0.0",
     "jest": "^27.4.7",

package.json

@@ -12,13 +12,13 @@ import resolveConfigFallback from 'tailwindcss/resolveConfig'
 import * as recast from 'recast'
 import * as astTypes from 'ast-types'
 import * as path from 'path'
-import * as fs from 'fs'
 import requireFrom from 'import-from'
 import requireFresh from 'import-fresh'
 import objectHash from 'object-hash'
 import * as svelte from 'prettier-plugin-svelte'
 import lineColumn from 'line-column'
 import jsesc from 'jsesc'
+import escalade from 'escalade/sync'
 
 let contextMap = new Map()
 
@@ -129,23 +129,35 @@ function createParser(original, transform) {
       let createContext = createContextFallback
       let generateRules = generateRulesFallback
 
+      let baseDir
       let prettierConfigPath = prettier.resolveConfigFile.sync(options.filepath)
-      let baseDir = prettierConfigPath
-        ? path.dirname(prettierConfigPath)
-        : process.env.VSCODE_CWD ?? process.cwd()
 
       if (options.tailwindConfig) {
+        baseDir = prettierConfigPath
+          ? path.dirname(prettierConfigPath)
+          : process.cwd()
         tailwindConfigPath = path.resolve(baseDir, options.tailwindConfig)
         tailwindConfig = requireFresh(tailwindConfigPath)
       } else {
-        let tailwindConfigPathJs = path.resolve(baseDir, 'tailwind.config.js')
-        let tailwindConfigPathCjs = path.resolve(baseDir, 'tailwind.config.cjs')
-        if (fs.existsSync(tailwindConfigPathJs)) {
-          tailwindConfigPath = tailwindConfigPathJs
-          tailwindConfig = requireFresh(tailwindConfigPathJs)
-        } else if (fs.existsSync(tailwindConfigPathCjs)) {
-          tailwindConfigPath = tailwindConfigPathCjs
-          tailwindConfig = requireFresh(tailwindConfigPathCjs)
+        baseDir = prettierConfigPath
+          ? path.dirname(prettierConfigPath)
+          : options.filepath
+          ? path.dirname(options.filepath)
+          : process.cwd()
+        let configPath
+        try {
+          configPath = escalade(baseDir, (_dir, names) => {
+            if (names.includes('tailwind.config.js')) {
+              return 'tailwind.config.js'
+            }
+            if (names.includes('tailwind.config.cjs')) {
+              return 'tailwind.config.cjs'
+            }
+          })
+        } catch {}
+        if (configPath) {
+          tailwindConfigPath = configPath
+          tailwindConfig = requireFresh(configPath)
         }
       }
 

prettier.config.js

@@ -1,3 +1 @@
-module.exports = {
-  plugins: ['../../..'],
-}
+module.exports = {};

src/index.js

@@ -1,3 +1 @@
-module.exports = {
-  plugins: ['../../..'],
-}
+module.exports = {};

tests/fixtures/basic/prettier.config.js

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

tests/fixtures/cjs/prettier.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        tomato: 'tomato',
+      },
+    },
+  },
+}

tests/fixtures/no-prettier-config/index.html

@@ -19,7 +19,14 @@ function format(str, options = {}) {
 function formatFixture(name) {
   let binPath = path.resolve(__dirname, '../node_modules/.bin/prettier')
   let filePath = path.resolve(__dirname, `fixtures/${name}/index.html`)
-  return execSync(`${binPath} ${filePath}`).toString().trim()
+  return execSync(
+    `${binPath} ${filePath} --plugin-search-dir ${__dirname} --plugin ${path.resolve(
+      __dirname,
+      '..'
+    )}`
+  )
+    .toString()
+    .trim()
 }
 
 let yes = '__YES__'
@@ -193,6 +200,12 @@ test('non-tailwind classes', () => {
   ).toEqual('<div class="potato text-sm uppercase sm:lowercase"></div>')
 })
 
+test('no prettier config', () => {
+  expect(formatFixture('no-prettier-config')).toEqual(
+    '<div class="bg-red-500 sm:bg-tomato"></div>'
+  )
+})
+
 test('parasite utilities', () => {
   expect(
     format('<div class="group peer unknown-class p-0 container"></div>')