From 2ed515091f7d45c29db5071c7b3ae8f272503e62 Mon Sep 17 00:00:00 2001
From: Tyler Long <tyler4long@gmail.com>
Date: Sun, 11 Mar 2018 21:36:59 +0800
Subject: [PATCH] Add id as css scope

---
 package.json            | 3 ++-
 src/mermaidAPI.js       | 3 ++-
 src/themes/mermaid.scss | 2 --
 yarn.lock               | 4 ++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 6d524cddf..36b7a2739 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
     "graphlibrary": "^2.2.0",
     "he": "^1.1.1",
     "lodash": "^4.17.5",
-    "moment": "^2.21.0"
+    "moment": "^2.21.0",
+    "scope-css": "^1.0.5"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 368cee3e7..f39869795 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -12,6 +12,7 @@
  * somewhere in the page or something completely different.
 */
 import * as d3 from 'd3'
+import scope from 'scope-css'
 
 import { logger, setLogLevel } from './logger'
 import graph from './diagrams/flowchart/graphDb'
@@ -438,7 +439,7 @@ const render = function (id, txt, cb, container) {
   // insert inline style into svg
   const svg = element.firstChild
   const s = document.createElement('style')
-  s.innerHTML = themes[config.theme] || defaultTheme
+  s.innerHTML = scope(themes[config.theme] || defaultTheme, `#${id}`)
   svg.insertBefore(s, svg.firstChild)
 
   d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml')
diff --git a/src/themes/mermaid.scss b/src/themes/mermaid.scss
index ba99c3883..177270f1f 100644
--- a/src/themes/mermaid.scss
+++ b/src/themes/mermaid.scss
@@ -1,4 +1,3 @@
-.mermaid {
   @import 'flow';
   @import 'sequenceDiagram';
   @import 'gantt';
@@ -23,4 +22,3 @@
     pointer-events: none;
     z-index: 100;
   }
-}
diff --git a/yarn.lock b/yarn.lock
index 7b6e5a474..3ee43a929 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7135,6 +7135,10 @@ schema-utils@^0.4.2:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
+scope-css@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/scope-css/-/scope-css-1.0.5.tgz#9a40a959231ecf683dbef3dedae6a26ab091e1fd"
+
 scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"