Error: The given CSS string was invalid: SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `color` property,SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `color` property. Copy the below CSS into https://jigsaw.w3.org/css-validator/validator to help debug where the invalid CSS is: Original CSS value was #my-svg-id{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@Keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@Keyframes dash{to{stroke-dashoffset:0;}}#my-svg-id .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#my-svg-id .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#my-svg-id .error-icon{fill:#552222;}#my-svg-id .error-text{fill:#552222;stroke:#552222;}#my-svg-id .edge-thickness-normal{stroke-width:1px;}#my-svg-id .edge-thickness-thick{stroke-width:3.5px;}#my-svg-id .edge-pattern-solid{stroke-dasharray:0;}#my-svg-id .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg-id .edge-pattern-dashed{stroke-dasharray:3;}#my-svg-id .edge-pattern-dotted{stroke-dasharray:2;}#my-svg-id .marker{fill:#333333;stroke:#333333;}#my-svg-id .marker.cross{stroke:#333333;}#my-svg-id svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg-id p{margin:0;}#my-svg-id .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg-id .cluster-label text{fill:calculated;}#my-svg-id .cluster-label span{color:calculated;}#my-svg-id .cluster-label span p{background-color:transparent;}#my-svg-id .label text,#my-svg-id span{fill:#333;color:#333;}#my-svg-id .node rect,#my-svg-id .node circle,#my-svg-id .node ellipse,#my-svg-id .node polygon,#my-svg-id .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg-id .rough-node .label text,#my-svg-id .node .label text,#my-svg-id .image-shape .label,#my-svg-id .icon-shape .label{text-anchor:middle;}#my-svg-id .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#my-svg-id .rough-node .label,#my-svg-id .node .label,#my-svg-id .image-shape .label,#my-svg-id .icon-shape .label{text-align:center;}#my-svg-id .node.clickable{cursor:pointer;}#my-svg-id .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#my-svg-id .arrowheadPath{fill:#333333;}#my-svg-id .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg-id .flowchart-link{stroke:#333333;fill:none;}#my-svg-id .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#my-svg-id .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#my-svg-id .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#my-svg-id .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg-id .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg-id .cluster text{fill:calculated;}#my-svg-id .cluster span{color:calculated;}#my-svg-id div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg-id .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg-id rect.text{fill:none;stroke-width:0;}#my-svg-id .icon-shape,#my-svg-id .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#my-svg-id .icon-shape p,#my-svg-id .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#my-svg-id .icon-shape rect,#my-svg-id .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);} ❯ checkValidStylisCSSStyleSheet packages/mermaid/src/styles.spec.ts:53:11 ❯ packages/mermaid/src/styles.spec.ts:114:11 ❯ fulfilled node_modules/.pnpm/@rollup+plugin-typescript@11.1.6_rollup@4.32.1_tslib@2.8.1_typescript@5.4.5/node_modules/tslib/tslib.es6.js:128:58

