Allow using the modifier on SVG and math elements

Author: boris-petrov

ember-style-modifier/src/modifiers/style.ts

@@ -44,7 +44,8 @@ function compileStyles(
 }
 
 export interface StyleModifierSignature {
-  Element: HTMLElement;
+  // TODO: use `ElementCSSInlineStyle & Element` once TypeScript marks `<math>` elements as `MathMLElement`
+  Element: HTMLElement | SVGElement | MathMLElement;
   Args: {
     Positional: CSSStyles[];
     Named: CSSStyles;
@@ -54,7 +55,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 +96,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));
   }
 }

test-app/tests/integration/modifiers/style-test.ts

@@ -60,6 +60,18 @@ 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' });
+  });
+
+  test('it supports usage on math elements', async function (assert) {
+    await render(hbs`<math {{style display="none"}}></math>`);
+
+    assert.dom('math').hasStyle({ display: 'none' });
+  });
+
   {
     interface Context extends TestContext {
       // eslint-disable-next-line @typescript-eslint/ban-types