Setting CSS variables using styles modifier (#219)

* Add a test that CSS variables work * Allow CSS variables in the TypeScript definition
jelhan · Jan 12, 2024 · c2869d5 · c2869d5
1 parent ed9627e
commit c2869d5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/addon/modifiers/style.ts b/addon/modifiers/style.ts
@@ -8,7 +8,10 @@ import type * as CSS from 'csstype';
 // 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 = Partial<CSS.Properties> | Partial<CSS.PropertiesHyphen>;
+type CSSStyles =
+  | Partial<CSS.Properties>
+  | Partial<CSS.PropertiesHyphen>
+  | { readonly [key: `--${string}`]: string };
 
 function isObject(o: unknown): boolean {
   return typeof o === 'object' && Boolean(o);

diff --git a/tests/integration/modifiers/style-test.ts b/tests/integration/modifiers/style-test.ts
@@ -52,6 +52,14 @@ module('Integration | Modifiers | style', function (hooks) {
       .hasStyle({ fontStyle: 'italic' });
   });
 
+  test('it supports CSS variables', async function (assert) {
+    await render(
+      hbs`<p {{style --some-property="6px" font-size="var(--some-property)"}}></p>`,
+    );
+
+    assert.dom('p').hasStyle({ fontSize: '6px' });
+  });
+
   {
     interface Context extends TestContext {
       // eslint-disable-next-line @typescript-eslint/ban-types