Error: The given CSS string was invalid: SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `fill` property. Copy the below CSS into https://jigsaw.w3.org/css-validator/validator to help debug where the invalid CSS is: Original CSS value was #my-svg-id{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@Keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@Keyframes dash{to{stroke-dashoffset:0;}}#my-svg-id .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#my-svg-id .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#my-svg-id .error-icon{fill:#552222;}#my-svg-id .error-text{fill:#552222;stroke:#552222;}#my-svg-id .edge-thickness-normal{stroke-width:1px;}#my-svg-id .edge-thickness-thick{stroke-width:3.5px;}#my-svg-id .edge-pattern-solid{stroke-dasharray:0;}#my-svg-id .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg-id .edge-pattern-dashed{stroke-dasharray:3;}#my-svg-id .edge-pattern-dotted{stroke-dasharray:2;}#my-svg-id .marker{fill:#333333;stroke:#333333;}#my-svg-id .marker.cross{stroke:#333333;}#my-svg-id svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg-id p{margin:0;}#my-svg-id .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#my-svg-id .exclude-range{fill:#eeeeee;}#my-svg-id .section{stroke:none;opacity:0.2;}#my-svg-id .section0{fill:rgba(102, 102, 255, 0.49);}#my-svg-id .section2{fill:#fff400;}#my-svg-id .section1,#my-svg-id .section3{fill:white;opacity:0.2;}#my-svg-id .sectionTitle0{fill:calculated;}#my-svg-id .sectionTitle1{fill:calculated;}#my-svg-id .sectionTitle2{fill:calculated;}#my-svg-id .sectionTitle3{fill:calculated;}#my-svg-id .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#my-svg-id .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#my-svg-id .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#my-svg-id .grid path{stroke-width:0;}#my-svg-id .today{fill:none;stroke:red;stroke-width:2px;}#my-svg-id .task{stroke-width:2;}#my-svg-id .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#my-svg-id .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#my-svg-id .taskTextOutsideLeft{fill:black;text-anchor:end;}#my-svg-id .task.clickable{cursor:pointer;}#my-svg-id .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#my-svg-id .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#my-svg-id .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#my-svg-id .taskText0,#my-svg-id .taskText1,#my-svg-id .taskText2,#my-svg-id .taskText3{fill:white;}#my-svg-id .task0,#my-svg-id .task1,#my-svg-id .task2,#my-svg-id .task3{fill:#8a90dd;stroke:#534fbc;}#my-svg-id .taskTextOutside0,#my-svg-id .taskTextOutside2{fill:black;}#my-svg-id .taskTextOutside1,#my-svg-id .taskTextOutside3{fill:black;}#my-svg-id .active0,#my-svg-id .active1,#my-svg-id .active2,#my-svg-id .active3{fill:#bfc7ff;stroke:#534fbc;}#my-svg-id .activeText0,#my-svg-id .activeText1,#my-svg-id .activeText2,#my-svg-id .activeText3{fill:black!important;}#my-svg-id .done0,#my-svg-id .done1,#my-svg-id .done2,#my-svg-id .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#my-svg-id .doneText0,#my-svg-id .doneText1,#my-svg-id .doneText2,#my-svg-id .doneText3{fill:black!important;}#my-svg-id .crit0,#my-svg-id .crit1,#my-svg-id .crit2,#my-svg-id .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#my-svg-id .activeCrit0,#my-svg-id .activeCrit1,#my-svg-id .activeCrit2,#my-svg-id .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#my-svg-id .doneCrit0,#my-svg-id .doneCrit1,#my-sv

Error: The given CSS string was invalid: SyntaxMatchError: Invalid value for `fill` property. Copy the below CSS into https://jigsaw.w3.org/css-validator/validator to help debug where the invalid CSS is: Original CSS value was #my-svg-id{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@Keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@Keyframes dash{to{stroke-dashoffset:0;}}#my-svg-id .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#my-svg-id .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#my-svg-id .error-icon{fill:#552222;}#my-svg-id .error-text{fill:#552222;stroke:#552222;}#my-svg-id .edge-thickness-normal{stroke-width:1px;}#my-svg-id .edge-thickness-thick{stroke-width:3.5px;}#my-svg-id .edge-pattern-solid{stroke-dasharray:0;}#my-svg-id .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg-id .edge-pattern-dashed{stroke-dasharray:3;}#my-svg-id .edge-pattern-dotted{stroke-dasharray:2;}#my-svg-id .marker{fill:#333333;stroke:#333333;}#my-svg-id .marker.cross{stroke:#333333;}#my-svg-id svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg-id p{margin:0;}#my-svg-id .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg-id .mouth{stroke:#666;}#my-svg-id line{stroke:#333;}#my-svg-id .legend{fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#my-svg-id .label text{fill:#333;}#my-svg-id .label{color:#333;}#my-svg-id .face{fill:#FFF8DC;stroke:#999;}#my-svg-id .node rect,#my-svg-id .node circle,#my-svg-id .node ellipse,#my-svg-id .node polygon,#my-svg-id .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg-id .node .label{text-align:center;}#my-svg-id .node.clickable{cursor:pointer;}#my-svg-id .arrowheadPath{fill:#333333;}#my-svg-id .edgePath .path{stroke:#333333;stroke-width:1.5px;}#my-svg-id .flowchart-link{stroke:#333333;fill:none;}#my-svg-id .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#my-svg-id .edgeLabel rect{opacity:0.5;}#my-svg-id .cluster text{fill:calculated;}#my-svg-id div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg-id .task-type-0,#my-svg-id .section-type-0{fill:#ECECFF;}#my-svg-id .task-type-1,#my-svg-id .section-type-1{fill:#ffffde;}#my-svg-id .task-type-2,#my-svg-id .section-type-2{fill:hsl(304, 100%, 96.2745098039%);}#my-svg-id .task-type-3,#my-svg-id .section-type-3{fill:hsl(124, 100%, 93.5294117647%);}#my-svg-id .task-type-4,#my-svg-id .section-type-4{fill:hsl(176, 100%, 96.2745098039%);}#my-svg-id .task-type-5,#my-svg-id .section-type-5{fill:hsl(-4, 100%, 93.5294117647%);}#my-svg-id .task-type-6,#my-svg-id .section-type-6{fill:hsl(8, 100%, 96.2745098039%);}#my-svg-id .task-type-7,#my-svg-id .section-type-7{fill:hsl(188, 100%, 93.5294117647%);} ❯ checkValidStylisCSSStyleSheet packages/mermaid/src/styles.spec.ts:53:11 ❯ packages/mermaid/src/styles.spec.ts:114:11 ❯ fulfilled node_modules/.pnpm/@rollup+plugin-typescript@11.1.6_rollup@4.32.1_tslib@2.8.1_typescript@5.4.5/node_modules/tslib/tslib.es6.js:128:58

