improved typing of CSS styles using csstype package (#216)

Author: jelhan

addon/modifiers/style.ts

@@ -2,12 +2,13 @@ import Modifier from 'ember-modifier';
 import { dasherize } from '@ember/string';
 import { assert } from '@ember/debug';
 import { typeOf } from '@ember/utils';
+import type * as CSS from 'csstype';
 
 // Cannot be typed as `Partial<CSSStyleDeclaration>` because `CSSStyleDeclaration`
 // interface does _not_ included dashed CSS property names. It only includes the
 // camelCase version of a CSS property.
 // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1672
-type CSSStyles = { [key: string]: string | undefined };
+type CSSStyles = Partial<CSS.Properties> | Partial<CSS.PropertiesHyphen>;
 
 function isObject(o: unknown): boolean {
   return typeof o === 'object' && Boolean(o);

package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.6",
+    "csstype": "^3.1.3",
     "ember-auto-import": "^2.7.0",
     "ember-cli-babel": "^8.2.0",
     "ember-modifier": "^3.2.7 || ^4.0.0"

pnpm-lock.yaml

@@ -13,6 +13,12 @@ module('Integration | Modifiers | style', function (hooks) {
     assert.dom('p').hasStyle({ display: 'none' });
   });
 
+  test('it supports multiple styles', async function (assert) {
+    await render(hbs`<p {{style display="none" float="left"}}></p>`);
+
+    assert.dom('p').hasStyle({ display: 'none', float: 'left' });
+  });
+
   test('it allows to set priority', async function (assert) {
     await render(hbs`<p {{style display="none !important"}}></p>`);
 
@@ -37,6 +43,15 @@ module('Integration | Modifiers | style', function (hooks) {
     assert.dom('p').hasStyle({ fontSize: '6px' });
   });
 
+  test('it supports dasherized and camelCase property names in same declaration', async function (assert) {
+    await render(hbs`<p {{style font-size="6px" fontStyle="italic"}}></p>`);
+
+    assert
+      .dom('p')
+      .hasStyle({ fontSize: '6px' })
+      .hasStyle({ fontStyle: 'italic' });
+  });
+
   {
     interface Context extends TestContext {
       // eslint-disable-next-line @typescript-eslint/ban-types