[feat] add support for custom CLI cache path

packages/cli/__tests__/__mocks__/src/components/button.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+'use strict';
+
+import * as stylex from '@stylexjs/stylex';
+import otherStyles from './otherStyles';
+import npmStyles from './npmStyles';
+import "../stylex_bundle.css";
+const fadeAnimation = "xgnty7z-B";
+const styles = {
+  foo: {
+    animationName: "xeuoslp",
+    display: "x78zum5",
+    marginInlineStart: "x1hm9lzh",
+    marginLeft: null,
+    marginRight: null,
+    marginTop: "xlrshdv",
+    height: "x1egiwwb",
+    ":hover_background": "x1oz5o6v",
+    ":hover_backgroundAttachment": null,
+    ":hover_backgroundClip": null,
+    ":hover_backgroundColor": null,
+    ":hover_backgroundImage": null,
+    ":hover_backgroundOrigin": null,
+    ":hover_backgroundPosition": null,
+    ":hover_backgroundPositionX": null,
+    ":hover_backgroundPositionY": null,
+    ":hover_backgroundRepeat": null,
+    ":hover_backgroundSize": null,
+    $$css: true
+  }
+};
+export default function Button() {
+  return stylex.props(otherStyles.bar, styles.foo, npmStyles.baz).className;
+}

packages/cli/__tests__/__mocks__/src/index.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+'use strict';
+
+import * as stylex from '@stylexjs/stylex';
+import otherStyles from './otherStyles';
+import npmStyles from './npmStyles';
+import "./stylex_bundle.css";
+const fadeAnimation = "xgnty7z-B";
+const styles = {
+  foo: {
+    animationName: "xeuoslp",
+    display: "x78zum5",
+    marginInlineStart: "x1hm9lzh",
+    marginLeft: null,
+    marginRight: null,
+    marginTop: "xlrshdv",
+    height: "x1egiwwb",
+    ":hover_background": "x1oz5o6v",
+    ":hover_backgroundAttachment": null,
+    ":hover_backgroundClip": null,
+    ":hover_backgroundColor": null,
+    ":hover_backgroundImage": null,
+    ":hover_backgroundOrigin": null,
+    ":hover_backgroundPosition": null,
+    ":hover_backgroundPositionX": null,
+    ":hover_backgroundPositionY": null,
+    ":hover_backgroundRepeat": null,
+    ":hover_backgroundSize": null,
+    $$css: true
+  }
+};
+export default function App() {
+  return stylex.props(otherStyles.bar, styles.foo, npmStyles.baz).className;
+}

packages/cli/__tests__/__mocks__/src/nonjs.txt

@@ -0,0 +1 @@
+This is not a javascript file, it should not have changed as a result of compiling the folder

packages/cli/__tests__/__mocks__/src/pages/home.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+'use strict';
+
+import * as stylex from '@stylexjs/stylex';
+import otherStyles from './otherStyles';
+import npmStyles from './npmStyles';
+import "../stylex_bundle.css";
+const fadeAnimation = "xgnty7z-B";
+const styles = {
+  foo: {
+    animationName: "xeuoslp",
+    display: "x78zum5",
+    marginInlineStart: "x1hm9lzh",
+    marginLeft: null,
+    marginRight: null,
+    marginTop: "xlrshdv",
+    height: "x1egiwwb",
+    ":hover_background": "x1oz5o6v",
+    ":hover_backgroundAttachment": null,
+    ":hover_backgroundClip": null,
+    ":hover_backgroundColor": null,
+    ":hover_backgroundImage": null,
+    ":hover_backgroundOrigin": null,
+    ":hover_backgroundPosition": null,
+    ":hover_backgroundPositionX": null,
+    ":hover_backgroundPositionY": null,
+    ":hover_backgroundRepeat": null,
+    ":hover_backgroundSize": null,
+    $$css: true
+  }
+};
+export default function Home() {
+  return stylex.props(otherStyles.bar, styles.foo, npmStyles.baz).className;
+}

