Allow already injected to be reset (#380)

* Add resetInjected.

* Update types.

* Fix tests.

* Rename to resetInjectedStyle

* Update docs.

* Revert dist changes

* Add tests.

* Change word.

README.md

@@ -130,6 +130,24 @@ const styles = StyleSheet.create({
 });
 ```
 
+## Resetting Style Cache
+
+The `reset` function can be used to reset the HTML style tag, injection buffer, and injected cache. Useful when Aphrodite needs to be torn down and set back up.
+
+```js
+import { reset } from 'aphrodite';
+
+reset();
+```
+
+While the `resetInjectedStyle` function can be used to reset the injected cache for a single key (usually the class name).
+
+```js
+import { resetInjectedStyle } from 'aphrodite';
+
+resetInjectedStyle('class_1sAs8jg');
+```
+
 ## Server-side rendering
 
 To perform server-side rendering, make a call to `StyleSheetServer.renderStatic`, which takes a callback. Do your rendering inside of the callback and return the generated HTML. All of the calls to `css()` inside of the callback will be collected and the generated css as well as the generated HTML will be returned.

src/exports.js

@@ -3,6 +3,7 @@ import {hashString} from './util';
 import {
     injectAndGetClassName,
     reset,
+    resetInjectedStyle,
     startBuffering,
     flushToString,
     flushToStyleTag,
@@ -188,5 +189,7 @@ export default function makeExports(
         flushToStyleTag,
         injectAndGetClassName,
         defaultSelectorHandlers,
+        reset,
+        resetInjectedStyle,
     };
 }

src/index.js

@@ -13,6 +13,8 @@ const {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    reset,
+    resetInjectedStyle,
 } = Aphrodite;
 
 export {
@@ -24,4 +26,6 @@ export {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    reset,
+    resetInjectedStyle,
 };

src/inject.js

@@ -203,9 +203,13 @@ export const reset = () => {
     styleTag = null;
 };
 
+export const resetInjectedStyle = (key /* : string */) => {
+    delete alreadyInjected[key];
+};
+
 export const getBufferedStyles = () => {
     return injectionBuffer;
-}
+};
 
 export const startBuffering = () => {
     if (isBuffering) {
@@ -244,7 +248,7 @@ export const addRenderedClassNames = (classNames /* : string[] */) => {
 };
 
 const isValidStyleDefinition = (def /* : Object */) =>
-  "_definition" in def && "_name" in def && "_len" in def;
+    "_definition" in def && "_name" in def && "_len" in def;
 
 const processStyleDefinitions = (
     styleDefinitions /* : any[] */,

src/no-important.js

@@ -17,6 +17,8 @@ const {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    reset,
+    resetInjectedStyle,
 } = Aphrodite;
 
 export {
@@ -28,4 +30,6 @@ export {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    reset,
+    resetInjectedStyle,
 };

tests/inject_test.js

@@ -7,6 +7,7 @@ import {
     injectAndGetClassName,
     injectStyleOnce,
     reset,
+    resetInjectedStyle,
     startBuffering,
     flushToString,
     flushToStyleTag,
@@ -335,6 +336,37 @@ describe('injection', () => {
             assert.notMatch(styles, /color: blue/);
         });
     });
+
+    describe('resetInjectedStyle()', () => {
+        it('injects styles again after being reset', () => {
+            startBuffering();
+
+            css(sheet.red);
+
+            flushToStyleTag();
+
+            const styleTags = global.document.getElementsByTagName("style");
+            const lastTag = styleTags[styleTags.length - 1];
+
+            assert.equal(getSheetText(lastTag.sheet), `.${sheet.red._name} {color: red !important;} `);
+
+            // Delete all rules
+            while (lastTag.sheet.cssRules.length > 0) {
+                lastTag.sheet.deleteRule(0);
+            }
+
+            resetInjectedStyle(sheet.red._name);
+
+            assert.equal(getSheetText(lastTag.sheet), '');
+
+            // Re-inject
+            css(sheet.red);
+
+            flushToStyleTag();
+
+            assert.equal(getSheetText(lastTag.sheet), `.${sheet.red._name} {color: red !important;} `);
+        });
+    });
 });
 
 describe('String handlers', () => {

typings/index.d.ts

@@ -38,7 +38,7 @@ export interface StyleSheetStatic {
      * Rehydrate class names from server renderer
      */
     rehydrate(renderedClassNames: string[]): void;
-    
+
     extend(extensions: Extension[]): Exports;
 }
 
@@ -55,6 +55,12 @@ export function css(...styles: CSSInputTypes[]): string;
  */
 export function minify(shouldMinify: boolean): void;
 
+export function flushToStyleTag(): void;
+
+export function reset(): void;
+
+export function resetInjectedStyle(key: string): void;
+
 interface StaticRendererResult {
     html: string;
     css: {
@@ -118,4 +124,4 @@ interface Exports {
     StyleSheet: StyleSheetStatic;
     StyleSheetServer: StyleSheetServerStatic;
     StyleSheetTestUtils: StyleSheetTestUtilsStatic;
-}
+}