vivliostyle.js
vivliostyle.js copied to clipboard
Valid rule is skipped when preceding rule has a syntax error in the selector
Example:
/* The closing parenthesis is absent */
:nth-child( {
}
* {
color: green;
}
The second rule (* { color: green; }
) is ignored.
Note that existing UAs' behavior is not uniform: WebKit treats the second rule as a valid rule, while others (Blink, Gecko, Prince, AHF) ignores the second rule. Though most UAs ignores the second rule, I think it is better to treat the second rule as valid because:
- From the latest CSS Syntax spec it seems appropriate to do so.
- It lowers possibility to break layout, given the fact that the number of selectors supported by Vivliostyle currently is fewer than other UAs and possibility to encounter selectors which are valid but cannot be parsed by Vivliostyle is higher.
I would have expected browsers to already agree on this. Interesting that they don't.
Which part of the CSS Syntax spec makes you think this is the correct behavior? I think it should go the other way.
In general, this should make the second rule valid:
random-weird-thing {
}
* {
color: green;
}
but ( ) [ ]
in the random-weird thing need to be balanced.
More specifically, for the example you suggested, here's what I think should happen:
- parse a stylesheet
-
consume list of rules next input token is ":", which "matches anything else", so
1. consume a qualified rule next input token is ":", which matches "anything else", so
- consume a component value next input token is ":" which falls under the final "otherwise", so return it and go back to the loop of 2. consume a qualified rule next input token is "nth-child(" (function token), which matches "anything else", so
-
consume a component value next input token is "nth-child(" (function token) which falls under the first "otherwise", so
- consume a function we consume component values until we hit ")" or "EOF". Since there's no other ")" in the file, we consume component values all the way to EOF, and return all that as a function to
- consume a component value , which returns the function to the loop of 3. consume a qualified rule next input token is "EOF", so this is a parse error. Return nothing.
The rule was designed so that unknow stuff gets ignored and the parser falls back on its feets as soon as possible, but we need [ ]
and ( )
and { }
to be balanced.
Ah, I didn't read the "consume a component value" part.
I now understand that [ ]
, ( )
and { }
should be balanced. The current behavior for the first example should be kept as is.
What we really should fix is the following case:
/* '.' is not allowed inside :nth-child() */
:nth-child(.) {
}
* {
color: green;
}
In this case the second rule should be valid, and all the other UAs do the same, but Vivliostyle ignores it.
Yes, that one needs to make the second rule apply.