Feat: Add config option to enable treeshake compensation (#24)

* Feat: Add config option to enable treeshake compensation * Prettier
facebook · Dec 1, 2023 · 32d1d4e · 32d1d4e
1 parent 08f90b8
commit 32d1d4e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js
@@ -30,7 +30,16 @@ function transform(source, opts = options) {
       flow: 'all',
     },
     babelrc: false,
-    plugins: [jsx, [stylexPlugin, opts]],
+    plugins: [
+      jsx,
+      [
+        stylexPlugin,
+        {
+          treeshakeCompensation: true,
+          ...opts,
+        },
+      ],
+    ],
   });
 }
 

diff --git a/packages/babel-plugin/src/utils/evaluate-path.js b/packages/babel-plugin/src/utils/evaluate-path.js
@@ -387,7 +387,10 @@ function _evaluate(path: NodePath<>, state: State): any {
             ? evaluateThemeRef(value, importedName, state)
             : evaluateImportedFile(value, importedName, state);
         if (state.confident) {
-          if (!state.addedImports.has(importPath.node.source.value)) {
+          if (
+            !state.addedImports.has(importPath.node.source.value) &&
+            state.traversalState.treeshakeCompensation
+          ) {
             importPath.insertBefore(
               t.importDeclaration([], importPath.node.source),
             );

diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js
@@ -39,6 +39,7 @@ type ModuleResolution =
 type StyleXOptions = {
   ...RuntimeOptions,
   importSources: Array<string>,
+  treeshakeCompensation?: boolean,
   genConditionalClasses: boolean,
   unstable_moduleResolution: void | ModuleResolution,
   ...
@@ -90,6 +91,7 @@ export default class StateManager {
         (options: $FlowFixMe).styleResolution ?? 'application-order',
       unstable_moduleResolution:
         (options: $FlowFixMe).unstable_moduleResolution ?? undefined,
+      treeshakeCompensation: !!(options: $FlowFixMe).treeshakeCompensation,
     };
     this._state.opts = (opts: $FlowFixMe);
     return this._state.opts;
@@ -135,6 +137,10 @@ export default class StateManager {
     return this.options.definedStylexCSSVariables;
   }
 
+  get treeshakeCompensation(): boolean {
+    return !!this.options.treeshakeCompensation;
+  }
+
   get fileNameForHashing(): null | string {
     const filename = this.filename;
     const themeFileExtension =

diff --git a/packages/open-props/__tests__/open-props-compile-test.js b/packages/open-props/__tests__/open-props-compile-test.js
@@ -25,6 +25,7 @@ function transform(source, opts = {}) {
         stylexPlugin,
         {
           ...opts,
+          treeshakeCompensation: true,
           unstable_moduleResolution: {
             type: 'commonJS',
             rootDir: path.join(__dirname, '../../'),