Skip to content

Commit

Permalink
Also allow using the modifier on SVG elements
Browse files Browse the repository at this point in the history
  • Loading branch information
boris-petrov committed Feb 5, 2024
1 parent 26bf164 commit 5d6f48f
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 3 deletions.
13 changes: 10 additions & 3 deletions ember-style-modifier/src/modifiers/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function compileStyles(
}

export interface StyleModifierSignature {
Element: HTMLElement;
Element: HTMLElement | SVGElement;
Args: {
Positional: CSSStyles[];
Named: CSSStyles;
Expand All @@ -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);

Expand Down Expand Up @@ -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));
}
}
8 changes: 8 additions & 0 deletions test-app/tests/integration/modifiers/style-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ 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
Expand Down

0 comments on commit 5d6f48f

Please sign in to comment.