SVG CSS Stylesheet raises numerous errors

[rgoubet]

Consider the following stylesheet, created from a mermaid output:

#mermaid-1668594191602 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}
#mermaid-1668594191602 .error-icon{fill:#552222;}
#mermaid-1668594191602 .error-text{fill:#552222;stroke:#552222;}
#mermaid-1668594191602 .edge-thickness-normal{stroke-width:2px;}
#mermaid-1668594191602 .edge-thickness-thick{stroke-width:3.5px;}
#mermaid-1668594191602 .edge-pattern-solid{stroke-dasharray:0;}
#mermaid-1668594191602 .edge-pattern-dashed{stroke-dasharray:3;}
#mermaid-1668594191602 .edge-pattern-dotted{stroke-dasharray:2;}
#mermaid-1668594191602 .marker{fill:#333333;stroke:#333333;}
#mermaid-1668594191602 .marker.cross{stroke:#333333;}
#mermaid-1668594191602 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}
#mermaid-1668594191602 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}
#mermaid-1668594191602 text.actor>tspan{fill:black;stroke:none;}
#mermaid-1668594191602 .actor-line{stroke:grey;}
#mermaid-1668594191602 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}
#mermaid-1668594191602 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}
#mermaid-1668594191602 #arrowhead path{fill:#333;stroke:#333;}
#mermaid-1668594191602 .sequenceNumber{fill:white;}
#mermaid-1668594191602 #sequencenumber{fill:#333;}
#mermaid-1668594191602 #crosshead path{fill:#333;stroke:#333;}
#mermaid-1668594191602 .messageText{fill:#333;}
#mermaid-1668594191602 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}
#mermaid-1668594191602 .labelText,#mermaid-1668594191602 .labelText>tspan{fill:black;stroke:none;}
#mermaid-1668594191602 .loopText,#mermaid-1668594191602 .loopText>tspan{fill:black;stroke:none;}
#mermaid-1668594191602 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}
#mermaid-1668594191602 .note{stroke:#aaaa33;fill:#fff5ad;}
#mermaid-1668594191602 .noteText,#mermaid-1668594191602 .noteText>tspan{fill:black;stroke:none;}
#mermaid-1668594191602 .activation0{fill:#f4f4f4;stroke:#666;}
#mermaid-1668594191602 .activation1{fill:#f4f4f4;stroke:#666;}
#mermaid-1668594191602 .activation2{fill:#f4f4f4;stroke:#666;}
#mermaid-1668594191602 .actorPopupMenu{position:absolute;}
#mermaid-1668594191602 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}
#mermaid-1668594191602 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}
#mermaid-1668594191602 .actor-man circle,#mermaid-1668594191602 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}
#mermaid-1668594191602 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

Parsing it with cssutils returns many errors and warnings, and many rules are not loaded:

cssutils.parseString(css)

