mermaid - npm Package Compare versions

Comparing version 7.0.14 to 7.0.15

package.json

 {
   "name": "mermaid",
-  "version": "7.0.14",
+  "version": "7.0.15",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
@@ -65,2 +65,3 @@ "main": "dist/mermaid.core.js",
     "css-loader": "^0.28.7",
+    "css-to-string-loader": "^0.1.3",
     "extract-text-webpack-plugin": "^3.0.0",
@@ -78,2 +79,3 @@ "gulp": "^3.9.1",
     "karma-jasmine": "^1.1.0",
+    "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.4",
@@ -83,2 +85,3 @@ "less": "^2.7.2",
     "phantomjs-prebuilt": "^2.1.15",
+    "puppeteer": "^0.10.2",
     "rimraf": "^2.6.1",
@@ -85,0 +88,0 @@ "standard": "^10.0.3",

src/mermaidAPI.js

@@ -38,2 +38,4 @@ /**
 
+import forestStyle from './less/forest/mermaid.less'
+
 /**
@@ -60,6 +62,2 @@ * ## Configuration
   logLevel: 5,
-  /**
-   * **cloneCssStyles** - This options controls whether or not the css rules should be copied into the generated svg
-   */
-  cloneCssStyles: true,
 
@@ -216,3 +214,2 @@ /**
     axisFormatter: [
-
       // Within a day
@@ -394,3 +391,2 @@ ['%I:%M', function (d) {
   var graphType = utils.detectType(txt)
-  var classes = {}
   switch (graphType) {
@@ -406,6 +402,2 @@ case 'gitGraph':
       flowRenderer.draw(txt, id, false)
-      if (config.cloneCssStyles) {
-        classes = flowRenderer.getClasses(txt, false)
-        utils.cloneCssStyles(element.firstChild, classes)
-      }
       break
@@ -416,6 +408,2 @@ case 'dotGraph':
       flowRenderer.draw(txt, id, true)
-      if (config.cloneCssStyles) {
-        classes = flowRenderer.getClasses(txt, true)
-        utils.cloneCssStyles(element.firstChild, classes)
-      }
       break
@@ -426,5 +414,2 @@ case 'sequenceDiagram':
       seq.draw(txt, id)
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
       break
@@ -435,5 +420,2 @@ case 'gantt':
       gantt.draw(txt, id)
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
       break
@@ -444,5 +426,2 @@ case 'classDiagram':
       classRenderer.draw(txt, id)
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
       break
@@ -452,8 +431,11 @@ case 'info':
       info.draw(txt, id, version())
-      if (config.cloneCssStyles) {
-        utils.cloneCssStyles(element.firstChild, [])
-      }
       break
   }
 
+  // insert inline style into svg
+  const svg = element.firstChild
+  const s = document.createElement('style')
+  s.innerHTML = forestStyle
+  svg.insertBefore(s, svg.firstChild)
+
   d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml')
@@ -460,0 +442,0 @@

src/mermaidAPI.spec.js

@@ -36,3 +36,2 @@ /* eslint-env jasmine */
       expect(config.testObject.test3).toBe(true)
-      expect(config.cloneCssStyles).toBe(orgConfig.cloneCssStyles)
     })
@@ -39,0 +38,0 @@ })

src/utils.js

