fix(shaker): string literals for addressing values in imported NS (#815)

callstack · Aug 8, 2021 · 8adf43e · 8adf43e
1 parent 6c3070a
commit 8adf43e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/packages/shaker/__tests__/__snapshots__/shaker.test.ts.snap b/packages/shaker/__tests__/__snapshots__/shaker.test.ts.snap
@@ -1086,6 +1086,7 @@ Dependencies: NA
 exports[`shaker should work with wildcard imports 1`] = `
 "import { css } from \\"@linaria/core\\";
 import * as mod from \\"@linaria/babel-preset/__fixtures__/complex-component\\";
+const color = mod[\\"whiteColor\\"];
 export const square = \\"square_s1t92lw9\\";"
 `;
 
@@ -1095,7 +1096,7 @@ CSS:
 
 .square_s1t92lw9 {
   .Title_t16vg7lb {
-    color: red;
+    color: #fff;
   }
 }
 

diff --git a/packages/shaker/__tests__/shaker.test.ts b/packages/shaker/__tests__/shaker.test.ts
@@ -9,9 +9,11 @@ describe('shaker', () => {
       import { css } from "@linaria/core";
       import * as mod from "@linaria/babel-preset/__fixtures__/complex-component";
 
+      const color = mod["whiteColor"];
+
       export const square = css\`
         ${'${mod.Title}'} {
-          color: red;
+          color: ${'${color}'};
         }
       \`;
     `

diff --git a/packages/shaker/src/DepsGraph.ts b/packages/shaker/src/DepsGraph.ts
@@ -24,7 +24,8 @@ function addEdge(this: DepsGraph, a: t.Node, b: t.Node) {
 }
 
 export default class DepsGraph {
-  public readonly imports: Map<string, t.Identifier[]> = new Map();
+  public readonly imports: Map<string, (t.Identifier | t.StringLiteral)[]> =
+    new Map();
   public readonly importAliases: Map<t.Identifier, string> = new Map();
   public readonly importTypes: Map<
     string,

diff --git a/packages/shaker/src/langs/core.ts b/packages/shaker/src/langs/core.ts
@@ -398,13 +398,16 @@ export const visitors: Visitors = {
       return;
     }
 
-    if (t.isIdentifier(node.object) && t.isIdentifier(node.property)) {
-      // It's simple `foo.bar` expression. Is it a usage of a required library?
+    if (
+      t.isIdentifier(node.object) &&
+      ((t.isIdentifier(node.property) && !node.computed) ||
+        t.isStringLiteral(node.property))
+    ) {
+      // It's simple `foo.bar` or `foo["bar"]` expression. Is it a usage of a required library?
       const declaration = this.scope.getDeclaration(node.object);
       if (
         t.isIdentifier(declaration) &&
-        this.graph.importAliases.has(declaration) &&
-        !node.computed
+        this.graph.importAliases.has(declaration)
       ) {
         // It is. We can remember what exactly we use from it.
         const source = this.graph.importAliases.get(declaration)!;

diff --git a/packages/shaker/src/shaker.ts b/packages/shaker/src/shaker.ts
@@ -108,7 +108,9 @@ export default function shake(
     const importType = depsGraph.importTypes.get(source);
     const defaultMembers = importType === 'wildcard' ? ['*'] : [];
     const aliveMembers = new Set(
-      members.filter((i) => alive.has(i)).map((i) => i.name)
+      members
+        .filter((i) => alive.has(i))
+        .map((i) => (i.type === 'Identifier' ? i.name : i.value))
     );
 
     if (importType === 'reexport') {