Removed rest of inline styles from fa-layers.svelte

Cweili · Jan 16, 2024 · da615de · da615de
1 parent 7f3f58f
commit da615de
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/layers.test.ts b/src/layers.test.ts
@@ -56,12 +56,14 @@ test("basic", async () => {
 
   expect(getFaLayersText("b").getAttribute("id")).toBe("b");
   expect(getFaLayersText("b").getAttribute("class")).toContain("class-b");
-  expect(getFaLayersText("b").querySelector("span")?.getAttribute("style")).toContain("color:blue");
+  expect(getComputedStyle(getFaLayersText("b").querySelector("span"))["color"]).toBe(
+    "rgb(0, 0, 255)",
+  );
 });
 
 test("color", async () => {
   mountFaLayers({}, { color: "red" });
-  expect(getFaLayersText().querySelector("span")?.getAttribute("style")).toContain("color:red");
+  expect(getComputedStyle(getFaLayersText().querySelector("span"))["color"]).toBe("rgb(255, 0, 0)");
   mountFaLayers({}, { color: undefined });
   expect(getFaLayersText().querySelector("span")?.getAttribute("style")).not.toContain("color:red");
 });

diff --git a/src/lib/fa-layers-text.svelte b/src/lib/fa-layers-text.svelte
@@ -17,21 +17,22 @@
 
   let containerElement: HTMLElement;
   $: containerElement && size && setCutomFontSize(containerElement, size);
-
+  $: containerElement && color && (containerElement.style.color = color);
   $: transform = getTransform(scale, translateX, translateY, rotate, flip, 1, "em", "deg");
-  $: fullStyle =
-    `transform: ${transform}` + (color ? `; color:${color}` : "") + (style ? `; ${style}` : "");
+  $: containerElement && transform && (containerElement.style.transform = transform);
 </script>
 
 <span {id} class="svelte-fa-layers-text {clazz}">
+  <!-- eslint-disable svelte/no-inline-styles -- Only styles passed to this component should be included -->
   <span
     class="svelte-fa-base container"
     class:svelte-fa-size-lg={size === "lg"}
     class:svelte-fa-size-sm={size === "sm"}
     class:svelte-fa-size-xs={size === "xs"}
     bind:this={containerElement}
-    style={fullStyle}
+    {style}
   >
+    <!-- eslint-enable -->
     <slot />
   </span>
 </span>