feat: cache invalidation on .babelrc update

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

@@ -261,6 +261,10 @@ describe('cache mechanism works as expected', () => {
 
   beforeAll(async () => {
     await fs.rm(cachePath, { recursive: true, force: true });
+    await fs.writeFile(
+      path.join(process.cwd(), '.babelrc'),
+      JSON.stringify({ presets: ['@babel/preset-env'] }, null, 2),
+    );
   });
 
   beforeEach(() => {
@@ -274,6 +278,7 @@ describe('cache mechanism works as expected', () => {
   afterAll(async () => {
     await fs.rm(config.output, { recursive: true, force: true });
     await fs.rm(cachePath, { recursive: true, force: true });
+    await fs.rm(path.join(process.cwd(), '.babelrc'));
   });
 
   test('first compilation populates the cache', async () => {
@@ -329,6 +334,31 @@ describe('cache mechanism works as expected', () => {
     }
   });
 
+  test('recompiles when babelrc changes', async () => {
+    await fs.writeFile(
+      path.join(process.cwd(), '.babelrc'),
+      JSON.stringify({ presets: ['@babel/preset-react'] }, null, 2),
+    );
+    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

@@ -31,6 +31,23 @@ async function findProjectRoot(startDir = __dirname) {
   throw new Error('Project root not found');
 }
 
+async function findNearestBabelRC(dir) {
+  let currentDir = dir;
+
+  while (currentDir !== path.parse(currentDir).root) {
+    const babelrcPath = path.join(currentDir, '.babelrc');
+    try {
+      await fs.access(babelrcPath);
+      console.log('Found babelrc:', babelrcPath);
+      return babelrcPath;
+    } catch {
+      currentDir = path.dirname(currentDir);
+    }
+  }
+  console.log('Found no babelrc:');
+  return null;
+}
+
 export async function getCacheFilePath(cachePath, filePath) {
   const projectRoot = await findProjectRoot(filePath);
   const absoluteFilePath = path.resolve(filePath);
@@ -74,6 +91,22 @@ export async function deleteCache(cachePath, filePath) {
   }
 }
 
+export async function computeBabelRCHash(path) {
+  const babelPath = await findNearestBabelRC(path);
+  if (!babelPath) {
+    return null; // No .babelrc found
+  }
+
+  try {
+    const fileBuffer = await fs.readFile(babelPath);
+    const fileContent = fileBuffer.toString('utf8');
+    return hash(fileContent);
+  } catch (error) {
+    console.error(`Error reading or hashing file: ${error.message}`);
+    throw error;
+  }
+}
+
 export function computeStyleXConfigHash(config) {
   // Excluding `input` and `output` paths to hash config settings
   const configOptions = Object.fromEntries(

packages/cli/src/transform.js

@@ -29,6 +29,7 @@ import {
   readCache,
   computeFilePathHash,
   computeStyleXConfigHash,
+  computeBabelRCHash,
   getDefaultCachePath,
 } from './cache';
 import {
@@ -110,6 +111,8 @@ export async function compileFile(
   }
 
   const configHash = computeStyleXConfigHash(config);
+  const babelHash = await computeBabelRCHash(inputFilePath);
+  console.log(`[stylex] babelHash: ${babelHash}`);
 
   const cacheData = await readCache(cachePath, filePath);
 
@@ -118,7 +121,8 @@ export async function compileFile(
     cacheData.inputHash === inputHash &&
     oldOutputHash &&
     cacheData.outputHash === oldOutputHash &&
-    cacheData.configHash === configHash
+    cacheData.configHash === configHash &&
+    cacheData.babelHash === babelHash
   ) {
     console.log(`[stylex] Using cached CSS for: ${filePath}`);
     config.state.styleXRules.set(filePath, cacheData.collectedCSS);
@@ -144,6 +148,7 @@ export async function compileFile(
       outputHash: newOutputHash,
       collectedCSS: rules,
       configHash,
+      babelHash,
     });
   }
 }