From 8e394794dc6a15f3af397bd9c7aab436002d5398 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Thu, 31 Jan 2019 00:35:29 +0100
Subject: [PATCH] Adds `toString` to CSSResult

---
 src/lib/css-tag.ts                   | 4 ++++
 src/test/lit-element_styling_test.ts | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index a2078468..428faac8 100644
--- 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
index 6da13f55..510a1e7f 100644
--- 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', () => {