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]