From 72493b7a8b0edc45b53884b443d690a9e68d8e1a Mon Sep 17 00:00:00 2001 From: Tyler Long Date: Tue, 12 Sep 2017 22:06:19 +0800 Subject: [PATCH] Correct way to handle inline style --- dist/index.html | 1 - src/mermaidAPI.js | 52 +++++++++++++++++++++++++----------------- webpack.config.base.js | 38 ++---------------------------- webpack.config.js | 6 ++--- webpack.config.prod.js | 10 ++------ 5 files changed, 37 insertions(+), 70 deletions(-) diff --git a/dist/index.html b/dist/index.html index 32c6eb9141..2f9c9c031f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,7 +5,6 @@ Mermaid Quick Test Page -
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 06efb69c66..ed1c883159 100644 --- 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 = '/* */\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 index aa67b981c3..2a3b2ee30f 100644 --- 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 index 15e6e5d1aa..73faab7840 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,6 @@ import nodeExternals from 'webpack-node-externals' -import { jsConfig, lessConfig } from './webpack.config.base' +import { jsConfig } from './webpack.config.base' const config = jsConfig() @@ -8,6 +8,4 @@ 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 index 80914182a4..758a0de7e5 100644 --- 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]