From 0748b8f931ec1477d36fc4814d695867d10360f6 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Tue, 8 Jan 2019 12:26:57 -0800
Subject: [PATCH] Add ability to add a suffix to the style tag name to prevent
 multiple instances colliding.

---
 src/exports.js      |  2 ++
 src/index.js        |  2 ++
 src/inject.js       | 11 +++++++++--
 src/no-important.js |  2 ++
 tests/index_test.js | 33 ++++++++++++++++++++++++++++++++-
 5 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/exports.js b/src/exports.js
index b86f3d3..fb88fbb 100644
--- a/src/exports.js
+++ b/src/exports.js
@@ -9,6 +9,7 @@ import {
     addRenderedClassNames,
     getRenderedClassNames,
     getBufferedStyles,
+    setStyleTagSuffix,
 } from './inject';
 import {defaultSelectorHandlers} from './generate';
 
@@ -188,5 +189,6 @@ export default function makeExports(
         flushToStyleTag,
         injectAndGetClassName,
         defaultSelectorHandlers,
+        setStyleTagSuffix,
     };
 }
diff --git a/src/index.js b/src/index.js
index 78c35bf..6bcdf67 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,6 +13,7 @@ const {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    setStyleTagSuffix,
 } = Aphrodite;
 
 export {
@@ -24,4 +25,5 @@ export {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    setStyleTagSuffix,
 };
diff --git a/src/inject.js b/src/inject.js
index c5c85d9..4dff2a5 100644
--- a/src/inject.js
+++ b/src/inject.js
@@ -16,6 +16,12 @@ import type { SelectorHandler } from './generate.js';
 // `document.querySelector("style[data-aphrodite"])`, but holding onto it is
 // faster.
 let styleTag /* : ?HTMLStyleElement */ = null;
+let styleTagSuffix = '';
+const styleTagAttribute = () => `data-aphrodite${styleTagSuffix ? '-' + styleTagSuffix : ''}`;
+
+export const setStyleTagSuffix = suffix => {
+    styleTagSuffix = suffix;
+};
 
 // 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
@@ -25,7 +31,7 @@ let styleTag /* : ?HTMLStyleElement */ = null;
 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]") /* : any */) /* : ?HTMLStyleElement */);
+        styleTag = ((document.querySelector(`style[${styleTagAttribute()}]`) /* : any */) /* : ?HTMLStyleElement */);
 
         // If that doesn't work, generate a new style tag.
         if (styleTag == null) {
@@ -35,7 +41,7 @@ const injectStyleTag = (cssRules /* : string[] */) => {
             styleTag = document.createElement('style');
 
             styleTag.type = 'text/css';
-            styleTag.setAttribute("data-aphrodite", "");
+            styleTag.setAttribute(`${styleTagAttribute()}`, "");
             head.appendChild(styleTag);
         }
     }
@@ -201,6 +207,7 @@ export const reset = () => {
     alreadyInjected = {};
     isBuffering = false;
     styleTag = null;
+    styleTagSuffix = '';
 };
 
 export const getBufferedStyles = () => {
diff --git a/src/no-important.js b/src/no-important.js
index 7b2fe5a..60e161d 100644
--- a/src/no-important.js
+++ b/src/no-important.js
@@ -17,6 +17,7 @@ const {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    setStyleTagSuffix,
 } = Aphrodite;
 
 export {
@@ -28,4 +29,5 @@ export {
     flushToStyleTag,
     injectAndGetClassName,
     defaultSelectorHandlers,
+    setStyleTagSuffix,
 };
diff --git a/tests/index_test.js b/tests/index_test.js
index 4a49202..1e0a82d 100644
--- a/tests/index_test.js
+++ b/tests/index_test.js
@@ -9,7 +9,7 @@ import {
   minify,
   css
 } from '../src/index.js';
-import { reset } from '../src/inject.js';
+import { reset, setStyleTagSuffix } from '../src/inject.js';
 import { getSheetText } from './testUtils.js';
 
 describe('css', () => {
@@ -143,6 +143,37 @@ describe('css', () => {
             done();
         });
     });
+
+    it('automatically uses a style tag with the data-aphrodite-<suffix> attribute if suffix is set', done => {
+        const suffix = 'testing';
+        const style = document.createElement("style");
+        style.setAttribute(`data-aphrodite-${suffix}`, "");
+        document.head.appendChild(style);
+
+        setStyleTagSuffix(suffix);
+
+        const sheet = StyleSheet.create({
+            red: {
+                color: 'red',
+            },
+            blue: {
+                color: 'blue',
+            },
+        });
+
+        css(sheet.red);
+
+        asap(() => {
+            const styleTags = global.document.getElementsByTagName("style");
+            assert.equal(styleTags.length, 1);
+            const styles = getSheetText(styleTags[0].sheet);
+
+            assert.include(styles, `${sheet.red._name} {`);
+            assert.include(styles, 'color: red');
+
+            done();
+        });
+    });
 });
 
 describe('StyleSheet.create', () => {