From f42b4d31d1deb126f3a27b2ff4078bfe1f7e825d Mon Sep 17 00:00:00 2001
From: Boris Petrov <boris_petrov@live.com>
Date: Tue, 6 Feb 2024 01:42:34 +0200
Subject: [PATCH] Also allow using the modifier on SVG elements

---
 ember-style-modifier/src/modifiers/style.ts        | 13 ++++++++++---
 test-app/tests/integration/modifiers/style-test.ts |  6 ++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ember-style-modifier/src/modifiers/style.ts b/ember-style-modifier/src/modifiers/style.ts
index f694d3ab..39e8adcd 100644
--- a/ember-style-modifier/src/modifiers/style.ts
+++ b/ember-style-modifier/src/modifiers/style.ts
@@ -44,7 +44,7 @@ function compileStyles(
 }
 
 export interface StyleModifierSignature {
-  Element: HTMLElement;
+  Element: ElementCSSInlineStyle;
   Args: {
     Positional: CSSStyles[];
     Named: CSSStyles;
@@ -54,7 +54,10 @@ export interface StyleModifierSignature {
 export default class StyleModifier extends Modifier<StyleModifierSignature> {
   existingStyles: Set<string> = new Set();
 
-  setStyles(element: HTMLElement, newStyles: [string, string][]) {
+  setStyles(
+    element: StyleModifierSignature['Element'],
+    newStyles: [string, string][],
+  ) {
     const { existingStyles } = this;
     const rulesToRemove: Set<string> = new Set(existingStyles);
 
@@ -92,7 +95,11 @@ export default class StyleModifier extends Modifier<StyleModifierSignature> {
     rulesToRemove.forEach((rule) => element.style.removeProperty(rule));
   }
 
-  modify(element: HTMLElement, positional: [CSSStyles] | [], named: CSSStyles) {
+  modify(
+    element: StyleModifierSignature['Element'],
+    positional: [CSSStyles] | [],
+    named: CSSStyles,
+  ) {
     this.setStyles(element, compileStyles(positional, named));
   }
 }
diff --git a/test-app/tests/integration/modifiers/style-test.ts b/test-app/tests/integration/modifiers/style-test.ts
index e6e72dcb..a1c6dfe5 100644
--- a/test-app/tests/integration/modifiers/style-test.ts
+++ b/test-app/tests/integration/modifiers/style-test.ts
@@ -60,6 +60,12 @@ module('Integration | Modifiers | style', function (hooks) {
     assert.dom('p').hasStyle({ fontSize: '6px' });
   });
 
+  test('it supports usage on SVG elements', async function (assert) {
+    await render(hbs`<svg {{style display="none"}}></svg>`);
+
+    assert.dom('svg').hasStyle({ display: 'none' });
+  });
+
   {
     interface Context extends TestContext {
       // eslint-disable-next-line @typescript-eslint/ban-types