diff --git a/src/generate.js b/src/generate.js
index fe51260..d4c287d 100644
--- a/src/generate.js
+++ b/src/generate.js
@@ -14,12 +14,12 @@ const prefixAll = createPrefixer(staticData);
 /* ::
 import type { SheetDefinition } from './index.js';
 type StringHandlers = { [id:string]: Function };
-type SelectorCallback = (selector: string) => any;
+type SelectorCallback = (selector: string) => string[];
 export type SelectorHandler = (
     selector: string,
     baseSelector: string,
     callback: SelectorCallback
-) => string | null;
+) => string[] | string | null;
 */
 
 /**
@@ -49,9 +49,10 @@ export type SelectorHandler = (
  *   callback('.foo:nth-child(2n):hover')
  *
  * to generate its subtree `{ color: 'red' }` styles with a
- * '.foo:nth-child(2n):hover' selector. The callback would return CSS like
+ * '.foo:nth-child(2n):hover' selector. The callback would return an array of CSS
+ * rules like
  *
- *   '.foo:nth-child(2n):hover{color:red !important;}'
+ *   ['.foo:nth-child(2n):hover{color:red !important;}']
  *
  * and the handler would then return that resulting CSS.
  *
@@ -67,16 +68,12 @@ export type SelectorHandler = (
  * @param {function} generateSubtreeStyles: A function which can be called to
  *     generate CSS for the subtree of styles corresponding to the selector.
  *     Accepts a new baseSelector to use for generating those styles.
- * @returns {?string} The generated CSS for this selector, or null if we don't
- *     handle this selector.
+ * @returns {string[] | string | null} The generated CSS for this selector, or
+ *     null if we don't handle this selector.
  */