Error: The given CSS string was invalid: SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `color` property,SyntaxMatchError: Invalid value for `fill` property,SyntaxMatchError: Invalid value for `color` property. Copy the below CSS into https://jigsaw.w3.org/css-validator/validator to help debug where the invalid CSS is: Original CSS value was #my-svg-id{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@Keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@Keyframes dash{to{stroke-dashoffset:0;}}#my-svg-id .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#my-svg-id .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#my-svg-id .error-icon{fill:#552222;}#my-svg-id .error-text{fill:#552222;stroke:#552222;}#my-svg-id .edge-thickness-normal{stroke-width:1px;}#my-svg-id .edge-thickness-thick{stroke-width:3.5px;}#my-svg-id .edge-pattern-solid{stroke-dasharray:0;}#my-svg-id .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg-id .edge-pattern-dashed{stroke-dasharray:3;}#my-svg-id .edge-pattern-dotted{stroke-dasharray:2;}#my-svg-id .marker{fill:#333333;stroke:#333333;}#my-svg-id .marker.cross{stroke:#333333;}#my-svg-id svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg-id p{margin:0;}#my-svg-id .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg-id .cluster-label text{fill:calculated;}#my-svg-id .cluster-label span,#my-svg-id p{color:calculated;}#my-svg-id .label text,#my-svg-id span,#my-svg-id p{fill:#333;color:#333;}#my-svg-id .node rect,#my-svg-id .node circle,#my-svg-id .node ellipse,#my-svg-id .node polygon,#my-svg-id .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg-id .flowchart-label text{text-anchor:middle;}#my-svg-id .node .label{text-align:center;}#my-svg-id .node.clickable{cursor:pointer;}#my-svg-id .arrowheadPath{fill:#333333;}#my-svg-id .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg-id .flowchart-link{stroke:#333333;fill:none;}#my-svg-id .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#my-svg-id .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#my-svg-id .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg-id .node .cluster{fill:rgba(255, 255, 222, 0.5);stroke:rgba(170, 170, 51, 0.2);box-shadow:rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;stroke-width:1px;}#my-svg-id .cluster text{fill:calculated;}#my-svg-id .cluster span,#my-svg-id p{color:calculated;}#my-svg-id div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg-id .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;} ❯ checkValidStylisCSSStyleSheet packages/mermaid/src/styles.spec.ts:53:11 ❯ packages/mermaid/src/styles.spec.ts:114:11 ❯ fulfilled node_modules/.pnpm/@rollup+plugin-typescript@11.1.6_rollup@4.32.1_tslib@2.8.1_typescript@5.4.5/node_modules/tslib/tslib.es6.js:128:58