Repository: microsoft/griffel
Pull request #315 (2023-01-10 16:19:14)

chore(webpack-extraction-plugin): refactor to support aliased imports
This PR refactors Babel plugin that replace functions and extracts CSS in `@griffel/webpack-extraction-plugin`. The goal is to use references from imports instead of hardcoded names (`__resetStyles` & `__styles`).

The refactor is needed as we will use transforms from Linaria itself (#309) instead of ours. `@linaria/babel-preset` uses `@babel/helper-module-imports` to generate imports that don't collide in the scope (_which is better_):

```js
// Before
import { __css } from '@griffel/react';
// After
import { __css as _css } from '@griffel/react';
import { __css as _css2 } from '@griffel/react';
```

Internally the plugin is almost the same, but now it takes references via `path.scope.getBinding()` instead of trying to target hardcoded identifiers directly. This allows to be compatible with upcoming changes.

- New fixture (`babel/alias/code.ts`) was added to verify the behavior
- Plugin uses `@babel/helper-module-imports` to emit imports, fixtures have been updated


Patch:
diff --git a/change/@griffel-webpack-extraction-plugin-f9a0e45f-28d4-4e43-99e9-7783f2eace29.json b/change/@griffel-webpack-extraction-plugin-f9a0e45f-28d4-4e43-99e9-7783f2eace29.json
new file mode 100644
index 0000000..4383856
--- /dev/null
+++ b/change/@griffel-webpack-extraction-plugin-f9a0e45f-28d4-4e43-99e9-7783f2eace29.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support aliased imports",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index a1b16a0..b0cf4b8 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
   "dependencies": {
     "@babel/core": "^7.12.13",
     "@babel/generator": "^7.12.13",
+    "@babel/helper-module-imports": "^7.12.13",
     "@babel/helper-plugin-utils": "^7.12.13",
     "@babel/template": "^7.12.13",
     "@babel/traverse": "^7.12.13",
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts
new file mode 100644
index 0000000..44ef1b6
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts
@@ -0,0 +1,11 @@
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
+  {
+    root: {
+      sj55zd: 'fe3e8s9',
+    },
+  },
+  {
+    d: ['.fe3e8s9{color:red;}'],
+  },
+);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts
new file mode 100644
index 0000000..20720d2
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts
@@ -0,0 +1,7 @@
+import { __css as _css } from '@griffel/react';
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _css({
+  root: {
+    sj55zd: 'fe3e8s9',
+  },
+});
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts
index 2a6fcfd..8f76c12 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const styles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const styles = _css({
   root: {
     sj55zd: 'fe3e8s9',
     uwmqm3: ['fycuoez', 'f8wuabp'],
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts
index ebb2ab3..f7fb91a 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts
@@ -1,7 +1,9 @@
-import { __resetStyles, __styles, __resetCSS, __css } from '@griffel/react';
-export const useClasses = __css({
+import { __css as _css } from '@griffel/react';
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles, __styles } from '@griffel/react';
+export const useClasses = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts
index 9669953..74619f9 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts
@@ -1,10 +1,11 @@
-import { __styles, __css } from '@griffel/react';
-export const stylesA = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const stylesA = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const stylesB = __css({
+export const stylesB = _css({
   root: {
     De3pzq: 'fcnqdeg',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts
index d5a616d..5d8ef95 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts
@@ -1,2 +1,3 @@
-import { __resetStyles, __resetCSS } from '@griffel/react';
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles } from '@griffel/react';
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts
index b53ab79..f727873 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const useStyles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const useStyles = _css({
   root: {
     Bcmaq0h: 'fp00rh9',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts
index ac34f90..6d076e4 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const useStyles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const useStyles = _css({
   root: {
     Bcmaq0h: 'fnwsaxv',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
index dd51f76..fd6229b 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
@@ -1,5 +1,6 @@
-import { __styles, __css } from '@griffel/react';
-export const styles = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const styles = _css({
   root: {
     sj55zd: 'fe3e8s9',
     uwmqm3: ['fycuoez', 'f8wuabp'],
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts
index c43ec4d..49a406d 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts
@@ -1,9 +1,11 @@
-import { __resetStyles, __styles, __resetCSS, __css } from '@griffel/react';
-export const useClasses = __css({
+import { __css as _css } from '@griffel/react';
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles, __styles } from '@griffel/react';
+export const useClasses = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
 
-require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.fe3e8s9%7Bcolor%3Ared%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.rjefjbm%7Bcolor%3Ared%3Bpadding-left%3A4px%3B%7D.r7z97ji%7Bcolor%3Ared%3Bpadding-right%3A4px%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
+require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.rjefjbm%7Bcolor%3Ared%3Bpadding-left%3A4px%3B%7D.r7z97ji%7Bcolor%3Ared%3Bpadding-right%3A4px%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.fe3e8s9%7Bcolor%3Ared%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts
index 691b6b6..3155418 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts
@@ -1,10 +1,11 @@
-import { __styles, __css } from '@griffel/react';
-export const stylesA = __css({
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const stylesA = _css({
   root: {
     sj55zd: 'fe3e8s9',
   },
 });
-export const stylesB = __css({
+export const stylesB = _css({
   root: {
     De3pzq: 'fcnqdeg',
   },
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts
index b2c42e3..9ebc58c 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts
@@ -1,4 +1,5 @@
-import { __resetStyles, __resetCSS } from '@griffel/react';
-export const useClassName = __resetCSS('ra9m047', null);
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles } from '@griffel/react';
+export const useClassName = _resetCSS('ra9m047', null);
 
 require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.ra9m047%7Bbackground-image%3Aurl(.%2Fblank.jpg)%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts
index 585a40e..cb2e407 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts
@@ -1,4 +1,5 @@
-import { __resetStyles, __resetCSS } from '@griffel/react';
-export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+import { __resetCSS as _resetCSS } from '@griffel/react';
+import { __resetStyles } from '@griffel/react';
+export const useClassName = _resetCSS('rjefjbm', 'r7z97ji');
 
 require('./code.griffel.css!=!../../../virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Br%5D%20**%2F%0A.rjefjbm%7Bcolor%3Ared%3Bpadding-left%3A4px%3B%7D.r7z97ji%7Bcolor%3Ared%3Bpadding-right%3A4px%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./code.ts');
diff --git a/packages/webpack-extraction-plugin/package.json b/packages/webpack-extraction-plugin/package.json
index ef384f8..be9a609 100644
--- a/packages/webpack-extraction-plugin/package.json
+++ b/packages/webpack-extraction-plugin/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.13",
+    "@babel/helper-module-imports": "^7.12.13",
     "@babel/helper-plugin-utils": "^7.12.13",
     "stylis": "^4.0.13",
     "tslib": "^2.1.0"
diff --git a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
index dc17c87..33a03f1 100644
--- a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
+++ b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts
@@ -1,4 +1,6 @@
 import { NodePath, PluginObj, PluginPass, types as t } from '@babel/core';
+// @ts-expect-error Missing typings
+import { addNamed } from '@babel/helper-module-imports';
 import { declare } from '@babel/helper-plugin-utils';
 import type { CSSRulesByBucket } from '@griffel/core';
 
@@ -24,6 +26,156 @@ function concatCSSRulesByBucket(bucketA: CSSRulesByBucket = {}, bucketB: CSSRule
   return bucketA;
 }
 
+function evaluateAndUpdateArgument(
+  argumentPath: NodePath<t.ObjectExpression> | NodePath<t.ArrayExpression>,
+  functionKind: FunctionKinds,
+  state: StripRuntimeBabelPluginState,
+) {
+  // Returns the styles as a JavaScript object
+  const evaluationResult = argumentPath.evaluate();
+
+  if (!evaluationResult.confident) {
+    throw argumentPath.buildCodeFrameError(
+      [
+        `Failed to evaluate CSS rules from "${functionKind}" call.`,
+        'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+      ].join(' '),
+    );
+  }
+
+  if (functionKind === '__styles') {
+    const cssRulesByBucket = evaluationResult.value as CSSRulesByBucket;
+
+    state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket);
+  } else if (functionKind === '__resetStyles') {
+    const cssRules = evaluationResult.value as NonNullable<CSSRulesByBucket['r']>;
+
+    state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, { r: cssRules });
+  }
+
+  argumentPath.remove();
+}
+
+function getFunctionArgumentPath(
+  callExpressionPath: NodePath<t.CallExpression>,
+  functionKind: FunctionKinds,
+): NodePath<t.ObjectExpression> | NodePath<t.ArrayExpression> | null {
+  const argumentPaths = callExpressionPath.get('arguments');
+
+  if (functionKind === '__styles') {
+    if (argumentPaths.length === 2 && argumentPaths[1].isObjectExpression()) {
+      return argumentPaths[1];
+    }
+  }
+
+  if (functionKind === '__resetStyles') {
+    if (argumentPaths.length === 3 && argumentPaths[2].isArrayExpression()) {
+      return argumentPaths[2];
+    }
+  }
+
+  return null;
+}
+
+function getReferencePaths(
+  specifierPath: NodePath<t.ImportSpecifier>,
+  functionKind: FunctionKinds,
+): NodePath<t.Node>[] {
+  const importedPath = specifierPath.get('imported');
+
+  if (importedPath.isIdentifier({ name: functionKind })) {
+    const localPath = specifierPath.get('local');
+    const programPath = specifierPath.findParent(p => p.isProgram())!;
+
+    const importBinding = programPath.scope.getBinding(localPath.node.name);
+
+    if (importBinding) {
+      return importBinding.referencePaths;
+    }
+  }
+
+  return [];
+}
+
+function inlineAssetImports(argumentPath: NodePath<t.ObjectExpression> | NodePath<t.ArrayExpression>) {
+  argumentPath.traverse({
+    TemplateLiteral(literalPath) {
+      const expressionPaths = literalPath.get('expressions');
+
+      expressionPaths.map(expressionPath => {
+        if (Array.isArray(expressionPath) || !expressionPath.isIdentifier()) {
+          throw literalPath.buildCodeFrameError(
+            [
+              'A template literal with an imported asset should contain an expression statement.',
+              'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+            ].join(' '),
+          );
+        }
+
+        const expressionName = expressionPath.node.name;
+        const expressionBinding = literalPath.scope.getBinding(expressionName);
+
+        if (typeof expressionBinding === 'undefined') {
+          throw expressionPath.buildCodeFrameError(
+            [
+              'Failed to resolve a binding in a scope for an identifier.',
+              'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+            ].join(' '),
+          );
+        }
+
+        const importDeclarationPath = expressionBinding.path.findParent(p =>
+          p.isImportDeclaration(),
+        ) as NodePath<t.ImportDeclaration> | null;
+
+        if (importDeclarationPath === null) {
+          throw expressionBinding.path.buildCodeFrameError(
+            [
+              'Failed to resolve an import for the identifier.',
+              'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
+            ].join(' '),
+          );
+        }
+
+        expressionPath.replaceWith(t.stringLiteral(importDeclarationPath.get('source').node.value));
+        importDeclarationPath.remove();
+      });
+    },
+  });
+}
+
+function updateCalleeName(callExpressionPath: NodePath<t.CallExpression>, importName: string) {
+  const calleePath = callExpressionPath.get('callee');
+
+  calleePath.replaceWith(t.identifier(importName));
+}
+
+function updateReferences(
+  state: StripRuntimeBabelPluginState,
+  importSpecifierPath: NodePath<t.ImportSpecifier>,
+  importSource: string,
+  functionKind: FunctionKinds,
+) {
+  const importName = functionKind === '__styles' ? '__css' : '__resetCSS';
+  const importIdentifier = addNamed(importSpecifierPath, importName, importSource);
+
+  const referencePaths = getReferencePaths(importSpecifierPath, functionKind);
+
+  for (const referencePath of referencePaths) {
+    if (referencePath.parentPath?.isCallExpression()) {
+      const callExpressionPath = referencePath.parentPath;
+      const argumentPath = getFunctionArgumentPath(callExpressionPath, functionKind);
+
+      if (argumentPath) {
+        inlineAssetImports(argumentPath);
+        evaluateAndUpdateArgument(argumentPath, functionKind, state);
+
+        updateCalleeName(callExpressionPath, importIdentifier.name);
+      }
+    }
+  }
+}
+
 export const babelPluginStripGriffelRuntime = declare<
   Partial<StripRuntimeBabelPluginOptions>,
   PluginObj<StripRuntimeBabelPluginState>
@@ -55,144 +207,15 @@ export const babelPluginStripGriffelRuntime = declare<
           path.traverse({
             ImportSpecifier(path) {
               const importedPath = path.get('imported');
-              let functionKind: FunctionKinds;
+
+              const importSourcePath = (path.parentPath as NodePath<t.ImportDeclaration>).get('source');
+              const importSource = importSourcePath.node.value;
 
               if (importedPath.isIdentifier({ name: '__styles' })) {
-                functionKind = '__styles';
+                updateReferences(state, path, importSource, '__styles');
               } else if (importedPath.isIdentifier({ name: '__resetStyles' })) {
-                functionKind = '__resetStyles';
-              } else {
-                return;
+                updateReferences(state, path, importSource, '__resetStyles');
               }
-
-              const declarationPath = path.findParent(p =>
-                p.isImportDeclaration(),
-              ) as NodePath<t.ImportDeclaration> | null;
-
-              if (declarationPath === null) {
-                throw path.buildCodeFrameError(
-                  [
-                    'Failed to find "ImportDeclaration" path for an "ImportSpecifier".',
-                    'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                  ].join(' '),
-                );
-              }
-
-              if (functionKind === '__styles') {
-                declarationPath.pushContainer('specifiers', t.identifier('__css'));
-              }
-
-              if (functionKind === '__resetStyles') {
-                declarationPath.pushContainer('specifiers', t.identifier('__resetCSS'));
-              }
-            },
-
-            /**
-             * Visits all call expressions (__styles function calls):
-             * - replaces "__styles" calls "__css"
-             * - removes CSS rules from "__styles" calls
-             */
-            CallExpression(path) {
-              const calleePath = path.get('callee');
-              const argumentPaths = path.get('arguments');
-
-              let argumentPath: typeof argumentPaths[number];
-              let functionKind: FunctionKinds;
-
-              if (calleePath.isIdentifier({ name: '__styles' })) {
-                argumentPath = argumentPaths[1];
-                functionKind = '__styles';
-
-                calleePath.replaceWith(t.identifier('__css'));
-              } else if (calleePath.isIdentifier({ name: '__resetStyles' })) {
-                argumentPath = argumentPaths[2];
-                functionKind = '__resetStyles';
-
-                calleePath.replaceWith(t.identifier('__resetCSS'));
-              } else {
-                return;
-              }
-
-              if (
-                (functionKind === '__styles' && argumentPaths.length !== 2) ||
-                (functionKind === '__resetStyles' && argumentPaths.length !== 3)
-              ) {
-                throw calleePath.buildCodeFrameError(
-                  [
-                    `"${functionKind}" function call should have exactly ${argumentPaths.length} arguments.`,
-                    'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                  ].join(' '),
-                );
-              }
-
-              argumentPath.traverse({
-                TemplateLiteral(literalPath) {
-                  const expressionPaths = literalPath.get('expressions');
-
-                  expressionPaths.map(expressionPath => {
-                    if (Array.isArray(expressionPath) || !expressionPath.isIdentifier()) {
-                      throw literalPath.buildCodeFrameError(
-                        [
-                          'A template literal with an imported asset should contain an expression statement.',
-                          'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                        ].join(' '),
-                      );
-                    }
-
-                    const expressionName = expressionPath.node.name;
-                    const expressionBinding = literalPath.scope.getBinding(expressionName);
-
-                    if (typeof expressionBinding === 'undefined') {
-                      throw expressionPath.buildCodeFrameError(
-                        [
-                          'Failed to resolve a binding in a scope for an identifier.',
-                          'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                        ].join(' '),
-                      );
-                    }
-
-                    const importDeclarationPath = expressionBinding.path.findParent(p =>
-                      p.isImportDeclaration(),
-                    ) as NodePath<t.ImportDeclaration> | null;
-
-                    if (importDeclarationPath === null) {
-                      throw expressionBinding.path.buildCodeFrameError(
-                        [
-                          'Failed to resolve an import for the identifier.',
-                          'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                        ].join(' '),
-                      );
-                    }
-
-                    expressionPath.replaceWith(t.stringLiteral(importDeclarationPath.get('source').node.value));
-                    importDeclarationPath.remove();
-                  });
-                },
-              });
-
-              // Returns the styles as a JavaScript object
-              const evaluationResult = argumentPath.evaluate();
-
-              if (!evaluationResult.confident) {
-                throw argumentPath.buildCodeFrameError(
-                  [
-                    `Failed to evaluate CSS rules from "${functionKind}" call.`,
-                    'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens',
-                  ].join(' '),
-                );
-              }
-
-              if (functionKind === '__styles') {
-                const cssRulesByBucket = evaluationResult.value as CSSRulesByBucket;
-
-                state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket);
-              } else if (functionKind === '__resetStyles') {
-                const cssRules = evaluationResult.value as NonNullable<CSSRulesByBucket['r']>;
-
-                state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, { r: cssRules });
-              }
-
-              argumentPath.remove();
             },
           });
         },
diff --git a/yarn.lock b/yarn.lock
index d3e627b..d984c0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15229,6 +15229,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.12.13
     "@babel/generator": ^7.12.13
+    "@babel/helper-module-imports": ^7.12.13
     "@babel/helper-plugin-utils": ^7.12.13
     "@babel/preset-typescript": 7.12.13
     "@babel/template": ^7.12.13


Test patch:
diff --git a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts
index 9bee050..7b9639c 100644
--- a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts
+++ b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts
@@ -23,8 +23,39 @@ pluginTester({
       },
     }),
 
-  fixtures: fixturesDir,
-  tests: [],
+  tests: [
+    // 🎩 Tip: use "only: true" to run a single test
+    // https://github.com/babel-utils/babel-plugin-tester#only
+    //
+
+    {
+      title: 'basic (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'basic', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'basic', 'output.ts'),
+    },
+    {
+      title: 'basic (makeResetStyles)',
+      fixture: path.resolve(fixturesDir, 'reset', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'reset', 'output.ts'),
+    },
+
+    {
+      title: 'multiple declarations (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'multiple', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'multiple', 'output.ts'),
+    },
+    {
+      title: 'mixed (makeStyles + makeResetStyles)',
+      fixture: path.resolve(fixturesDir, 'mixed', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'mixed', 'output.ts'),
+    },
+
+    {
+      title: 'alias imports (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'alias', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'alias', 'output.ts'),
+    },
+  ],
 
   plugin: babelPluginStripGriffelRuntime,
   pluginName: '@griffel/webpack-extraction-plugin/babel',