Use tmp file as a touch file (#4650)

* use `~/.cache/tailwindcss` as default touch dir

When more tools catch up with the latest postcss dependency tracking,
then we probably don't even need this anymore. However, it is a good
practice to put (global) caches in ~/.cache and (global) configs in
~/.config

Fixes: #4569

* change test to verify @tailwind base slightly

Because of some changes in tailwind itself, the base selector contains a
ton of new --tw-* custom properties. Keeping this up to date might be a
bit of an annoying challenge. So instead we now check for the selector
to be present.

* add `tmp` package

* use a (simple) temporary file, instead of a full cache dir

integrations/tailwindcss-cli/tests/cli.test.js

@@ -21,16 +21,10 @@ describe('Build command', () => {
     // `-i` is omitted, therefore the default `@tailwind base; @tailwind
     // components; @tailwind utilities` is used. However `preflight` is
     // disabled. I still want to verify that the `base` got included.
-    expect(contents).toIncludeCss(
-      css`
-        *,
-        ::before,
-        ::after {
-          --tw-border-opacity: 1;
-          border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-        }
-      `
-    )
+    expect(contents).toContain('*')
+    expect(contents).toContain('::before')
+    expect(contents).toContain('::after')
+    expect(contents).toContain('--tw-shadow')
 
     // Verify `utilities` output is correct
     expect(contents).toIncludeCss(

package.json

@@ -96,7 +96,8 @@
     "pretty-hrtime": "^1.0.3",
     "quick-lru": "^5.1.1",
     "reduce-css-calc": "^2.1.8",
-    "resolve": "^1.20.0"
+    "resolve": "^1.20.0",
+    "tmp": "^0.2.1"
   },
   "browserslist": [
     "> 1%",

src/jit/lib/setupWatchingContext.js

@@ -1,8 +1,7 @@
 import fs from 'fs'
 import path from 'path'
-import crypto from 'crypto'
-import os from 'os'
 
+import tmp from 'tmp'
 import chokidar from 'chokidar'
 import fastGlob from 'fast-glob'
 import LRU from 'quick-lru'
@@ -14,25 +13,6 @@ import getModuleDependencies from '../../lib/getModuleDependencies'
 import resolveConfig from '../../../resolveConfig'
 import resolveConfigPath from '../../util/resolveConfigPath'
 import { getContext } from './setupContextUtils'
-import { env } from './sharedState'
-
-// Earmarks a directory for our touch files.
-// If the directory already exists we delete any existing touch files,
-// invalidating any caches associated with them.
-let touchDir =
-  env.TAILWIND_TOUCH_DIR || path.join(os.homedir() || os.tmpdir(), '.tailwindcss', 'touch')
-
-if (env.TAILWIND_MODE === 'watch') {
-  if (fs.existsSync(touchDir)) {
-    for (let file of fs.readdirSync(touchDir)) {
-      try {
-        fs.unlinkSync(path.join(touchDir, file))
-      } catch (_err) {}
-    }
-  } else {
-    fs.mkdirSync(touchDir, { recursive: true })
-  }
-}
 
 // This is used to trigger rebuilds. Just updating the timestamp
 // is significantly faster than actually writing to the file (10x).
@@ -89,7 +69,7 @@ function rebootWatcher(context, configPath, configDependencies, candidateFiles)
   let touchFile = getTouchFile(context)
 
   if (touchFile === null) {
-    touchFile = generateTouchFileName()
+    touchFile = tmp.fileSync().name
     setTouchFile(context, touchFile)
     touch(touchFile)
   }
@@ -148,25 +128,6 @@ function rebootWatcher(context, configPath, configDependencies, candidateFiles)
   })
 }
 
-function generateTouchFileName() {
-  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
-  let randomChars = ''
-  let randomCharsLength = 12
-  let bytes = null
-
-  try {
-    bytes = crypto.randomBytes(randomCharsLength)
-  } catch (_error) {
-    bytes = crypto.pseudoRandomBytes(randomCharsLength)
-  }
-
-  for (let i = 0; i < randomCharsLength; i++) {
-    randomChars += chars[bytes[i] % chars.length]
-  }
-
-  return path.join(touchDir, `touch-${process.pid}-${randomChars}`)
-}
-
 let configPathCache = new LRU({ maxSize: 100 })
 
 let configDependenciesCache = new WeakMap()