WARNING	Property: Unknown Property name. [1:92: fill]
WARNING	Property: Unknown Property name. [2:36: fill]
WARNING	Property: Unknown Property name. [3:36: fill]
WARNING	Property: Unknown Property name. [3:49: stroke]
WARNING	Property: Unknown Property name. [4:47: stroke-width]
WARNING	Property: Unknown Property name. [5:46: stroke-width]
WARNING	Property: Unknown Property name. [6:44: stroke-dasharray]
WARNING	Property: Unknown Property name. [7:45: stroke-dasharray]
WARNING	Property: Unknown Property name. [8:45: stroke-dasharray]
WARNING	Property: Unknown Property name. [9:32: fill]
WARNING	Property: Unknown Property name. [9:45: stroke]
WARNING	Property: Unknown Property name. [10:38: stroke]
WARNING	Property: Unknown Property name. [12:31: stroke]
WARNING	Property: Unknown Property name. [12:90: fill]
ERROR	CSSStyleRule: No start { of style declaration found: '#mermaid-1668594191602 text.actor>' [13:37: ;]
ERROR	Selector: Unexpected CHAR. [13:34: &]
ERROR	Selector: Unexpected IDENT. [13:35: gt]
ERROR	SelectorList: Invalid Selector: #mermaid-1668594191602 text.actor&gt
ERROR	CSSStyleRule: No style declaration or "}" found: '#mermaid-1668594191602 text.actor>'
WARNING	Property: Unknown Property name. [13:44: fill]
WARNING	Property: Unknown Property name. [13:55: stroke]
WARNING	Property: Unknown Property name. [14:36: stroke]
WARNING	Property: Unknown Property name. [15:38: stroke-width]
WARNING	Property: Unknown Property name. [15:55: stroke-dasharray]
WARNING	Property: Unknown Property name. [15:77: stroke]
WARNING	Property: Unknown Property name. [16:38: stroke-width]
WARNING	Property: Unknown Property name. [16:55: stroke-dasharray]
WARNING	Property: Unknown Property name. [16:76: stroke]
WARNING	Property: Unknown Property name. [17:40: fill]
WARNING	Property: Unknown Property name. [17:50: stroke]
WARNING	Property: Unknown Property name. [18:40: fill]
WARNING	Property: Unknown Property name. [19:40: fill]
WARNING	Property: Unknown Property name. [20:40: fill]
WARNING	Property: Unknown Property name. [20:50: stroke]
WARNING	Property: Unknown Property name. [21:37: fill]
WARNING	Property: Unknown Property name. [22:34: stroke]
WARNING	Property: Unknown Property name. [22:93: fill]
ERROR	CSSStyleRule: No start { of style declaration found: '#mermaid-1668594191602 .labelText,#mermaid-1668594191602 .labelText>' [23:71: ;]
ERROR	Selector: Unexpected CHAR. [23:68: &]
ERROR	Selector: Unexpected IDENT. [23:69: gt]
ERROR	SelectorList: Invalid Selector: #mermaid-1668594191602 .labelText&gt
ERROR	CSSStyleRule: No style declaration or "}" found: '#mermaid-1668594191602 .labelText,#mermaid-1668594191602 .labelText>'
WARNING	Property: Unknown Property name. [23:78: fill]
WARNING	Property: Unknown Property name. [23:89: stroke]
ERROR	CSSStyleRule: No start { of style declaration found: '#mermaid-1668594191602 .loopText,#mermaid-1668594191602 .loopText>' [24:69: ;]
ERROR	Selector: Unexpected CHAR. [24:66: &]
ERROR	Selector: Unexpected IDENT. [24:67: gt]
ERROR	SelectorList: Invalid Selector: #mermaid-1668594191602 .loopText&gt
ERROR	CSSStyleRule: No style declaration or "}" found: '#mermaid-1668594191602 .loopText,#mermaid-1668594191602 .loopText>'
WARNING	Property: Unknown Property name. [24:76: fill]
WARNING	Property: Unknown Property name. [24:87: stroke]
WARNING	Property: Unknown Property name. [25:34: stroke-width]
WARNING	Property: Unknown Property name. [25:51: stroke-dasharray]
WARNING	Property: Unknown Property name. [25:72: stroke]
WARNING	Property: Unknown Property name. [25:131: fill]
WARNING	Property: Unknown Property name. [26:30: stroke]
WARNING	Property: Unknown Property name. [26:45: fill]
ERROR	CSSStyleRule: No start { of style declaration found: '#mermaid-1668594191602 .noteText,#mermaid-1668594191602 .noteText>' [27:69: ;]
ERROR	Selector: Unexpected CHAR. [27:66: &]
ERROR	Selector: Unexpected IDENT. [27:67: gt]
ERROR	SelectorList: Invalid Selector: #mermaid-1668594191602 .noteText&gt
ERROR	CSSStyleRule: No style declaration or "}" found: '#mermaid-1668594191602 .noteText,#mermaid-1668594191602 .noteText>'
WARNING	Property: Unknown Property name. [27:76: fill]
WARNING	Property: Unknown Property name. [27:87: stroke]
WARNING	Property: Unknown Property name. [28:37: fill]
WARNING	Property: Unknown Property name. [28:50: stroke]
WARNING	Property: Unknown Property name. [29:37: fill]
WARNING	Property: Unknown Property name. [29:50: stroke]
WARNING	Property: Unknown Property name. [30:37: fill]
WARNING	Property: Unknown Property name. [30:50: stroke]
WARNING	Property: Unknown Property name. [32:63: fill]
WARNING	Property: Unknown Property name. [32:120: filter]
ERROR	COLOR_VALUE: Missing token for production end FUNC ")": ('CHAR', '/', 32, 161)
ERROR	PropertyValue: No match: ('CHAR', ')', 32, 167)
ERROR	PropertyValue: Unknown syntax or no value: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
ERROR	CSSStyleDeclaration: Syntax Error in Property: filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
WARNING	Property: Unknown Property name. [33:40: stroke]
WARNING	Property: Unknown Property name. [33:99: fill]
WARNING	Property: Unknown Property name. [34:70: stroke]
WARNING	Property: Unknown Property name. [34:129: fill]
WARNING	Property: Unknown Property name. [34:142: stroke-width]
WARNING	Property: Unknown Property name. [35:30: --mermaid-font-family]

[jaraco]

For ease of triage, I've trimmed the line prefix:

 $ pclip | pip-run -q `jaraco.text>=3.11` -- -m jaraco.text.strip-prefix
{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}
.error-icon{fill:#552222;}
.error-text{fill:#552222;stroke:#552222;}
.edge-thickness-normal{stroke-width:2px;}
.edge-thickness-thick{stroke-width:3.5px;}
.edge-pattern-solid{stroke-dasharray:0;}
.edge-pattern-dashed{stroke-dasharray:3;}
.edge-pattern-dotted{stroke-dasharray:2;}
.marker{fill:#333333;stroke:#333333;}
.marker.cross{stroke:#333333;}
svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}
.actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}
text.actor>tspan{fill:black;stroke:none;}
.actor-line{stroke:grey;}
.messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}
.messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}
#arrowhead path{fill:#333;stroke:#333;}
.sequenceNumber{fill:white;}
#sequencenumber{fill:#333;}
#crosshead path{fill:#333;stroke:#333;}
.messageText{fill:#333;}
.labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}
.labelText,#mermaid-1668594191602 .labelText>tspan{fill:black;stroke:none;}
.loopText,#mermaid-1668594191602 .loopText>tspan{fill:black;stroke:none;}
.loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}
.note{stroke:#aaaa33;fill:#fff5ad;}
.noteText,#mermaid-1668594191602 .noteText>tspan{fill:black;stroke:none;}
.activation0{fill:#f4f4f4;stroke:#666;}
.activation1{fill:#f4f4f4;stroke:#666;}
.activation2{fill:#f4f4f4;stroke:#666;}
.actorPopupMenu{position:absolute;}
.actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}
.actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}
.actor-man circle,#mermaid-1668594191602 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}
:root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

[jaraco]

I suspect there are issues in the source CSS.

Most of the errors are related to the > symbols in the source. Replace those with > and many errors go away.

Fixing that issue, I encounter some other errors:

ERROR   CSSStyleRule: No selector found: '{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}'. [1:1: {]
ERROR   SelectorList: Unknown Syntax: ''

Adding a selector to the first line clears those errors leaving only the remaining errors from the original post:

ERROR   COLOR_VALUE: Missing token for production end FUNC ")": ('CHAR', '/', 32, 138)
ERROR   PropertyValue: No match: ('CHAR', ')', 32, 144)
ERROR   PropertyValue: Unknown syntax or no value: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
ERROR   CSSStyleDeclaration: Syntax Error in Property: filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))

Those errors all seem to indicate that the syntax rgb(0 0 0 / 0.4) is not supported.

Since this report is mostly bad user input, I'm going to close this issue as invalid, but I've captured the issue in #29.