@@ -51,81 +51,2 @@ import { logger } from './logger'
 /**
- * Copies all relevant CSS content into the graph SVG.
- * This allows the SVG to be copied as is while keeping class based styling
- * @param {element} svg The root element of the SVG
- * @param {object} Hash table of class definitions from the graph definition
- */
-export const cloneCssStyles = function (svg, classes) {
-  let usedStyles = ''
-  const sheets = document.styleSheets
-  let rule
-  for (let i = 0; i < sheets.length; i++) {
-    // Avoid multiple inclusion on pages with multiple graphs
-    if (sheets[i].title !== 'mermaid-svg-internal-css') {
-      try {
-        const rules = sheets[i].cssRules
-        if (rules !== null) {
-          for (let j = 0; j < rules.length; j++) {
-            rule = rules[j]
-            if (typeof (rule.style) !== 'undefined') {
-              const elems = svg.querySelectorAll(rule.selectorText)
-              if (elems.length > 0) {
-                usedStyles += rule.selectorText + ' { ' + rule.style.cssText + '}\n'
-              }
-            }
-          }
-        }
-      } catch (err) {
-        if (typeof (rule) !== 'undefined') {
-          logger.warn('Invalid CSS selector "' + rule.selectorText + '"', err)
-        }
-      }
-    }
-  }
-
-  let defaultStyles = ''
-  let embeddedStyles = ''
-  for (const className in classes) {
-    if (classes.hasOwnProperty(className) && typeof (className) !== 'undefined') {
-      if (className === 'default') {
-        if (classes.default.styles instanceof Array) {
-          defaultStyles += '#' + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join('; ') + '; }\n'
-        }
-        if (classes.default.nodeLabelStyles instanceof Array) {
-          defaultStyles += '#' + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join('; ') + '; }\n'
-        }
-        if (classes.default.edgeLabelStyles instanceof Array) {
-          defaultStyles += '#' + svg.id.trim() + ' .edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join('; ') + '; }\n'
-        }
-        if (classes.default.clusterStyles instanceof Array) {
-          defaultStyles += '#' + svg.id.trim() + ' .cluster rect ' + ' { ' + classes[className].clusterStyles.join('; ') + '; }\n'
-        }
-      } else {
-        if (classes[className].styles instanceof Array) {
-          embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>circle, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n'
-        }
-      }
-    }
-  }
-
-  if (usedStyles !== '' || defaultStyles !== '' || embeddedStyles !== '') {
-    const s = document.createElement('style')
-    s.setAttribute('type', 'text/css')
-    s.setAttribute('title', 'mermaid-svg-internal-css')
-    s.innerHTML = '/* <![CDATA[ */\n'
-    // Make this CSS local to this SVG
-    if (defaultStyles !== '') {
-      s.innerHTML += defaultStyles
-    }
-    if (usedStyles !== '') {
-      s.innerHTML += usedStyles
-    }
-    if (embeddedStyles !== '') {
-      s.innerHTML += embeddedStyles
-    }
-    s.innerHTML += '/* ]]> */\n'
-    svg.insertBefore(s, svg.firstChild)
-  }
-}
-
-/**
  * @function isSubstringInArray
@@ -146,4 +67,3 @@ * Detects whether a substring in present in a given array
   detectType,
-  cloneCssStyles,
   isSubstringInArray
 }

src/utils.spec.js

@@ -33,158 +33,2 @@ /* eslint-env jasmine */
 