-export const defaultSelectorHandlers = [
+export const defaultSelectorHandlers /* : SelectorHandler[] */ = [
     // Handle pseudo-selectors, like :hover and :nth-child(3n)
-    function pseudoSelectors(
-        selector /* : string */,
-        baseSelector /* : string */,
-        generateSubtreeStyles /* : Function */
-    ) /* */ {
+    function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) {
         if (selector[0] !== ":") {
             return null;
         }
@@ -84,17 +81,13 @@ export const defaultSelectorHandlers = [
     },
 
     // Handle media queries (or font-faces)
-    function mediaQueries(
-        selector /* : string */,
-        baseSelector /* : string */,
-        generateSubtreeStyles /* : Function */
-    ) /* */ {
+    function mediaQueries(selector, baseSelector, generateSubtreeStyles) {
         if (selector[0] !== "@") {
             return null;
         }
         // Generate the styles normally, and then wrap them in the media query.
         const generated = generateSubtreeStyles(baseSelector);
-        return `${selector}{${generated}}`;
+        return [`${selector}{${generated.join('')}}`];
     },
 ];
 
@@ -147,7 +140,7 @@ export const generateCSS = (
     selectorHandlers /* : SelectorHandler[] */,
     stringHandlers /* : StringHandlers */,
     useImportant /* : boolean */
-) /* : string */ => {
+) /* : string[] */ => {
     const merged = new OrderedElements();
 
     for (let i = 0; i < styleTypes.length; i++) {
@@ -155,7 +148,7 @@ export const generateCSS = (
     }
 
     const plainDeclarations = new OrderedElements();
-    let generatedStyles = "";
+    const generatedStyles = [];
 
     // TODO(emily): benchmark this to see if a plain for loop would be faster.
     merged.forEach((val, key) => {
@@ -170,7 +163,17 @@ export const generateCSS = (
             if (result != null) {
                 // If the handler returned something, add it to the generated
                 // CSS and stop looking for another handler.
-                generatedStyles += result;
+                if (Array.isArray(result)) {
+                    generatedStyles.push(...result);
+                } else {
+                    // eslint-disable-next-line
+                    console.warn(
+                        'WARNING: Selector handlers should return an array of rules.' +
+                        'Returning a string containing multiple rules is deprecated.',
+                        handler,
+                    );
+                    generatedStyles.push(`@media all {${result}}`);
+                }
                 return true;
             }
         });
@@ -180,13 +183,20 @@ export const generateCSS = (
             plainDeclarations.set(key, val, true);
         }
     });
-
-    return (
-        generateCSSRuleset(
-            selector, plainDeclarations, stringHandlers, useImportant,
-            selectorHandlers) +
-        generatedStyles
+    const generatedRuleset = generateCSSRuleset(
+        selector,
+        plainDeclarations,
+        stringHandlers,
+        useImportant,
+        selectorHandlers,
     );
+
+
+    if (generatedRuleset) {
+        generatedStyles.unshift(generatedRuleset);
+    }
+
+    return generatedStyles;
 };
 
 /**
diff --git a/src/inject.js b/src/inject.js
index 2141616..a34e8d3 100644
--- a/src/inject.js
+++ b/src/inject.js
@@ -19,17 +19,17 @@ type ProcessedStyleDefinitions = {
 // inserted anything yet. We could find this each time using
 // `document.querySelector("style[data-aphrodite"])`, but holding onto it is
 // faster.
-let styleTag = null;
+let styleTag /* : ?HTMLStyleElement */ = null;
 
-// Inject a string of styles into a <style> tag in the head of the document. This
+// Inject a set of rules into a <style> tag in the head of the document. This
 // will automatically create a style tag and then continue to use it for
 // multiple injections. It will also use a style tag with the `data-aphrodite`
 // tag on it if that exists in the DOM. This could be used for e.g. reusing the
 // same style tag that server-side rendering inserts.
-const injectStyleTag = (cssContents /* : string */) => {
+const injectStyleTag = (cssRules /* : string[] */) => {
     if (styleTag == null) {
         // Try to find a style tag with the `data-aphrodite` attribute first.
-        styleTag = document.querySelector("style[data-aphrodite]");
+        styleTag = ((document.querySelector("style[data-aphrodite]") /* : any */) /* : ?HTMLStyleElement */);
 
         // If that doesn't work, generate a new style tag.
         if (styleTag == null) {
@@ -44,12 +44,20 @@ const injectStyleTag = (cssContents /* : string */) => {
         }
     }
 
+    const sheet = ((styleTag.styleSheet || styleTag.sheet /* : any */) /* : CSSStyleSheet */);
 
-    if (styleTag.styleSheet) {
-        // $FlowFixMe: legacy Internet Explorer compatibility
-        styleTag.styleSheet.cssText += cssContents;
+    if (sheet.insertRule) {
+        let numRules = sheet.cssRules.length;
+        cssRules.forEach((rule) => {
+            try {
+                sheet.insertRule(rule, numRules);
+                numRules += 1;
+            } catch(e) {
+                // The selector for this rule wasn't compatible with the browser
+            }
+        });
     } else {
-        styleTag.appendChild(document.createTextNode(cssContents));
+        styleTag.innerText = (styleTag.innerText || '') + cssRules.join('');
     }
 };
 
@@ -113,17 +121,17 @@ const stringHandlers = {
             if (val instanceof OrderedElements) {
                 val.forEach((valVal, valKey) => {
                     finalVal += generateCSS(
-                        valKey, [valVal], selectorHandlers, stringHandlers, false);
+                        valKey, [valVal], selectorHandlers, stringHandlers, false).join('');
                 });
             } else {
                 Object.keys(val).forEach(key => {
                     finalVal += generateCSS(
-                        key, [val[key]], selectorHandlers, stringHandlers, false);
+                        key, [val[key]], selectorHandlers, stringHandlers, false).join('');
                 });
             }
             finalVal += '}';
 
-            injectGeneratedCSSOnce(name, finalVal);
+            injectGeneratedCSSOnce(name, [finalVal]);
 
             return name;
         } else {
@@ -137,7 +145,7 @@ const stringHandlers = {
 let alreadyInjected = {};
 
 // This is the buffer of styles which have not yet been flushed.
-let injectionBuffer = "";
+let injectionBuffer /* : string[] */ = [];
 
 // A flag to tell if we are already buffering styles. This could happen either
 // because we scheduled a flush call already, so newly added styles will
@@ -163,7 +171,7 @@ const injectGeneratedCSSOnce = (key, generatedCSS) => {
         asap(flushToStyleTag);
     }
 
-    injectionBuffer += generatedCSS;
+    injectionBuffer.push(...generatedCSS);
     alreadyInjected[key] = true;
 }
 
@@ -186,7 +194,7 @@ export const injectStyleOnce = (
 };
 
 export const reset = () => {
-    injectionBuffer = "";
+    injectionBuffer = [];
     alreadyInjected = {};
     isBuffering = false;
     styleTag = null;
@@ -200,17 +208,21 @@ export const startBuffering = () => {
     isBuffering = true;
 };
 
-export const flushToString = () => {
+const flushToArray = () => {
     isBuffering = false;
     const ret = injectionBuffer;
-    injectionBuffer = "";
+    injectionBuffer = [];
     return ret;
 };
 
+export const flushToString = () => {
+    return flushToArray().join('');
+};
+
 export const flushToStyleTag = () => {
-    const cssContent = flushToString();
-    if (cssContent.length > 0) {
-        injectStyleTag(cssContent);
+    const cssRules = flushToArray();
+    if (cssRules.length > 0) {
+        injectStyleTag(cssRules);
     }
 };
 
diff --git a/tests/generate_test.js b/tests/generate_test.js
index 309d70c..5fea012 100644
--- a/tests/generate_test.js
+++ b/tests/generate_test.js
@@ -106,9 +106,10 @@ describe('generateCSS', () => {
                        stringHandlers = {}, useImportant = true) => {
         const actual = generateCSS(className, styleTypes, selectorHandlers,
                                    stringHandlers, useImportant);
-        const expectedNormalized = expected.split('\n').map(x => x.trim()).join('');
-        const formatStyles = (styles) => styles.replace(/(;|{|})/g, '$1\n');
-        assert.equal(
+        const expectedArray = [].concat(expected);
+        const expectedNormalized = expectedArray.map(rule => rule.split('\n').map(x => x.trim()).join(''));
+        const formatStyles = (styles) => styles.map(style => style.replace(/(;|{|})/g, '$1\n')).join('');
+        assert.deepEqual(
             actual,
             expectedNormalized,
             `
@@ -273,17 +274,17 @@ ${formatStyles(actual)}
                     padding: 30,
                 }
             }
-        ], `
-        @media (min-width: 200px){
+        ], [
+            `@media (min-width: 200px){
             .foo{
                 padding:20px !important;
             }
-        }
-        @media (min-width: 400px){
+        }`,
+            `@media (min-width: 400px){
             .foo{
                 padding:30px !important;
             }
-        }`, defaultSelectorHandlers);
+        }`], defaultSelectorHandlers);
     });
 
     it('supports custom string handlers', () => {
@@ -345,7 +346,24 @@ ${formatStyles(actual)}
                 color: 'red',
             },
             color: 'blue',
-        }], '.foo{color:blue;}.bar .foo{color:red;}', [handler], {}, false);
+        }], ['.foo{color:blue;}','.bar .foo{color:red;}'], [handler], {}, false);
+    });
+
+    it('supports selector handlers that return strings containing multiple rules', () => {
+        const handler = (selector, baseSelector, callback) => {
+            if (selector[0] !== '^') {
+                return null;
+            }
+            const generatedBefore = callback(baseSelector + '::before');
+            const generatedAfter = callback(baseSelector + '::after');
+            return `${generatedBefore} ${generatedAfter}`;
+        };
+
+        assertCSS('.foo', [{
+            '^': {
+                color: 'red',
+            },
+        }], ['@media all {.foo::before{color:red;} .foo::after{color:red;}}'], [handler], {}, false);
     });
 
     it('correctly prefixes border-color transition properties', () => {
diff --git a/tests/index_test.js b/tests/index_test.js
index 4069a0d..c0961b8 100644
--- a/tests/index_test.js
+++ b/tests/index_test.js
@@ -9,6 +9,7 @@ import {
   css
 } from '../src/index.js';
 import { reset } from '../src/inject.js';
+import { getSheetText } from './testUtils.js';
 
 describe('css', () => {
     beforeEach(() => {
@@ -80,9 +81,10 @@ describe('css', () => {
         asap(() => {
             const styleTags = global.document.getElementsByTagName("style");
             const lastTag = styleTags[styleTags.length - 1];
+            const style = getSheetText(lastTag.sheet);
 
-            assert.include(lastTag.textContent, `${sheet.red._name}{`);
-            assert.match(lastTag.textContent, /color:red !important/);
+            assert.include(style, `${sheet.red._name} {`);
+            assert.match(style, /color: red !important/);
             done();
         });
     });
@@ -132,10 +134,10 @@ describe('css', () => {
         asap(() => {
             const styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 1);
-            const styles = styleTags[0].textContent;
+            const styles = getSheetText(styleTags[0].sheet);
 
-            assert.include(styles, `${sheet.red._name}{`);
-            assert.include(styles, 'color:red');
+            assert.include(styles, `${sheet.red._name} {`);
+            assert.include(styles, 'color: red');
 
             done();
         });
@@ -292,14 +294,14 @@ describe('rehydrate', () => {
         asap(() => {
             const styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 1);
-            const styles = styleTags[0].textContent;
+            const styles = getSheetText(styleTags[0].sheet);
 
-            assert.notInclude(styles, `.${sheet.red._name}{`);
-            assert.notInclude(styles, `.${sheet.blue._name}{`);
-            assert.include(styles, `.${sheet.green._name}{`);
-            assert.notMatch(styles, /color:blue/);
-            assert.notMatch(styles, /color:red/);
-            assert.match(styles, /color:green/);
+            assert.notInclude(styles, `.${sheet.red._name} {`);
+            assert.notInclude(styles, `.${sheet.blue._name} {`);
+            assert.include(styles, `.${sheet.green._name} {`);
+            assert.notMatch(styles, /color: blue/);
+            assert.notMatch(styles, /color: red/);
+            assert.match(styles, /color: green/);
 
             done();
         });
@@ -364,14 +366,14 @@ describe('StyleSheet.extend', () => {
         asap(() => {
             const styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 1);
-            const styles = styleTags[0].textContent;
+            const styles = getSheetText(styleTags[0].sheet);
 
             assert.notInclude(styles, '^bar');
             assert.include(styles, '.bar .foo');
             assert.include(styles, '.baz .bar .foo');
-            assert.include(styles, 'color:red');
-            assert.include(styles, 'color:blue');
-            assert.include(styles, 'color:orange');
+            assert.include(styles, 'color: red');
+            assert.include(styles, 'color: blue');
+            assert.include(styles, 'color: orange');
 
             done();
         });
diff --git a/tests/inject_test.js b/tests/inject_test.js
index 250b7e8..3e142ff 100644
--- a/tests/inject_test.js
+++ b/tests/inject_test.js
@@ -10,6 +10,7 @@ import {
     addRenderedClassNames, getRenderedClassNames,
 } from '../src/inject.js';
 import { defaultSelectorHandlers } from '../src/generate';
+import { getSheetText } from './testUtils.js';
 
 const sheet = StyleSheet.create({
     red: {
@@ -106,10 +107,10 @@ describe('injection', () => {
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
                 assert.equal(styleTags.length, 1);
-                const styles = styleTags[0].textContent;
+                const styles = getSheetText(styleTags[0].sheet);
 
-                assert.include(styles, ".x{");
-                assert.include(styles, "color:red");
+                assert.include(styles, ".x {");
+                assert.include(styles, "color: red");
 
                 done();
             });
@@ -126,12 +127,12 @@ describe('injection', () => {
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
                 assert.equal(styleTags.length, 1);
-                const styles = styleTags[0].textContent;
+                const styles = getSheetText(styleTags[0].sheet);
 
-                assert.include(styles, ".x{");
-                assert.include(styles, ".y{");
-                assert.include(styles, "color:red");
-                assert.include(styles, "color:blue");
+                assert.include(styles, ".x {");
+                assert.include(styles, ".y {");
+                assert.include(styles, "color: red");
+                assert.include(styles, "color: blue");
 
                 done();
             });
@@ -144,12 +145,12 @@ describe('injection', () => {
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
                 assert.equal(styleTags.length, 1);
-                const styles = styleTags[0].textContent;
+                const styles = getSheetText(styleTags[0].sheet);
 
-                assert.include(styles, ".x{");
-                assert.include(styles, "color:red");
-                assert.notInclude(styles, "color:blue");
-                assert.equal(styles.match(/\.x{/g).length, 1);
+                assert.include(styles, ".x {");
+                assert.include(styles, "color: red");
+                assert.notInclude(styles, "color: blue");
+                assert.equal(styles.match(/\.x {/g).length, 1);
 
                 done();
             });
@@ -167,17 +168,17 @@ describe('injection', () => {
         });
 
         // browser-specific tests
-        it('adds to the .styleSheet.cssText if available', done => {
+        it('adds to .innerText if insertRule is not available', done => {
             const styleTag = global.document.createElement("style");
             styleTag.setAttribute("data-aphrodite", "");
             document.head.appendChild(styleTag);
-            styleTag.styleSheet = { cssText: "" };
+            styleTag.sheet.insertRule = null;
 
             injectStyleOnce("x", ".x", [{ color: "red" }], false);
 
             asap(() => {
-                assert.include(styleTag.styleSheet.cssText, ".x{");
-                assert.include(styleTag.styleSheet.cssText, "color:red");
+                assert.include(styleTag.innerText, ".x{");
+                assert.include(styleTag.innerText, "color:red");
                 done();
             });
         });
@@ -192,10 +193,10 @@ describe('injection', () => {
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
                 assert.equal(styleTags.length, 1);
-                const styles = styleTags[0].textContent;
+                const styles = getSheetText(styleTags[0].sheet);
 
-                assert.include(styles, ".x{");
-                assert.include(styles, "color:red");
+                assert.include(styles, ".x {");
+                assert.include(styles, "color: red");
 
                 done();
             });
@@ -235,11 +236,12 @@ describe('injection', () => {
 
             const styleTags = global.document.getElementsByTagName("style");
             const lastTag = styleTags[styleTags.length - 1];
+            const styles = getSheetText(lastTag.sheet);
 
-            assert.include(lastTag.textContent, `.${sheet.red._name}{`);
-            assert.include(lastTag.textContent, `.${sheet.blue._name}{`);
-            assert.match(lastTag.textContent, /color:red/);
-            assert.match(lastTag.textContent, /color:blue/);
+            assert.include(styles, `.${sheet.red._name} {`);
+            assert.include(styles, `.${sheet.blue._name} {`);
+            assert.match(styles, /color: red/);
+            assert.match(styles, /color: blue/);
         });
 
         it('clears the injection buffer', () => {
@@ -252,14 +254,14 @@ describe('injection', () => {
 
             let styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 1);
-            const styleContentLength = styleTags[0].textContent.length;
+            const styleContentLength = getSheetText(styleTags[0].sheet).length;
 
             startBuffering();
             flushToStyleTag();
 
             styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 1);
-            assert.equal(styleTags[0].textContent.length, styleContentLength);
+            assert.equal(getSheetText(styleTags[0].sheet).length, styleContentLength);
         });
     });
 
@@ -317,14 +319,14 @@ describe('injection', () => {
 
             const styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 1);
-            const styles = styleTags[0].textContent;
-
-            assert.include(styles, `.${sheet.green._name}{`);
-            assert.notInclude(styles, `.${sheet.red._name}{`);
-            assert.notInclude(styles, `.${sheet.blue._name}{`);
-            assert.match(styles, /color:green/);
-            assert.notMatch(styles, /color:red/);
-            assert.notMatch(styles, /color:blue/);
+            const styles = getSheetText(styleTags[0].sheet);
+
+            assert.include(styles, `.${sheet.green._name} {`);
+            assert.notInclude(styles, `.${sheet.red._name} {`);
+            assert.notInclude(styles, `.${sheet.blue._name} {`);
+            assert.match(styles, /color: green/);
+            assert.notMatch(styles, /color: red/);
+            assert.notMatch(styles, /color: blue/);
         });
     });
 });
@@ -342,7 +344,7 @@ describe('String handlers', () => {
 
     function assertStylesInclude(str) {
         const styleTags = global.document.getElementsByTagName("style");
-        const styles = styleTags[0].textContent;
+        const styles = getSheetText(styleTags[0].sheet);
 
         assert.include(styles, str);
     }
@@ -359,7 +361,7 @@ describe('String handlers', () => {
             css(sheet.base);
             flushToStyleTag();
 
-            assertStylesInclude('font-family:Helvetica !important');
+            assertStylesInclude('font-family: Helvetica !important');
         });
 
         it('concatenates arrays', () => {
@@ -373,7 +375,7 @@ describe('String handlers', () => {
             css(sheet.base);
             flushToStyleTag();
 
-            assertStylesInclude('font-family:Helvetica,sans-serif !important');
+            assertStylesInclude('font-family: Helvetica,sans-serif !important');
         });
 
         it('adds @font-face rules for objects', () => {
@@ -392,9 +394,9 @@ describe('String handlers', () => {
             css(sheet.base);
             flushToStyleTag();
 
-            assertStylesInclude('font-family:"CoolFont",sans-serif !important');
-            assertStylesInclude('font-family:CoolFont;');
-            assertStylesInclude("src:url('coolfont.ttf');");
+            assertStylesInclude('font-family: "CoolFont",sans-serif !important');
+            assertStylesInclude('font-family: CoolFont;');
+            assertStylesInclude("src: url('coolfont.ttf');");
         });
     });
 
@@ -410,7 +412,7 @@ describe('String handlers', () => {
             css(sheet.animate);
             flushToStyleTag();
 
-            assertStylesInclude('animation-name:boo !important');
+            assertStylesInclude('animation-name: boo !important');
         });
 
         it('generates css for keyframes', () => {
@@ -435,10 +437,10 @@ describe('String handlers', () => {
             flushToStyleTag();
 
             assertStylesInclude('@keyframes keyframe_tmjr6');
-            assertStylesInclude('from{left:10px;}');
-            assertStylesInclude('50%{left:20px;}');
-            assertStylesInclude('to{left:40px;}');
-            assertStylesInclude('animation-name:keyframe_tmjr6');
+            assertStylesInclude('from {left: 10px;}');
+            assertStylesInclude('50% {left: 20px;}');
+            assertStylesInclude('to {left: 40px;}');
+            assertStylesInclude('animation-name: keyframe_tmjr6');
         });
 
         it('generates css for keyframes with multiple properties', () => {
@@ -462,9 +464,9 @@ describe('String handlers', () => {
             flushToStyleTag();
 
             assertStylesInclude('@keyframes keyframe_d35t13');
-            assertStylesInclude('0%{opacity:0;-webkit-transform:scale(0.75) translate3d(1px, 2px, 0);-ms-transform:scale(0.75) translate3d(1px, 2px, 0);transform:scale(0.75) translate3d(1px, 2px, 0);}');
-            assertStylesInclude('100%{opacity:1;-webkit-transform:scale(1) translate3d(1px, 2px, 0);-ms-transform:scale(1) translate3d(1px, 2px, 0);transform:scale(1) translate3d(1px, 2px, 0);}');
-            assertStylesInclude('animation-name:keyframe_d35t13');
+            assertStylesInclude('0% {opacity: 0; -webkit-transform: scale(0.75) translate3d(1px,2px,0); -ms-transform: scale(0.75) translate3d(1px,2px,0); transform: scale(0.75) translate3d(1px,2px,0);}');
+            assertStylesInclude('100% {opacity: 1; -webkit-transform: scale(1) translate3d(1px,2px,0); -ms-transform: scale(1) translate3d(1px,2px,0); transform: scale(1) translate3d(1px,2px,0);}');
+            assertStylesInclude('animation-name: keyframe_d35t13');
         });
 
         it('doesn\'t add the same keyframes twice', () => {
@@ -495,7 +497,7 @@ describe('String handlers', () => {
             flushToStyleTag();
 
             const styleTags = global.document.getElementsByTagName("style");
-            const styles = styleTags[0].textContent;
+            const styles = getSheetText(styleTags[0].sheet);
 
             assert.include(styles, '@keyframes keyframe_tmjr6');
             assert.equal(styles.match(/@keyframes/g).length, 1);
@@ -532,7 +534,7 @@ describe('String handlers', () => {
 
             assertStylesInclude('@keyframes keyframe_1a8sduu');
             assertStylesInclude('@keyframes keyframe_1wnshbu');
-            assertStylesInclude('animation-name:keyframe_1a8sduu,keyframe_1wnshbu')
+            assertStylesInclude('animation-name: keyframe_1a8sduu,keyframe_1wnshbu')
         });
 
         it('concatenates a custom keyframe animation with a plain string', () => {
@@ -556,7 +558,7 @@ describe('String handlers', () => {
             flushToStyleTag();
 
             assertStylesInclude('@keyframes keyframe_1a8sduu');
-            assertStylesInclude('animation-name:keyframe_1a8sduu,hoo')
+            assertStylesInclude('animation-name: keyframe_1a8sduu,hoo')
         });
     });
 });
diff --git a/tests/no-important_test.js b/tests/no-important_test.js
index 33811d7..4cdadd6 100644
--- a/tests/no-important_test.js
+++ b/tests/no-important_test.js
@@ -7,6 +7,7 @@ import {
   css
 } from '../src/no-important.js';
 import { reset } from '../src/inject.js';
+import { getSheetText } from './testUtils.js';
 
 describe('css', () => {
     beforeEach(() => {
@@ -31,10 +32,11 @@ describe('css', () => {
         asap(() => {
             const styleTags = global.document.getElementsByTagName("style");
             const lastTag = styleTags[styleTags.length - 1];
+            const styles = getSheetText(lastTag.sheet);
 
-            assert.include(lastTag.textContent, `${sheet.red._name}{`);
-            assert.match(lastTag.textContent, /color:red/);
-            assert.notMatch(lastTag.textContent, /!important/);
+            assert.include(styles, `${sheet.red._name} {`);
+            assert.match(styles, /color: red/);
+            assert.notMatch(styles, /!important/);
             done();
         });
     });
diff --git a/tests/testUtils.js b/tests/testUtils.js
new file mode 100644
index 0000000..d5e12cc
--- /dev/null
+++ b/tests/testUtils.js
@@ -0,0 +1,7 @@
+export const getSheetText = (sheet) => {
+    let allRules = '';
+    for (let i = 0; i < sheet.cssRules.length; i ++) {
+        allRules += sheet.cssRules[i].cssText + ' ';
+    }
+    return allRules;
+};