Handle multiple shadows

Temzasse · Apr 13, 2022 · 2a85005 · 2a85005
1 parent c09ab79
commit 2a85005
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/src/tokenizer.js b/src/tokenizer.js
@@ -148,24 +148,30 @@ export default class Tokenizer {
         this.hasTokenType("drop-shadow")
       ) {
         // SHADOWS -------------------------------------------------------------
+        function getShadow(shadow) {
+          const { r, g, b, a } = shadow.color;
+          const alpha = parseFloat(a.toFixed(2));
+          const rgba = `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`; // prettier-ignore
+          const hex = rgbToHex(
+            Math.round(r * 255),
+            Math.round(g * 255),
+            Math.round(b * 255)
+          );
+
+          return {
+            boxShadow: `${shadow.offset.x}px ${shadow.offset.y}px ${shadow.radius}px ${rgba}`,
+            offset: shadow.offset,
+            radius: shadow.radius,
+            opacity: alpha,
+            color: { hex, rgba },
+          };
+        }
+
         const tokenName = this.getTokenNameByType("drop-shadow");
-        const shadow = doc.effects[0]; // TODO: handle multiple shadows
-        const { r, g, b, a } = shadow.color;
-        const alpha = parseFloat(a.toFixed(2));
-        const rgba = `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`; // prettier-ignore
-        const hex = rgbToHex(
-          Math.round(r * 255),
-          Math.round(g * 255),
-          Math.round(b * 255)
-        );
+        const shadows = doc.effects.map(getShadow);
 
-        this.tokens[tokenName][style.name] = {
-          boxShadow: `${shadow.offset.x}px ${shadow.offset.y}px ${shadow.radius}px ${rgba}`,
-          offset: shadow.offset,
-          radius: shadow.radius,
-          opacity: alpha,
-          color: { hex, rgba },
-        };
+        this.tokens[tokenName][style.name] =
+          shadows.length === 1 ? shadows[0] : shadows;
       }
     });
   }