Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG CSS Stylesheet raises numerous errors #28

Closed
rgoubet opened this issue Nov 16, 2022 · 2 comments
Closed

SVG CSS Stylesheet raises numerous errors #28

rgoubet opened this issue Nov 16, 2022 · 2 comments
Labels
invalid This doesn't seem right

Comments

@rgoubet
Copy link

rgoubet commented Nov 16, 2022

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
Copy link
Owner

jaraco commented Nov 20, 2022

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 jaraco mentioned this issue Nov 20, 2022
Open
@jaraco
Copy link
Owner

jaraco commented Nov 20, 2022

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.

@jaraco jaraco closed this as completed Nov 20, 2022
@jaraco jaraco added the invalid This doesn't seem right label Nov 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
invalid This doesn't seem right
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaraco @rgoubet