Adds toString to CSSResult (#508)

lit · Feb 4, 2019 · 0008b93 · 0008b93
1 parent 5637ce7
commit 0008b93
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
@@ -42,6 +42,10 @@ export class CSSResult {
     }
     return this._styleSheet;
   }
+
+  toString(): String {
+    return this.cssText;
+  }
 }
 
 /**

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
@@ -768,6 +768,14 @@ suite('Static get styles', () => {
     const div = el.shadowRoot!.querySelector('div');
     assert.equal(getComputedStyle(div!).getPropertyValue('border-top-width').trim(), '4px');
   });
+
+  test('`CSSResult` allows for String type coercion via toString()', async () => {
+    const cssModule = css`.my-module { color: yellow; }`;
+    // Coercion allows for reusage of css-tag outcomes in regular strings.
+    // Example use case: apply cssModule as global page styles at document.body level.
+    const bodyStyles = `${cssModule}`;
+    assert.equal(bodyStyles, '.my-module { color: yellow; }');
+  });
 });
 
 suite('ShadyDOM', () => {