packages/cli/__tests__/__mocks__/src/stylex_bundle.css

@@ -0,0 +1,7 @@
+@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}
+.x1oz5o6v:hover:not(#\#){background:red}
+.xeuoslp:not(#\#):not(#\#){animation-name:xgnty7z-B}
+.x78zum5:not(#\#):not(#\#){display:flex}
+.x1hm9lzh:not(#\#):not(#\#){margin-inline-start:10px}
+.x1egiwwb:not(#\#):not(#\#):not(#\#){height:500px}
+.xlrshdv:not(#\#):not(#\#):not(#\#){margin-top:99px}

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

@@ -77,7 +77,7 @@ describe('compiling __mocks__/source to __mocks__/src correctly such that it mat
   });
 
   test(config.output, async () => {
-    fs.mkdirSync(config.output);
+    fs.mkdirSync(config.output, { recursive: true });
     expect(isDir(config.output)).toBe(true);
     await compileDirectory(config);
     const outputDir = fs.readdirSync(config.output, { recursive: true });
@@ -283,3 +283,60 @@ describe('cache mechanism works as expected', () => {
     writeSpy.mockRestore();
   });
 });
+
+describe('CLI works with a custom cache path', () => {
+  const customCachePath = path.join(__dirname, '__custom_cache__');
+  const config: TransformConfig = {
+    input: path.resolve('./source'),
+    output: path.resolve('./src'),
+    styleXBundleName: 'stylex_bundle.css',
+    modules_EXPERIMENTAL: [] as Array<string>,
+    watch: false,
+    babelPresets: [],
+    cachePath: customCachePath,
+    state: {
+      compiledCSSDir: null,
+      compiledNodeModuleDir: null,
+      compiledJS: new Map(),
+      styleXRules: new Map(),
+      copiedNodeModules: false,
+    },
+  };
+  config.cachePath = customCachePath;
+
+  beforeEach(() => {
+    // Clear custom cache directory before each test
+    if (fs.existsSync(customCachePath)) {
+      fs.rmSync(customCachePath, { recursive: true, force: true });
+    }
+  });
+
+  afterAll(() => {
+    // Cleanup: Remove the custom cache directory after all tests
+    if (fs.existsSync(customCachePath)) {
+      fs.rmSync(customCachePath, { recursive: true, force: true });
+    }
+  });
+
+  test('uses the custom cache path for caching', async () => {
+    fs.mkdirSync(config.input, { recursive: true });
+    fs.mkdirSync(config.output, { recursive: true });
+
+    await compileDirectory(config);
+
+    const customFilePath = path.join(config.input, 'index.js');
+
+    const cacheFilePath = path.join(
+      customCachePath,
+      path.relative(config.input, customFilePath) + '.json',
+    );
+
+    expect(fs.existsSync(customCachePath)).toBe(true);
+    expect(fs.existsSync(cacheFilePath)).toBe(true);
+
+    const cacheData = JSON.parse(fs.readFileSync(cacheFilePath, 'utf-8'));
+    expect(cacheData).toHaveProperty('inputHash');
+    expect(cacheData).toHaveProperty('outputHash');
+    expect(cacheData).toHaveProperty('collectedCSS');
+  });
+});

packages/cli/src/config.js

@@ -31,6 +31,7 @@ export type TransformConfig = {
   ...CliConfig,
   input: string,
   output: string,
+  cachePath?: string,
   state: {
     compiledCSSDir: ?string,
     compiledNodeModuleDir: ?string,

packages/cli/src/transform.js

@@ -100,7 +100,7 @@ export async function compileFile(
 ): Promise<?string> {
   const inputFilePath = path.join(config.input, filePath);
   const outputFilePath = path.join(config.output, filePath);
-  const cachePath = getDefaultCachePath();
+  const cachePath = config.cachePath || getDefaultCachePath();
 
   const inputHash = await computeHash(inputFilePath);
   let oldOutputHash = null;