fix: add cache invalidation on config change (#871)

Author: mellyeliu

packages/cli/__tests__/compile-stylex-folder-test.js

@@ -290,6 +290,7 @@ describe('cache mechanism works as expected', () => {
       expect(cacheContent).toHaveProperty('inputHash');
       expect(cacheContent).toHaveProperty('outputHash');
       expect(cacheContent).toHaveProperty('collectedCSS');
+      expect(cacheContent).toHaveProperty('configHash');
     }
   });
 
@@ -301,6 +302,28 @@ describe('cache mechanism works as expected', () => {
     writeSpy.mockRestore();
   });
 
+  test('recompiles when config changes', async () => {
+    config.styleXBundleName = 'stylex_bundle_new.css';
+    await compileDirectory(config);
+
+    // Ensure cache is rewritten due to cache invalidation
+    expect(writeSpy).toHaveBeenCalledTimes(3);
+
+    const cacheFiles = await fs.readdir(cachePath);
+    expect(cacheFiles.length).toEqual(3);
+
+    for (const cacheFile of cacheFiles) {
+      const cacheFilePath = path.join(cachePath, cacheFile);
+      const cacheContent = JSON.parse(
+        await fs.readFile(cacheFilePath, 'utf-8'),
+      );
+      expect(cacheContent).toHaveProperty('inputHash');
+      expect(cacheContent).toHaveProperty('outputHash');
+      expect(cacheContent).toHaveProperty('collectedCSS');
+      expect(cacheContent).toHaveProperty('configHash');
+    }
+  });
+
   test('recompiles when input changes', async () => {
     const mockFilePath = path.join(config.input, 'index.js');
     const mockFileOutputPath = path.join(config.output, 'index.js');

packages/cli/src/cache.js

@@ -57,7 +57,23 @@ export async function deleteCache(cachePath, filePath) {
   }
 }
 
-export async function computeHash(filePath) {
+export function computeStyleXConfigHash(config) {
+  // Excluding `input` and `output` paths to hash config settings
+  const configOptions = Object.fromEntries(
+    Object.entries(config).filter(
+      ([key]) => key !== 'input' && key !== 'output',
+    ),
+  );
+
+  const jsonRepresentation = JSON.stringify(
+    configOptions,
+    Object.keys(configOptions).sort(),
+  );
+
+  return hash(jsonRepresentation);
+}
+
+export async function computeFilePathHash(filePath) {
   const absoluteFilePath = path.resolve(filePath);
   const parsedFile = path.parse(absoluteFilePath);
 

packages/cli/src/transform.js

@@ -27,7 +27,8 @@ import fs from 'fs';
 import {
   writeCache,
   readCache,
-  computeHash,
+  computeFilePathHash,
+  computeStyleXConfigHash,
   getDefaultCachePath,
 } from './cache';
 import {
@@ -102,19 +103,22 @@ export async function compileFile(
   const outputFilePath = path.join(config.output, filePath);
   const cachePath = config.cachePath || getDefaultCachePath();
 
-  const inputHash = await computeHash(inputFilePath);
+  const inputHash = await computeFilePathHash(inputFilePath);
   let oldOutputHash = null;
   if (fs.existsSync(outputFilePath)) {
-    oldOutputHash = await computeHash(outputFilePath);
+    oldOutputHash = await computeFilePathHash(outputFilePath);
   }
 
+  const configHash = computeStyleXConfigHash(config);
+
   const cacheData = await readCache(cachePath, filePath);
 
   if (
     cacheData &&
     cacheData.inputHash === inputHash &&
     oldOutputHash &&
-    cacheData.outputHash === oldOutputHash
+    cacheData.outputHash === oldOutputHash &&
+    cacheData.configHash === configHash
   ) {
     console.log(`[stylex] Using cached CSS for: ${filePath}`);
     config.state.styleXRules.set(filePath, cacheData.collectedCSS);
@@ -133,12 +137,13 @@ export async function compileFile(
 
     writeCompiledJS(outputFilePath, code);
 
-    const newOutputHash = await computeHash(outputFilePath);
+    const newOutputHash = await computeFilePathHash(outputFilePath);
 
     await writeCache(cachePath, filePath, {
       inputHash,
       outputHash: newOutputHash,
       collectedCSS: rules,
+      configHash,
     });
   }
 }