-describe('when cloning CSS ', function () {
-  beforeEach(function () {
-    document.body.innerHTML = ''
-  })
-
-  function stylesToArray (svg) {
-    var styleSheets = svg.getElementsByTagName('style')
-    expect(styleSheets.length).toBe(1)
-    var styleSheet = styleSheets[0]
-
-    var innerStyle = styleSheet.innerHTML
-    var styleArr = innerStyle.split('\n')
-
-    // Remove first and last two lines to remove the CDATA
-    expect(styleArr.length).toBeGreaterThan(2)
-    var styleArrTrim = styleArr.slice(1, -2)
-
-    // Remove all empty lines
-    for (var i = 0; i < styleArrTrim.length; i++) {
-      if (styleArrTrim[i].trim() === '') {
-        styleArrTrim.splice(i, 1)
-        i--
-      }
-      styleArrTrim[i] = styleArrTrim[i].trim()
-    }
-
-    return styleArrTrim
-  }
-
-  function addStyleToDocument () {
-    var s = document.createElement('style')
-    s.innerHTML = '.node { stroke:rgb(238, 238, 238); }\n.node-square { stroke:rgb(187, 187, 187); }\n'
-    document.body.appendChild(s)
-  }
-
-  function addSecondStyleToDocument () {
-    var s = document.createElement('style')
-    s.innerHTML = '.node2 { stroke:rgb(238, 238, 238); }\n.node-square { stroke:#beb; }\n'
-    document.body.appendChild(s)
-  }
-
-  function generateSVG () {
-    var svg = document.createElement('svg')
-    svg.setAttribute('id', 'mermaid-01')
-    var g1 = document.createElement('g')
-    g1.setAttribute('class', 'node')
-    svg.appendChild(g1)
-    var g2 = document.createElement('g')
-    g2.setAttribute('class', 'node-square')
-    svg.appendChild(g2)
-    return svg
-  }
-
-  function addMermaidSVGwithStyleToDocument () {
-    var svg = document.createElement('svg')
-    svg.setAttribute('id', 'mermaid-03')
-    var s = document.createElement('style')
-    s.setAttribute('type', 'text/css')
-    s.setAttribute('title', 'mermaid-svg-internal-css')
-    s.innerHTML = '#mermaid-05 .node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n'
-    s.title = 'mermaid-svg-internal-css'
-    svg.appendChild(s)
-    document.body.appendChild(svg)
-  }
-
-  it('should handle errors thrown when accessing CSS rules', function () {
-    var svg = document.createElement('svg')
-    svg.setAttribute('id', 'mermaid-01')
-
-    // Firefox throws a SecurityError when trying to access cssRules
-    document.styleSheets[document.styleSheets.length] = {
-      get cssRules () { throw new Error('SecurityError') }
-    }
-
-    expect(function () {
-      utils.cloneCssStyles(svg, {})
-    }).not.toThrow()
-  })
-
-  it('should handle an empty set of classes', function () {
-    var svg = document.createElement('svg')
-    svg.setAttribute('id', 'mermaid-01')
-
-    utils.cloneCssStyles(svg, {})
-    // Should not create style element if not needed
-    expect(svg.innerHTML).toBe('')
-  })
-
-  it('should handle a default class', function () {
-    var svg = document.createElement('svg')
-    svg.setAttribute('id', 'mermaid-01')
-
-    utils.cloneCssStyles(svg, { 'default': { 'styles': ['stroke:#fff', 'stroke-width:1.5px'] } })
-    expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }'])
-    // Also verify the elements around the styling
-    expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>')
-  })
-
-  it('should handle stylesheet in document with no classes in SVG', function () {
-    var svg = document.createElement('svg')
-    svg.setAttribute('id', 'mermaid-01')
-
-    addStyleToDocument('mermaid')
-    utils.cloneCssStyles(svg, {})
-    // Should not create style element if not needed
-    expect(svg.innerHTML).toBe('')
-  })
-
-  it('should handle stylesheet in document with classes in SVG', function () {
-    var svg = generateSVG()
-    addStyleToDocument()
-    utils.cloneCssStyles(svg, {})
-    expect(stylesToArray(svg)).toEqual(['.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}'])
-  })
-
-  it('should handle multiple stylesheets in document with classes in SVG', function () {
-    var svg = generateSVG()
-    addStyleToDocument()
-    addSecondStyleToDocument()
-    utils.cloneCssStyles(svg, {})
-    expect(stylesToArray(svg)).toEqual(['.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}', '.node-square { stroke: rgb(187, 238, 187);}'])
-  })
-
-  it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () {
-    var svg = generateSVG()
-    addStyleToDocument()
-    addSecondStyleToDocument()
-    addMermaidSVGwithStyleToDocument()
-    utils.cloneCssStyles(svg, {})
-    expect(stylesToArray(svg)).toEqual(['.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}', '.node-square { stroke: rgb(187, 238, 187);}'])
-  })
-
-  it('should handle a default class together with stylesheet in document with classes in SVG', function () {
-    var svg = generateSVG()
-    addStyleToDocument()
-    utils.cloneCssStyles(svg, { 'default': { 'styles': ['stroke:#ffffff', 'stroke-width:1.5px'] } })
-    expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }', '.node { stroke: rgb(238, 238, 238);}', '.node-square { stroke: rgb(187, 187, 187);}'])
-  })
-
-  it('should handle a default class together with stylesheet in document and classDefs', function () {
-    var svg = generateSVG()
-    addStyleToDocument()
-    utils.cloneCssStyles(svg, {
-      'default': { 'styles': ['stroke:#ffffff', 'stroke-width:1.5px'] },
-      'node-square': { 'styles': ['fill:rgb(238, 238, 238)', 'stroke:#aaaaaa'] },
-      'node-circle': { 'styles': ['fill:#444444', 'stroke:#111111'] }
-    })
-    expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }',
-      '.node { stroke: rgb(238, 238, 238);}',
-      '.node-square { stroke: rgb(187, 187, 187);}',
-      '#mermaid-01 .node-square>rect, .node-square>polygon, .node-square>circle, .node-square>ellipse { fill:rgb(238, 238, 238); stroke:#aaaaaa; }',
-      '#mermaid-01 .node-circle>rect, .node-circle>polygon, .node-circle>circle, .node-circle>ellipse { fill:#444444; stroke:#111111; }'
-    ])
-  })
-})
-
 describe('when finding substring in array ', function () {
@@ -191,0 +35,0 @@ it('should return the array index that contains the substring', function () {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

4102449

decreased by-0.79%

Dev dependency count

33

increased by10%

Number of package files

82

decreased by-8.89%

Lines of code

86490

decreased by-1.83%

Number of low supply chain risk alerts

11

increased by10%

No dependency changes