callstack · Anber · May 31, 2021 · May 30, 2021
diff --git a/packages/babel/__fixtures__/enums.ts b/packages/babel/__fixtures__/enums.ts
@@ -0,0 +1,3 @@
+export enum Colors {
+  BLUE = '#27509A',
+}
diff --git a/packages/babel/__tests__/depsGraph.test.ts b/packages/babel/__tests__/depsGraph.test.ts
@@ -26,11 +26,11 @@ describe('VariableDeclaration', () => {
     const deps = graph.getDependenciesByBinding('0:a');
     expect(deps).toMatchObject([
       {
-        type: 'NumericLiteral',
-        value: 42,
+        type: 'VariableDeclarator',
       },
       {
-        type: 'VariableDeclarator',
+        type: 'NumericLiteral',
+        value: 42,
       },
     ]);
 
@@ -52,11 +52,11 @@ describe('scopes', () => {
     const deps0 = graph.getDependenciesByBinding('0:a');
     expect(deps0).toMatchObject([
       {
-        type: 'NumericLiteral',
-        value: 42,
+        type: 'VariableDeclarator',
       },
       {
-        type: 'VariableDeclarator',
+        type: 'NumericLiteral',
+        value: 42,
       },
       {
         type: 'Identifier',
@@ -67,22 +67,22 @@ describe('scopes', () => {
         start: 35,
       },
       {
-        type: 'NumericLiteral',
-        value: 21,
+        type: 'AssignmentExpression',
       },
       {
-        type: 'AssignmentExpression',
+        type: 'NumericLiteral',
+        value: 21,
       },
     ]);
 
     const deps1 = graph.getDependenciesByBinding('1:a');
     expect(deps1).toMatchObject([
       {
-        type: 'StringLiteral',
-        value: '21',
+        type: 'VariableDeclarator',
       },
       {
-        type: 'VariableDeclarator',
+        type: 'StringLiteral',
+        value: '21',
       },
     ]);
 
@@ -97,14 +97,14 @@ describe('scopes', () => {
     const aDeps = graph.getDependenciesByBinding('0:a');
     expect(aDeps).toMatchObject([
       {
-        type: 'ArrowFunctionExpression',
+        type: 'VariableDeclarator',
       },
       {
-        type: 'VariableDeclarator',
+        type: 'ArrowFunctionExpression',
       },
     ]);
 
-    expect(graph.getDependenciesByBinding('1:arg1')).toHaveLength(1);
+    expect(graph.getDependenciesByBinding('1:arg1')).toHaveLength(3);
     expect(graph.getDependentsByBinding('1:arg1')).toMatchObject([
       {
         // arg1 in the binary expression
@@ -129,19 +129,33 @@ describe('scopes', () => {
     ]);
 
     expect(graph.getDependenciesByBinding('1:arg2')).toMatchObject([
+      {
+        type: 'ArrowFunctionExpression',
+      },
       {
         type: 'Identifier',
         name: 'arg2',
         start: 17,
       },
+      {
+        type: 'BinaryExpression',
+        start: 32,
+      },
     ]);
 
     expect(graph.getDependenciesByBinding('1:arg3')).toMatchObject([
+      {
+        type: 'ArrowFunctionExpression',
+      },
       {
         type: 'Identifier',
         name: 'arg3',
         start: 23,
       },
+      {
+        type: 'BinaryExpression',
+        start: 32,
+      },
     ]);
   });
 });
@@ -156,11 +170,11 @@ describe('AssignmentExpression', () => {
     const deps = graph.getDependenciesByBinding('0:a');
     expect(deps).toMatchObject([
       {
-        type: 'NumericLiteral',
-        value: 42,
+        type: 'VariableDeclarator',
       },
       {
-        type: 'VariableDeclarator',
+        type: 'NumericLiteral',
+        value: 42,
       },
       {
         type: 'Identifier',
@@ -173,11 +187,11 @@ describe('AssignmentExpression', () => {
         start: 12,
       },
       {
-        type: 'NumericLiteral',
-        value: 24,
+        type: 'AssignmentExpression',
       },
       {
-        type: 'AssignmentExpression',
+        type: 'NumericLiteral',
+        value: 24,
       },
     ]);
 
@@ -193,11 +207,11 @@ describe('AssignmentExpression', () => {
 
     expect(graph.getDependenciesByBinding('0:a')).toMatchObject([
       {
-        type: 'ObjectExpression',
-        properties: [],
+        type: 'VariableDeclarator',
       },
       {
-        type: 'VariableDeclarator',
+        type: 'ObjectExpression',
+        properties: [],
       },
       {
         type: 'Identifier',
@@ -242,6 +256,12 @@ it('SequenceExpression', () => {
     {
       type: 'ArrowFunctionExpression',
     },
+    {
+      id: {
+        name: 'color2',
+      },
+      type: 'VariableDeclarator',
+    },
   ]);
 
   const fnDeps = graph.findDependencies({
@@ -260,16 +280,19 @@ it('SequenceExpression', () => {
       name: 'local',
       type: 'Identifier',
     },
+    {
+      type: 'SequenceExpression',
+    },
   ]);
 
   const localDeps = graph.getDependenciesByBinding('0:local');
   expect(localDeps).toMatchObject([
     {
-      type: 'StringLiteral',
-      value: '',
+      type: 'VariableDeclarator',
     },
     {
-      type: 'VariableDeclarator',
+      type: 'StringLiteral',
+      value: '',
     },
     {
       type: 'Identifier',
@@ -282,11 +305,11 @@ it('SequenceExpression', () => {
       start: 61,
     },
     {
-      type: 'Identifier',
-      name: 'color1',
+      type: 'AssignmentExpression',
     },
     {
-      type: 'AssignmentExpression',
+      type: 'Identifier',
+      name: 'color1',
     },
     {
       type: 'Identifier',
@@ -300,7 +323,7 @@ it('SequenceExpression', () => {
 
   const bool = { type: 'BooleanLiteral' };
   expect(graph.findDependents(bool)).toHaveLength(0);
-  expect(graph.findDependencies(bool)).toHaveLength(0);
+  expect(graph.findDependencies(bool)).toHaveLength(1);
 });
 
 it('MemberExpression', () => {
@@ -323,5 +346,11 @@ it('MemberExpression', () => {
       type: 'Identifier',
       name: 'key',
     },
+    {
+      type: 'VariableDeclarator',
+      id: {
+        name: 'blue',
+      },
+    },
   ]);
 });
diff --git a/packages/babel/__utils__/strategy-tester.ts b/packages/babel/__utils__/strategy-tester.ts
@@ -77,8 +77,8 @@ export function run(
     conf: (original: typeof babelrc) => typeof babelrc = (i) => i
   ) => {
     const { code, metadata } = await transformAsync(input, {
-      ...conf(babelrc),
       filename: join(dirname, 'source.js'),
+      ...conf(babelrc),
     });
     // The slug will be machine specific, so replace it with a consistent one
     return {
@@ -179,23 +179,20 @@ export function run(
     expect(metadata).toMatchSnapshot();
   });
 
-  it('evaluates typescript enums', async () => {
+  it('evaluates imported typescript enums', async () => {
     const { code, metadata } = await transpile(
       dedent`
-      enum Colors {
-        BLUE = '#27509A'
-      }
+      import { styled } from '@linaria/react';
+      import { Colors } from '@linaria/babel-preset/__fixtures__/enums';
 
-      const Title = styled.h1\`
+      export const Title = styled.h1\`
         color: ${'${Colors.BLUE}'};
       \`;
       `,
       (config) => ({
         ...config,
-        plugins: [
-          '@babel/plugin-transform-typescript',
-          ...(config.plugins || []),
-        ],
+        presets: ['@babel/preset-typescript', ...(config.presets ?? [])],
+        filename: 'source.ts',
       })
     );
 

diff --git a/packages/babel/src/extract.ts b/packages/babel/src/extract.ts
@@ -14,7 +14,7 @@ import type { Node, Program, Expression } from '@babel/types';
 import type { NodePath, Scope, Visitor } from '@babel/traverse';
 import { expression, statement } from '@babel/template';
 import generator from '@babel/generator';
-import { debug } from '@linaria/logger';
+import { debug, error } from '@linaria/logger';
 import evaluate from './evaluators';
 import getTemplateProcessor from './evaluators/templateProcessor';
 import Module from './module';
@@ -185,6 +185,7 @@ export default function extract(
               lazyValues = evaluation.value.__linariaPreval || [];
               debug('lazy-deps:values', evaluation.value.__linariaPreval);
             } catch (e) {
+              error('lazy-deps:evaluate', code);
               throw new Error(
                 'An unexpected runtime error occurred during dependencies evaluation: \n' +
                   e.stack +

diff --git a/packages/extractor/__tests__/__snapshots__/extractor.test.ts.snap b/packages/extractor/__tests__/__snapshots__/extractor.test.ts.snap
@@ -336,6 +336,27 @@ Dependencies: NA
 
 `;
 
+exports[`extractor evaluates imported typescript enums 1`] = `
+"import { styled } from '@linaria/react';
+import { Colors } from '@linaria/babel-preset/__fixtures__/enums';
+export const Title = /*#__PURE__*/styled(\\"h1\\")({
+  name: \\"Title\\",
+  class: \\"Title_taxxqrn\\"
+});"
+`;
+
+exports[`extractor evaluates imported typescript enums 2`] = `
+
+CSS:
+
+.Title_taxxqrn {
+  color: #27509A;
+}
+
+Dependencies: @linaria/babel-preset/__fixtures__/enums
+
+`;
+
 exports[`extractor evaluates interpolations with sequence expression 1`] = `
 "import { styled } from '@linaria/react';
 export const Title = /*#__PURE__*/styled(\\"h1\\")({
@@ -415,20 +436,6 @@ Dependencies: @linaria/babel-preset/__fixtures__/slugify
 
 `;
 
-exports[`extractor evaluates typescript enums 1`] = `
-"var Colors;
-
-(function (Colors) {
-  Colors[\\"BLUE\\"] = \\"#27509A\\";
-})(Colors || (Colors = {}));
-
-const Title = styled.h1\`
-  color: \${Colors.BLUE};
-\`;"
-`;
-
-exports[`extractor evaluates typescript enums 2`] = `Object {}`;
-
 exports[`extractor generates stable class names 1`] = `
 "import { styled } from '@linaria/react';
 export const T1 = /*#__PURE__*/styled(\\"h1\\")({