diff --git a/.eslintrc.json b/.eslintrc.json
index cda1d4a..52462e8 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -8,6 +8,7 @@
     "node": true
   },
   "rules": {
+    "indent": ["error", 4],
     "react/jsx-indent": [ 2, 4 ]
   }
 }
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
index b872134..23b2beb 100644
--- a/examples/webpack.config.js
+++ b/examples/webpack.config.js
@@ -1,16 +1,16 @@
 module.exports = {
-  output: {
-    path: __dirname + '/',
-    filename: 'bundle.js'
-  },
-  entry: [
-    './src/examples'
-  ],
-  module: {
-    loaders: [{
-      test: /\.js$/,
-      loaders: ['babel'],
-      exclude: /node_modules/
-    }]
-  }
+    output: {
+        path: __dirname + '/',
+        filename: 'bundle.js'
+    },
+    entry: [
+        './src/examples'
+    ],
+    module: {
+        loaders: [{
+            test: /\.js$/,
+            loaders: ['babel'],
+            exclude: /node_modules/
+        }]
+    }
 }
diff --git a/src/generate.js b/src/generate.js
index 6f259cf..4485415 100644
--- a/src/generate.js
+++ b/src/generate.js
@@ -1,8 +1,8 @@
 import prefixAll from 'inline-style-prefixer/static';
 
 import {
-    objectToPairs, kebabifyStyleName, recursiveMerge, stringifyValue,
-    importantify, flatten
+    prefixLocally, objectToPairs, kebabifyStyleName, recursiveMerge,
+    stringifyValue, importantify, flatten
 } from './util';
 /**
  * Generate CSS for a selector and some styles.
@@ -65,21 +65,32 @@ export const generateCSS = (selector, styleTypes, stringHandlers,
             declarations[key] = merged[key];
         }
     });
-
-    return (
-        generateCSSRuleset(selector, declarations, stringHandlers,
-            useImportant) +
-        Object.keys(pseudoStyles).map(pseudoSelector => {
-            return generateCSSRuleset(selector + pseudoSelector,
-                                      pseudoStyles[pseudoSelector],
-                                      stringHandlers, useImportant);
-        }).join("") +
-        Object.keys(mediaQueries).map(mediaQuery => {
-            const ruleset = generateCSS(selector, [mediaQueries[mediaQuery]],
-                stringHandlers, useImportant);
-            return `${mediaQuery}{${ruleset}}`;
-        }).join("")
-    );
+    const genericRules = generateCSSRuleset(selector, declarations, stringHandlers, useImportant);
+    const pseudoRules = Object.keys(pseudoStyles)
+      .reduce((reduction, pseudoSelector) => {
+          const ruleset = generateCSS(selector + pseudoSelector,
+        [pseudoStyles[pseudoSelector]],
+        stringHandlers, useImportant);
+          const safeSelectors = [':visited', ':focus', ':active', ':hover'];
+          const safeRuleset = safeSelectors.includes(pseudoSelector) ? ruleset :
+          ruleset.map(set => ({...set, isDangerous: true}));
+          reduction.push(...safeRuleset);
+          return reduction;
+      },[]);
+    const mediaRules = Object.keys(mediaQueries)
+      .reduce((reduction, mediaQuery) => {
+          const ruleset = generateCSS(selector, [mediaQueries[mediaQuery]],
+          stringHandlers, useImportant);
+          const wrappedRuleset = ruleset.map(set => {
+              return {
+                  ...set,
+                  rule: `${mediaQuery}{${set.rule}}`
+              }
+          });
+          reduction.push(...wrappedRuleset);
+          return reduction;
+      },[]);
+    return [...genericRules, ...pseudoRules, ...mediaRules];
 };
 
 /**
@@ -122,7 +133,7 @@ const runStringHandlers = (declarations, stringHandlers) => {
  *     that is output.
  * @param {bool} useImportant: A boolean saying whether to append "!important"
  *     to each of the CSS declarations.
- * @returns {string} A string of raw CSS.
+ * @returns {Array} Array with 0-to-1 objects: rule: A string of raw CSS, isDangerous: boolean
  *
  * Examples:
  *
@@ -140,45 +151,54 @@ export const generateCSSRuleset = (selector, declarations, stringHandlers,
     const handledDeclarations = runStringHandlers(
         declarations, stringHandlers);
 
-    const prefixedDeclarations = prefixAll(handledDeclarations);
-
-    const prefixedRules = flatten(
-        objectToPairs(prefixedDeclarations).map(([key, value]) => {
-            if (Array.isArray(value)) {
-                // inline-style-prefix-all returns an array when there should be
-                // multiple rules, we will flatten to single rules
-
-                const prefixedValues = [];
-                const unprefixedValues = [];
-
-                value.forEach(v => {
-                  if (v.indexOf('-') === 0) {
-                    prefixedValues.push(v);
-                  } else {
-                    unprefixedValues.push(v);
-                  }
-                });
-
-                prefixedValues.sort();
-                unprefixedValues.sort();
-
-                return prefixedValues
-                  .concat(unprefixedValues)
-                  .map(v => [key, v]);
-            }
-            return [[key, value]];
-        })
-    );
-
-    const rules = prefixedRules.map(([key, value]) => {
-        const stringValue = stringifyValue(key, value);
-        const ret = `${kebabifyStyleName(key)}:${stringValue};`;
-        return useImportant === false ? ret : importantify(ret);
-    }).join("");
-
-    if (rules) {
-        return `${selector}{${rules}}`;
+    let rules;
+    if (typeof window === 'undefined') {
+      // prefix all if we're on the server
+        const prefixedDeclarations = prefixAll(handledDeclarations);
+        const prefixedRules = flatten(
+            objectToPairs(prefixedDeclarations).map(([key, value]) => {
+                if (Array.isArray(value)) {
+                    // inline-style-prefix-all returns an array when there should be
+                    // multiple rules, we will flatten to single rules
+
+                    const prefixedValues = [];
+                    const unprefixedValues = [];
+
+                    value.forEach(v => {
+                        if (v.indexOf('-') === 0) {
+                            prefixedValues.push(v);
+                        } else {
+                            unprefixedValues.push(v);
+                        }
+                    });
+
+                    prefixedValues.sort();
+                    unprefixedValues.sort();
+
+                    return prefixedValues
+                      .concat(unprefixedValues)
+                      .map(v => [key, v]);
+                }
+                return [[key, value]];
+            })
+        );
+        const ruleString = prefixedRules.map(([key, value]) => {
+            const stringValue = stringifyValue(key, value);
+            const ret = `${kebabifyStyleName(key)}:${stringValue};`;
+            return useImportant === false ? ret : importantify(ret);
+        }).join("");
+        rules = {isDangerous: false, ruleString};
+    } else {
+        rules = prefixLocally(handledDeclarations, useImportant);
+    }
+    if (rules.ruleString) {
+        return [{
+        // make it easy to detect empty blocks later
+            rule: `${selector}{${rules.ruleString}}`,
+        // protect against pseudo elements like ::moz-input-placeholder
+            isDangerous: rules.isDangerous
+        }];
     } else {
-        return "";
+        return [];
     }
 };
diff --git a/src/index.js b/src/index.js
index 4bb0253..f289bca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,8 +30,8 @@ const StyleSheetServer = {
         reset();
         startBuffering();
         const html = renderFunc();
-        const cssContent = flushToString();
-
+        const cssRules = flushToString();
+        const cssContent = cssRules.map(c => c.rule).join('');
         return {
             html: html,
             css: {
diff --git a/src/inject.js b/src/inject.js
index f31d9d7..226829f 100644
--- a/src/inject.js
+++ b/src/inject.js
@@ -9,33 +9,46 @@ import {flattenDeep, hashObject} from './util';
 // faster.
 let styleTag = null;
 
+// This is the buffer of style rules which have not yet been flushed.
+const injectionBuffer = [];
+
+// externalized try/catch block allows the engine to optimize the caller
+const tryInsertRule = (rule) => {
+    try {
+        styleTag.sheet.insertRule(rule, styleTag.sheet.cssRules.length);
+    } catch(e) {
+      // user-defined vendor-prefixed styles go here
+    }
+
+};
 // Inject a string of styles 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) => {
-    if (styleTag == null) {
-        // Try to find a style tag with the `data-aphrodite` attribute first.
-        styleTag = document.querySelector("style[data-aphrodite]");
-
-        // If that doesn't work, generate a new style tag.
-        if (styleTag == null) {
-            // Taken from
-            // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
-            const head = document.head || document.getElementsByTagName('head')[0];
-            styleTag = document.createElement('style');
-
-            styleTag.type = 'text/css';
-            styleTag.setAttribute("data-aphrodite", "");
-            head.appendChild(styleTag);
+const injectStyleTag = (cssRules) => {
+    // Try to find a style tag with the `data-aphrodite` attribute first (SSR)
+    styleTag = styleTag || document.querySelector("style[data-aphrodite]");
+    if (styleTag) {
+        for (let i = 0; i < cssRules.length; i++) {
+            const {isDangerous, rule} = cssRules[i];
+            if (isDangerous) {
+                tryInsertRule(rule);
+            } else {
+                styleTag.sheet.insertRule(rule, styleTag.sheet.cssRules.length);
+            }
         }
-    }
-
-    if (styleTag.styleSheet) {
-        styleTag.styleSheet.cssText += cssContents;
     } else {
-        styleTag.appendChild(document.createTextNode(cssContents));
+      // If that doesn't work, generate a new style tag.
+      // Taken from
+      // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
+        const head = document.head || document.getElementsByTagName('head')[0];
+        styleTag = document.createElement('style');
+        styleTag.type = 'text/css';
+        styleTag.setAttribute("data-aphrodite", "");
+        const cssContent = cssRules.map(c => c.rule).join('');
+        styleTag.appendChild(document.createTextNode(cssContent));
+        head.appendChild(styleTag);
     }
 };
 
@@ -49,9 +62,11 @@ const stringHandlers = {
     fontFamily: function fontFamily(val) {
         if (Array.isArray(val)) {
             return val.map(fontFamily).join(",");
-        } else if (typeof val === "object") {
-            injectStyleOnce(val.src, "@font-face", [val], false);
-            return `"${val.fontFamily}"`;
+        } else if (val && typeof val === "object") {
+            const {fontFamily, fontStyle, fontWeight} = val;
+            const key = `${fontFamily}-${fontWeight || 400}${fontStyle}`;
+            injectStyleOnce(key, "@font-face", [val], false);
+            return `"${fontFamily}"`;
         } else {
             return val;
         }
@@ -87,28 +102,28 @@ const stringHandlers = {
         // TODO(emily): this probably makes debugging hard, allow a custom
         // name?
         const name = `keyframe_${hashObject(val)}`;
-
         // Since keyframes need 3 layers of nesting, we use `generateCSS` to
         // build the inner layers and wrap it in `@keyframes` ourselves.
-        let finalVal = `@keyframes ${name}{`;
-        Object.keys(val).forEach(key => {
-            finalVal += generateCSS(key, [val[key]], stringHandlers, false);
-        });
-        finalVal += '}';
-
-        injectGeneratedCSSOnce(name, finalVal);
+        let anyIsDangerous = false;
+        const rules = Object.keys(val).reduce((reduction,key) => {
+            const {isDangerous, rule} = generateCSS(key, [val[key]], stringHandlers, false)[0];
+            anyIsDangerous = anyIsDangerous || isDangerous;
+            return reduction + rule;
+        },'');
+        const finalVal = {
+            rule: `@keyframes ${name}{${rules}}`,
+            isDangerous: anyIsDangerous
+        };
+        injectGeneratedCSSOnce(name, [finalVal]);
 
         return name;
-    },
+    }
 };
 
 // This is a map from Aphrodite's generated class names to `true` (acting as a
 // set of class names)
 let alreadyInjected = {};
 
-// This is the buffer of styles which have not yet been flushed.
-let injectionBuffer = "";
-
 // 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
 // already be flushed, or because we are statically buffering on the server.
@@ -129,8 +144,7 @@ const injectGeneratedCSSOnce = (key, generatedCSS) => {
             isBuffering = true;
             asap(flushToStyleTag);
         }
-
-        injectionBuffer += generatedCSS;
+        injectionBuffer.push(...generatedCSS);
         alreadyInjected[key] = true;
     }
 }
@@ -145,7 +159,7 @@ export const injectStyleOnce = (key, selector, definitions, useImportant) => {
 };
 
 export const reset = () => {
-    injectionBuffer = "";
+    injectionBuffer.length = 0;
     alreadyInjected = {};
     isBuffering = false;
     styleTag = null;
@@ -161,15 +175,15 @@ export const startBuffering = () => {
 
 export const flushToString = () => {
     isBuffering = false;
-    const ret = injectionBuffer;
-    injectionBuffer = "";
+    const ret = injectionBuffer.slice();
+    injectionBuffer.length = 0;
     return ret;
 };
 
 export const flushToStyleTag = () => {
-    const cssContent = flushToString();
-    if (cssContent.length > 0) {
-        injectStyleTag(cssContent);
+    const cssRules = flushToString();
+    if (cssRules.length > 0) {
+        injectStyleTag(cssRules);
     }
 };
 
diff --git a/src/util.js b/src/util.js
index baa443d..6f5b860 100644
--- a/src/util.js
+++ b/src/util.js
@@ -98,7 +98,7 @@ var isUnitlessNumber = {
  * WebkitTransitionDuration
  */
 function prefixKey(prefix, key) {
-  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+    return prefix + key.charAt(0).toUpperCase() + key.substring(1);
 }
 
 /**
@@ -112,21 +112,15 @@ var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
 // infinite loop, because it iterates over the newly added props too.
 // Taken from React's CSSProperty.js
 Object.keys(isUnitlessNumber).forEach(function(prop) {
-  prefixes.forEach(function(prefix) {
-    isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
-  });
+    prefixes.forEach(function(prefix) {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+    });
 });
 
 export const stringifyValue = (key, prop) => {
-    if (typeof prop === "number") {
-        if (isUnitlessNumber[key]) {
-            return "" + prop;
-        } else {
-            return prop + "px";
-        }
-    } else {
-        return prop;
-    }
+    return (typeof prop !== "number" ||
+  isUnitlessNumber[key] ||
+  prop === 0) ? prop : `${prop}px`;
 };
 
 /**
@@ -197,3 +191,58 @@ export const importantify = (string) =>
     string.replace(
         IMPORTANT_RE,
         (_, base) => base + " !important;");
+
+const getBrowserProperties = () => {
+    if (!getBrowserProperties.availableStyles) {
+        getBrowserProperties.availableStyles = {};
+        const styles = Object.keys(window.getComputedStyle(document.documentElement, ''));
+        for (let i = 0; i < styles.length; i++) {
+            const style = styles[i];
+            if (isNaN(Number(style))) {
+                getBrowserProperties.availableStyles[style] = style;
+            }
+        }
+    }
+    return getBrowserProperties.availableStyles;
+};
+
+const stylePrefixes = ['Moz', 'webkit', 'ms', 'O'];
+const getVendorPrefix = (property) => {
+    const validProperties = getBrowserProperties();
+
+    const validatedProp = validProperties[property];
+    if (validatedProp) {
+        return validatedProp;
+    }
+    const capitalProp = property[0].toUpperCase() + property.substr(1);
+    for (let i = 0; i < stylePrefixes.length; i++) {
+        const prefix = stylePrefixes[i];
+        const prefixedProperty = `${prefix}${capitalProp}`;
+        if (validProperties[prefixedProperty]) {
+      // learn which styles the browser likes
+            validProperties[validatedProp] = prefixedProperty;
+            return prefixedProperty;
+        }
+    }
+  // swallow the prop (eg -moz-osx-font-smoothing)
+    return undefined;
+};
+
+export const prefixLocally = (declarations, useImportant) => {
+    const prefixedRules = [];
+    const properties = Object.keys(declarations);
+    let isDangerous = false;
+    for (let i = 0; i < properties.length; i++) {
+        const property = properties[i];
+        const value = declarations[property];
+        const stringValue = stringifyValue(property, value);
+        const prefixedProperty = getVendorPrefix(property);
+        if (!prefixedProperty) {
+            isDangerous = true;
+        }
+        const camelProp = prefixedProperty || property;
+        const ret = `${kebabifyStyleName(camelProp)}:${stringValue};`;
+        prefixedRules.push(useImportant === false ? ret : importantify(ret));
+    }
+    return {ruleString: prefixedRules.join(''), isDangerous}
+};
diff --git a/tests/generate_test.js b/tests/generate_test.js
index 2e129b3..77f013b 100644
--- a/tests/generate_test.js
+++ b/tests/generate_test.js
@@ -5,91 +5,127 @@ import {generateCSSRuleset, generateCSS} from '../src/generate';
 describe('generateCSSRuleset', () => {
     const assertCSSRuleset = (selector, declarations, expected) => {
         const actual = generateCSSRuleset(selector, declarations);
-        assert.equal(actual, expected.split('\n').map(x => x.trim()).join(''));
+        assert.deepEqual(actual, expected);
     };
     it('returns a CSS string for a single property', () => {
         assertCSSRuleset('.foo', {
             color: 'red'
-        }, '.foo{color:red !important;}');
+        }, [{isDangerous: false, rule: ".foo{color:red !important;}"}]);
     });
 
     it('returns a CSS string for multiple property', () => {
         assertCSSRuleset('.foo', {
             color: 'red',
             background: 'blue'
-        }, `.foo{
-            color:red !important;
-            background:blue !important;
-        }`);
+        }, [{
+            isDangerous: false,
+            rule: '.foo{color:red !important;background:blue !important;}'
+        }]);
     });
 
     it('converts camelCase to kebab-case', () => {
         assertCSSRuleset('.foo', {
             backgroundColor: 'red'
-        }, '.foo{background-color:red !important;}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{background-color:red !important;}'
+        }]);
     });
 
     it('prefixes vendor props with a dash', () => {
         assertCSSRuleset('.foo', {
             transition: 'none'
-        }, '.foo{transition:none !important;'+
-           '-webkit-transition:none !important;' +
-           '}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{transition:none !important;' +
+            '-webkit-transition:none !important;}'
+        }]);
     });
 
     it('converts ms prefix to -ms-', () => {
         assertCSSRuleset('.foo', {
             MsTransition: 'none'
-        }, '.foo{-ms-transition:none !important;}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{-ms-transition:none !important;}'
+        }]);
     });
 
-    it('returns an empty string if no props are set', () => {
-        assertCSSRuleset('.foo', {}, '');
+    it('returns an empty array if no props are set', () => {
+        assertCSSRuleset('.foo', {}, []);
     });
 
-    it('correctly adds px to number units', () => {
+    it('correctly adds px to non-0 number units', () => {
         assertCSSRuleset('.foo', {
             width: 10,
             zIndex: 5
-        }, '.foo{width:10px !important;z-index:5 !important;}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{width:10px !important;z-index:5 !important;}'
+        }]);
+    });
+
+    it('doesn\'t add px when the unit is 0', () => {
+        assertCSSRuleset('.foo', {
+            width: 0,
+            zIndex: 5
+        }, [{
+            isDangerous: false,
+            rule: '.foo{width:0 !important;z-index:5 !important;}'
+        }]);
     });
 
     it("doesn't break content strings which contain semicolons during importantify", () => {
         assertCSSRuleset('.foo', {
             content: '"foo;bar"'
-        }, '.foo{content:"foo;bar" !important;}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{content:"foo;bar" !important;}'
+        }]);
     });
 
     it("doesn't break quoted url() arguments during importantify", () => {
         assertCSSRuleset('.foo', {
             background: 'url("data:image/svg+xml;base64,myImage")'
-        }, '.foo{background:url("data:image/svg+xml;base64,myImage") !important;}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{background:url("data:image/svg+xml;base64,myImage") !important;}'
+        }]);
     });
 
     it("doesn't break unquoted url() arguments during importantify", () => {
         assertCSSRuleset('.foo', {
             background: 'url(data:image/svg+xml;base64,myImage)'
-        }, '.foo{background:url(data:image/svg+xml;base64,myImage) !important;}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{background:url(data:image/svg+xml;base64,myImage) !important;}'
+        }]);
     });
 
     it("doesn't importantify rules that are already !important", () => {
         assertCSSRuleset('.foo', {
             color: 'blue !important',
-        }, '.foo{color:blue !important;}');
+        }, [{
+            isDangerous: false,
+            rule: '.foo{color:blue !important;}'
+        }]);
     });
 });
 describe('generateCSS', () => {
     const assertCSS = (className, styleTypes, expected, stringHandlers,
-            useImportant) => {
+                       useImportant) => {
         const actual = generateCSS(className, styleTypes, stringHandlers,
             useImportant);
-        assert.equal(actual, expected.split('\n').map(x => x.trim()).join(''));
+        assert.deepEqual(actual, expected);
     };
 
     it('returns a CSS string for a single property', () => {
         assertCSS('.foo', [{
             color: 'red'
-        }], '.foo{color:red !important;}');
+        }], [{
+            isDangerous: false,
+            rule: '.foo{color:red !important;}'
+        }]);
     });
 
     it('implements override logic', () => {
@@ -97,7 +133,10 @@ describe('generateCSS', () => {
             color: 'red'
         }, {
             color: 'blue'
-        }], '.foo{color:blue !important;}');
+        }], [{
+            isDangerous: false,
+            rule: '.foo{color:blue !important;}'
+        }]);
     });
 
     it('supports pseudo selectors', () => {
@@ -105,17 +144,21 @@ describe('generateCSS', () => {
             ':hover': {
                 color: 'red'
             }
-        }], '.foo:hover{color:red !important;}');
+        }], [{
+            isDangerous: false,
+            rule: '.foo:hover{color:red !important;}'
+        }]);
     });
 
     it('supports media queries', () => {
         assertCSS('.foo', [{
             "@media (max-width: 400px)": {
-                    color: "blue"
+                color: "blue"
             }
-        }], `@media (max-width: 400px){
-            .foo{color:blue !important;}
-        }`);
+        }], [{
+            isDangerous: false,
+            rule: `@media (max-width: 400px){.foo{color:blue !important;}}`
+        }]);
     });
 
     it('supports pseudo selectors inside media queries', () => {
@@ -125,37 +168,57 @@ describe('generateCSS', () => {
                     color: "blue"
                 }
             }
-        }], `@media (max-width: 400px){
-            .foo:hover{color:blue !important;}
-        }`);
+        }], [{
+            isDangerous: false,
+            rule: '@media (max-width: 400px){.foo:hover{color:blue !important;}}'
+        }]);
     });
 
     it('supports custom string handlers', () => {
         assertCSS('.foo', [{
             fontFamily: ["Helvetica", "sans-serif"]
-        }], '.foo{font-family:Helvetica, sans-serif !important;}', {
-            fontFamily: (val) => val.join(", "),
-        });
+        }], [{
+            isDangerous: false,
+            rule: '.foo{font-family:Helvetica, sans-serif !important;}'
+        }], {fontFamily: (val) => val.join(", ")});
     });
 
     it('make it possible to disable !important', () => {
         assertCSS('@font-face', [{
             fontFamily: ["FontAwesome"],
             fontStyle: "normal",
-        }], '@font-face{font-family:FontAwesome;font-style:normal;}', {
-            fontFamily: (val) => val.join(", "),
-        }, false);
+        }], [{
+            isDangerous: false,
+            rule: '@font-face{font-family:FontAwesome;font-style:normal;}'
+        }], {fontFamily: (val) => val.join(", ")}, false);
     });
 
     it('adds browser prefixes', () => {
         assertCSS('.foo', [{
             display: 'flex',
-        }], '.foo{display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-box !important;display:-webkit-flex !important;display:flex !important;}');
+        }], [{
+            isDangerous: false,
+            rule: '.foo{display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-box !important;display:-webkit-flex !important;display:flex !important;}'
+        }]);
     });
-
     it('correctly prefixes border-color transition properties', () => {
-      assertCSS('.foo', [{
-        'transition': 'border-color 200ms linear'
-      }], '.foo{transition:border-color 200ms linear !important;-webkit-transition:border-color 200ms linear !important;}');
+        assertCSS('.foo', [{
+            'transition': 'border-color 200ms linear'
+        }], [{
+            isDangerous: false,
+            rule: '.foo{transition:border-color 200ms linear !important;-webkit-transition:border-color 200ms linear !important;}'
+        }]);
     });
+    it('supports pseudo elements inside pseudo selectors', () => {
+        assertCSS('.foo', [{
+            ':hover': {
+                '::-webkit-input-placeholder': {
+                    color: 'rebeccapurple'
+                }
+            }
+        }], [{
+            isDangerous: true,
+            rule: '.foo:hover::-webkit-input-placeholder{color:rebeccapurple !important;}'
+        }]);
+    })
 });
diff --git a/tests/index_test.js b/tests/index_test.js
index 7785bc6..acf3985 100644
--- a/tests/index_test.js
+++ b/tests/index_test.js
@@ -3,12 +3,12 @@ import {assert} from 'chai';
 import jsdom from 'jsdom';
 
 import {
-  StyleSheet,
-  StyleSheetServer,
-  StyleSheetTestUtils,
-  css
+    StyleSheet,
+    StyleSheetServer,
+    StyleSheetTestUtils,
+    css
 } from '../src/index.js';
-import { reset } from '../src/inject.js';
+import {reset} from '../src/inject.js';
 
 describe('css', () => {
     beforeEach(() => {
@@ -104,7 +104,6 @@ describe('css', () => {
             assert.equal(styleTags.length, 1);
 
             css(sheet.blue);
-
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
                 assert.equal(styleTags.length, 1);
@@ -128,14 +127,11 @@ describe('css', () => {
         });
 
         css(sheet.red);
-
         asap(() => {
             const styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 1);
-            const styles = styleTags[0].textContent;
-
-            assert.include(styles, `${sheet.red._name}{`);
-            assert.include(styles, 'color:red');
+            const styles = styleTags[0].sheet.cssRules[0].cssText;
+            assert.equal(styles, '.red_im3wl1 {color: red !important;}');
 
             done();
         });
diff --git a/tests/inject_test.js b/tests/inject_test.js
index 4f96f4e..991dfad 100644
--- a/tests/inject_test.js
+++ b/tests/inject_test.js
@@ -2,7 +2,8 @@ import asap from 'asap';
 import {assert} from 'chai';
 import jsdom from 'jsdom';
 
-import { StyleSheet, css } from '../src/index.js';
+import {StyleSheet, css} from '../src/index.js';
+import {css as cssNoImportant} from '../src/no-important.js';
 import {
     injectStyleOnce,
     reset, startBuffering, flushToString, flushToStyleTag,
@@ -36,7 +37,7 @@ describe('injection', () => {
 
     describe('injectStyleOnce', () => {
         it('causes styles to automatically be added', done => {
-            injectStyleOnce("x", ".x", [{ color: "red" }], false);
+            injectStyleOnce("x", ".x", [{color: "red"}], false);
 
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
@@ -51,12 +52,12 @@ describe('injection', () => {
         });
 
         it('causes styles to be added async, and buffered', done => {
-            injectStyleOnce("x", ".x", [{ color: "red" }], false);
+            injectStyleOnce("x", ".x", [{color: "red"}], false);
 
             const styleTags = global.document.getElementsByTagName("style");
             assert.equal(styleTags.length, 0);
 
-            injectStyleOnce("y", ".y", [{ color: "blue" }], false);
+            injectStyleOnce("y", ".y", [{color: "blue"}], false);
 
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
@@ -73,8 +74,8 @@ describe('injection', () => {
         });
 
         it('doesn\'t inject the same style twice', done => {
-            injectStyleOnce("x", ".x", [{ color: "red" }], false);
-            injectStyleOnce("x", ".x", [{ color: "blue" }], false);
+            injectStyleOnce("x", ".x", [{color: "red"}], false);
+            injectStyleOnce("x", ".x", [{color: "blue"}], false);
 
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
@@ -95,24 +96,22 @@ describe('injection', () => {
             global.document = undefined;
 
             assert.throws(() => {
-                injectStyleOnce("x", ".x", [{ color: "red" }], false);
+                injectStyleOnce("x", ".x", [{color: "red"}], false);
             }, "Cannot automatically buffer");
 
             global.document = oldDocument;
         });
 
         // browser-specific tests
-        it('adds to the .styleSheet.cssText if available', done => {
+        it('adds a rule if the stylesheet already exists', done => {
             const styleTag = global.document.createElement("style");
             styleTag.setAttribute("data-aphrodite", "");
             document.head.appendChild(styleTag);
-            styleTag.styleSheet = { cssText: "" };
 
-            injectStyleOnce("x", ".x", [{ color: "red" }], false);
+            injectStyleOnce("x", ".x", [{color: "red"}], false);
 
             asap(() => {
-                assert.include(styleTag.styleSheet.cssText, ".x{");
-                assert.include(styleTag.styleSheet.cssText, "color:red");
+                assert.equal(styleTag.sheet.cssRules[0].cssText, '.x {color: red;}');
                 done();
             });
         });
@@ -122,7 +121,7 @@ describe('injection', () => {
                 value: null,
             });
 
-            injectStyleOnce("x", ".x", [{ color: "red" }], false);
+            injectStyleOnce("x", ".x", [{color: "red"}], false);
 
             asap(() => {
                 const styleTags = global.document.getElementsByTagName("style");
@@ -170,7 +169,6 @@ describe('injection', () => {
 
             const styleTags = global.document.getElementsByTagName("style");
             const lastTag = styleTags[styleTags.length - 1];
-
             assert.include(lastTag.textContent, `.${sheet.red._name}{`);
             assert.include(lastTag.textContent, `.${sheet.blue._name}{`);
             assert.match(lastTag.textContent, /color:red/);
@@ -207,10 +205,8 @@ describe('injection', () => {
 
             const styles = flushToString();
 
-            assert.include(styles, `.${sheet.red._name}{`);
-            assert.include(styles, `.${sheet.blue._name}{`);
-            assert.match(styles, /color:red/);
-            assert.match(styles, /color:blue/);
+            assert.equal(styles[0].rule, '.red_im3wl1{color:red !important;}');
+            assert.equal(styles[1].rule, '.blue_hxfs3d{color:blue !important;}');
         });
 
         it('clears the injection buffer', () => {
@@ -411,3 +407,55 @@ describe('String handlers', () => {
         });
     });
 });
+
+describe('dangerous injections', () => {
+    beforeEach(() => {
+        global.document = jsdom.jsdom();
+        global.window = {
+            getComputedStyle: () => ({1: 'overflow', overflow: 'overflow', webkitUserSelect: 'webkitUserSelect'})
+        };
+        reset();
+    });
+
+    afterEach(() => {
+        global.document.close();
+        global.document = undefined;
+        global.window = undefined;
+    });
+
+    it('injects a dangerous style when a tag does not exist', (done) => {
+        const sheet = StyleSheet.create({
+            root: {
+                overflow: 'visible',
+                userSelect: 'none'
+            },
+        });
+
+        cssNoImportant(sheet.root);
+        asap(() => {
+            const styleTags = global.document.getElementsByTagName("style");
+            assert.equal(styleTags.length, 1);
+            const rule = styleTags[0].sheet.cssRules[0].cssText;
+            assert.equal(rule, '.root_15wj8v9 {overflow: visible; webkit-user-select: none;}');
+            done();
+        });
+    });
+    it('enters a dangerous rule when a tag does exist', done => {
+        const style = document.createElement("style");
+        style.setAttribute("data-aphrodite", "");
+        global.document.head.appendChild(style);
+        const sheet = StyleSheet.create({
+            root: {
+                boxSizing: 'border-box',
+            },
+        });
+        css(sheet.root);
+        asap(() => {
+            const styleTags = global.document.getElementsByTagName("style");
+            assert.equal(styleTags.length, 1);
+            const rule = styleTags[0].sheet.cssRules[0].cssText;
+            assert.equal(rule, '.root_1gwnft1 {box-sizing: border-box !important;}');
+            done();
+        });
+    });
+})
diff --git a/webpack.config.js b/webpack.config.js
index fa9fb87..eb3db3e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,17 +1,17 @@
 var path = require('path');
 
 module.exports = {
-  entry: [
-    './src/index'
-  ],
-  output: {
-    path: path.join(__dirname, 'dist')
-  },
-  module: {
-    loaders: [{
-      test: /\.js$/,
-      loaders: ['babel'],
-      include: path.join(__dirname, 'src')
-    }]
-  }
+    entry: [
+        './src/index'
+    ],
+    output: {
+        path: path.join(__dirname, 'dist')
+    },
+    module: {
+        loaders: [{
+            test: /\.js$/,
+            loaders: ['babel'],
+            include: path.join(__dirname, 'src')
+        }]
+    }
 }