Invalidate context when main css changes (#7626)

* Invalidate context when CSS changes

* Remove invalidation count check

* Add sass integration test

* Update changelog

src/lib/cacheInvalidation.js

@@ -0,0 +1,52 @@
+import crypto from 'crypto'
+import * as sharedState from './sharedState'
+
+/**
+ * Calculate the hash of a string.
+ *
+ * This doesn't need to be cryptographically secure or
+ * anything like that since it's used only to detect
+ * when the CSS changes to invalidate the context.
+ *
+ * This is wrapped in a try/catch because it's really dependent
+ * on how Node itself is build and the environment and OpenSSL
+ * version / build that is installed on the user's machine.
+ *
+ * Based on the environment this can just outright fail.
+ *
+ * See https://github.com/nodejs/node/issues/40455
+ *
+ * @param {string} str
+ */
+function getHash(str) {
+  try {
+    return crypto.createHash('md5').update(str, 'utf-8').digest('binary')
+  } catch (err) {
+    return ''
+  }
+}
+
+/**
+ * Determine if the CSS tree is different from the
+ * previous version for the given `sourcePath`.
+ *
+ * @param {string} sourcePath
+ * @param {import('postcss').Node} root
+ */
+export function hasContentChanged(sourcePath, root) {
+  let css = root.toString()
+
+  // We only care about files with @tailwind directives
+  // Other files use an existing context
+  if (!css.includes('@tailwind')) {
+    return false
+  }
+
+  let existingHash = sharedState.sourceHashMap.get(sourcePath)
+  let rootHash = getHash(css)
+  let didChange = existingHash !== rootHash
+
+  sharedState.sourceHashMap.set(sourcePath, rootHash)
+
+  return didChange
+}

src/lib/setupContextUtils.js

@@ -20,6 +20,7 @@ import log from '../util/log'
 import negateValue from '../util/negateValue'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
 import { generateRules } from './generateRules'
+import { hasContentChanged } from './cacheInvalidation.js'
 
 function prefix(context, selector) {
   let prefix = context.tailwindConfig.prefix
@@ -822,6 +823,8 @@ export function getContext(
     existingContext = context
   }
 
+  let cssDidChange = hasContentChanged(sourcePath, root)
+
   // If there's already a context in the cache and we don't need to
   // reset the context, return the cached context.
   if (existingContext) {
@@ -829,7 +832,7 @@ export function getContext(
       [...contextDependencies],
       getFileModifiedMap(existingContext)
     )
-    if (!contextDependenciesChanged) {
+    if (!contextDependenciesChanged && !cssDidChange) {
       return [existingContext, false]
     }
   }

src/lib/sharedState.js

@@ -5,6 +5,7 @@ export const env = {
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
+export const sourceHashMap = new Map()
 export const NOT_ON_DEMAND = new String('*')
 
 export function resolveDebug(debug) {