Correct way to handle inline style

mermaid-js · Sep 12, 2017 · 72493b7 · 72493b7
1 parent 0a828ee
commit 72493b7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 70 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -5,7 +5,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Mermaid Quick Test Page</title>
   <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-  <link rel="stylesheet" href="./themes/mermaid.forest.css">
 </head>
 <body>
   <div class="mermaid">

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -35,6 +35,8 @@ import gitGraphAst from './diagrams/gitGraph/gitGraphAst'
 import d3 from './d3'
 import pkg from '../package.json'
 
+import forestStyle from './less/forest/mermaid.less'
+
 /**
  * ## Configuration
  * These are the default options which can be overridden with the initialization call as in the example below:
@@ -388,7 +390,7 @@ var render = function (id, txt, cb, container) {
 
   var element = d3.select('#d' + id).node()
   var graphType = utils.detectType(txt)
-  var classes = {}
+  // var classes = {}
   switch (graphType) {
     case 'gitGraph':
       config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
@@ -399,53 +401,61 @@ var render = function (id, txt, cb, container) {
       config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
       flowRenderer.setConf(config.flowchart)
       flowRenderer.draw(txt, id, false)
-      if (config.cloneCssStyles) {
-        classes = flowRenderer.getClasses(txt, false)
-        utils.cloneCssStyles(element.firstChild, classes)
-      }
+      // if (config.cloneCssStyles) {
+      //   classes = flowRenderer.getClasses(txt, false)
+      //   utils.cloneCssStyles(element.firstChild, classes)
+      // }
       break
     case 'dotGraph':
       config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
       flowRenderer.setConf(config.flowchart)
       flowRenderer.draw(txt, id, true)
-      if (config.cloneCssStyles) {
-        classes = flowRenderer.getClasses(txt, true)
-        utils.cloneCssStyles(element.firstChild, classes)
-      }
+      // if (config.cloneCssStyles) {
+      //   classes = flowRenderer.getClasses(txt, true)
+      //   utils.cloneCssStyles(element.firstChild, classes)
+      // }
       break
     case 'sequenceDiagram':
       config.sequenceDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute
       seq.setConf(config.sequenceDiagram)
       seq.draw(txt, id)
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
+      // if (config.cloneCssStyles) {
+      //   utils.cloneCssStyles(element.firstChild, [])
+      // }
       break
     case 'gantt':
       config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute
       gantt.setConf(config.gantt)
       gantt.draw(txt, id)
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
+      // if (config.cloneCssStyles) {
+      //   utils.cloneCssStyles(element.firstChild, [])
+      // }
       break
     case 'classDiagram':
       config.classDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute
       classRenderer.setConf(config.classDiagram)
       classRenderer.draw(txt, id)
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
+      // if (config.cloneCssStyles) {
+      //   utils.cloneCssStyles(element.firstChild, [])
+      // }
       break
     case 'info':
       config.info.arrowMarkerAbsolute = config.arrowMarkerAbsolute
       info.draw(txt, id, version())
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
+      // if (config.cloneCssStyles) {
+      //   utils.cloneCssStyles(element.firstChild, [])
+      // }
       break
   }
 
+  // insert inline style into svg
+  const svg = element.firstChild
+  const s = document.createElement('style')
+  // s.innerHTML = '/* <![CDATA[ */\n'
+  s.innerHTML = forestStyle
+  // s.innerHTML += '/* ]]> */\n'
+  svg.insertBefore(s, svg.firstChild)
+
   d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml')
 
   var url = ''

diff --git a/webpack.config.base.js b/webpack.config.base.js
@@ -1,5 +1,4 @@
 import path from 'path'
-import ExtractTextPlugin from 'extract-text-webpack-plugin'
 
 const lodashRule = {
   parser: {
@@ -26,7 +25,7 @@ const jsRule = {
   }
 }
 
-const styleRule = { // load less to string
+const lessRule = { // load less to string
   test: /\.less$/,
   use: [
     { loader: 'css-to-string-loader' },
@@ -35,17 +34,6 @@ const styleRule = { // load less to string
   ]
 }
 
-const lessRule = {
-  test: /\.less$/,
-  use: ExtractTextPlugin.extract({
-    fallback: 'style-loader',
-    use: [
-      { loader: 'css-loader' },
-      { loader: 'less-loader' }
-    ]
-  })
-}
-
 export const jsConfig = () => {
   return {
     target: 'web',
@@ -63,29 +51,7 @@ export const jsConfig = () => {
       libraryExport: 'default'
     },
     module: {
-      rules: [lodashRule, jsRule, styleRule]
+      rules: [lodashRule, jsRule, lessRule]
     }
   }
 }
-
-export const lessConfig = () => {
-  return {
-    target: 'web',
-    entry: {
-      'mermaid.default': './src/less/default/mermaid.less',
-      'mermaid.dark': './src/less/dark/mermaid.less',
-      'mermaid.forest': './src/less/forest/mermaid.less',
-      'mermaid.neutral': './src/less/neutral/mermaid.less'
-    },
-    output: {
-      path: path.join(__dirname, './dist/themes'),
-      filename: '[name].css'
-    },
-    module: {
-      rules: [lessRule]
-    },
-    plugins: [
-      new ExtractTextPlugin('[name].css')
-    ]
-  }
-}
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,13 +1,11 @@
 import nodeExternals from 'webpack-node-externals'
 
-import { jsConfig, lessConfig } from './webpack.config.base'
+import { jsConfig } from './webpack.config.base'
 
 const config = jsConfig()
 
 const coreConfig = jsConfig()
 coreConfig.externals = [nodeExternals()]
 coreConfig.output.filename = '[name].core.js'
 
-const cssConfig = lessConfig()
-
-export default [config, coreConfig, cssConfig]
+export default [config, coreConfig]
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -1,12 +1,6 @@
-import ExtractTextPlugin from 'extract-text-webpack-plugin'
-
-import { jsConfig, lessConfig } from './webpack.config.base'
+import { jsConfig } from './webpack.config.base'
 
 const minConfig = jsConfig()
 minConfig.output.filename = '[name].min.js'
 
-const cssMinConfig = lessConfig()
-cssMinConfig.output.filename = '[name].min.css'
-cssMinConfig.plugins = [ new ExtractTextPlugin('[name].min.css') ]
-
-export default [minConfig, cssMinConfig]
+export default [minConfig]