New CSS parser/validator

edited August 2013 in userstyles.org
I've been working to augment csspool so that I can use it to validate and parse styles. This will help increase the quality of styles and fix some long-broken things.

I think I've got it mostly working - some less-common valid things aren't yet supported, but most of the things it catches are legitimate errors.

Here's all the styles it thinks have errors. Check it over and see if you're in the list, and let me know of anything that it's flagging as invalid that is valid. Things I know of:
  • A number of -moz- functions
  • @charset
  • @keyframes
  • calc()
  • any()/matches()(
  • nth-last-of-type()
  • Line breaks in data URIs
  • @supports
  • @media
  • box-shadow
«13456712

Comments

  • edited February 2013
    None of my style shows any errors yet they're in the list (see the pic)
    Also, 2 styles by foxxyn8 listed but only one seems to need an update for this line: -moz-border-radius: 5px !important;
    Can you edit it and change it to: border-radius: 5px !important; ('cause foxxyn8 seems to be still occupying something)? If not, i will have to post something there (he asked me to watch after his styles but if he's not coming back, i suppose it's no longer important image).
    889 x 141 - 184K
  • For this style I'm getting the message: parse error on value " " (S). What would it be the problem?
  • None of my style shows any errors yet they're in the list (see the pic)
    The list also has a Validate function that sends it to the W3 validator to confirm. The messages about the -moz function likely work, but the other ones have parse errors.
    For this style I'm getting the message: parse error on value " " (S). What would it be the problem?
    I'm going to guess the media query. I'll look into it. The W3 validator doesn't like it either, but that's probably just because of the vendor prefixing.

  • edited February 2013
    Line numbers or error context would help a lot here.
    1. parse error on value "'data:image/svg+xml," (error) [1], [2]. Chrome, Firefox, and the W3C all accept it. Maybe it's the line continuation.
    2. Note that the W3C validator throws on calc(), with and without a vendor prefix, in those stylesheets. Your validator may too, but the SVG precedes the first instance of -vnd-calc() so I can't confirm or disconfirm.
    3. parse error on value "@" (error) [3]. Maybe @-vnd-keyframes; @-moz-document is well-formed.
    4. parse error on value "0% " (PERCENTAGE) [4]. A selector interior to @keyframes
    5. parse error on value "1" (NUMBER) [5]. Either z-index:1 or :nth-last-of-type(1). W3C doesn't flag either of them, but it does throw on the well-formed pointer-events property. (CSS4, yes, but shipped unprefixed per W3C policy. Booo, W3C!)
    What do you plan to do with your syntactical engine, anyway? Will it get us comments in Chrome?
  • What exactly does this mean?

    a3cAnton - Firefox DarkBlue Theme - parse error on value "," (COMMA) - Validate
    a3cAnton - Firefox 4 Graphite-Theme - parse error on value "," (COMMA) - Validate
    a3cAnton - Firefox 14 soft dark - parse error on value "," (COMMA) - Validate
    a3cAnton - Firefox DarkBlue for Nightly 21 test version - parse error on value "," (COMMA) - Validate
  • @charset is actually supported, the errors are valid because the styles don't have them as the very first thing.
    Line numbers or error context would help a lot here.
    Yeah, they would, but the library doesn't seem to provide that data.
    parse error on value "'data:image/svg+xml," (error) [1], [2]. Chrome, Firefox, and the W3C all accept it. Maybe it's the line continuation.
    Looks like it.
    Note that the W3C validator throws on calc(), with and without a vendor prefix, in those stylesheets. Your validator may too, but the SVG precedes the first instance of -vnd-calc() so I can't confirm or disconfirm.
    Added to the to do list.
    parse error on value "@" (error) [3]. Maybe @-vnd-keyframes; @-moz-document is well-formed.
    parse error on value "0% " (PERCENTAGE) [4]. A selector interior to @keyframes
    Yeah, the presence of @keyframes would likely mess it up. It's on the list.
    parse error on value "1" (NUMBER) [5]. Either z-index:1 or :nth-last-of-type(1).
    It's nth-last-of-type. Looks like I forgot to add support for that particular one...
    What do you plan to do with your syntactical engine, anyway? Will it get us comments in Chrome?
    Possibly. It would also fix bugs like this and help ensure the posted code is valid.
    What exactly does this mean?

    a3cAnton - Firefox DarkBlue Theme - parse error on value "," (COMMA) - Validate
    a3cAnton - Firefox 4 Graphite-Theme - parse error on value "," (COMMA) - Validate
    a3cAnton - Firefox 14 soft dark - parse error on value "," (COMMA) - Validate
    a3cAnton - Firefox DarkBlue for Nightly 21 test version - parse error on value "," (COMMA) - Validate
    It means it thinks there are errors in your style and the comma is the part it doesn't like. Clicking on Validate shows errors as well. It could be due to -moz-any.
  • may be, in the w3c validator is marked as error the -moz-any
  • That awkward moment: "There's something wrong with your colon. That's all I know"
  • edited February 2013
    The list also has a Validate function that sends it to the W3 validator to confirm. The messages about the -moz function likely work, but the other ones have parse errors.
    What does it mean? As i said, i don't get any errors in the editor and i have no idea what the validator is about. It shows my code. So ..? what about it? I'm using all those styles and have no problems.
    What am i suppose to do with this?
    I found a couple of things (still, the editor doesn't show them as errors, go figure) but one i can't find. Is there another validator somewhere that will actually highlight errors? I see nothing wrong with this style, yet this validator says: 'parse error on value ";" (SEMI)' ?
  • edited February 2013
    the site hiccuped a dupe again ...
  • Went thru the code and only found somewhere in the font-family, that font names with white spaces should be in quotes (https://developer.mozilla.org/en-US/docs/CSS/font-family), but don't know if that has anything to do with the error.
  • edited February 2013
    The @document rules in lines 4 & 5 of your stylesheet are syntactically incorrect. The duplicate default namespace declarations in lines 2 & 3 are syntactically correct, but nonconforming; the first is ignored.
  • Geeze, srazzano, i used to know that ... old age is setting in. But i can't see what it has to do with a '(SEMI)'
  • edited February 2013
    hideheader, thanks but none of it makes sense to me.
    Is this correct?

    @namespace url(http://www.w3.org/1999/xhtml);
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url("chrome://global/content/commonDialog.xul"),
    @-moz-document url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {
  • edited February 2013
    @namespace url(http://www.w3.org/1999/xhtml);
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url("chrome://global/content/commonDialog.xul"),
    @-moz-document url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {


    /*CORRECT*/
    @namespace url(http://www.w3.org/1999/xhtml);
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url("chrome://global/content/commonDialog.xul"),
    url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {


    /*semi-colon that it thinks is missing*/
    @namespace url(http://www.w3.org/1999/xhtml);
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url("chrome://global/content/commonDialog.xul"); ↵
    @-moz-document url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {


  • Yeap, i see it, thanks!
  • So, can somebody tell me how this validator works? What am i suppose to see after i click VALIDATE? 'cause what i see is my code w/out @ and comments, that's it. Does it somehow mark errors? is there anything else i need to do and don't see it?
    TIA.
  • Huge error.
    No one mentioned you're a pretty cool dude.

    So I say.
  • edited February 2013
    Well, thanks, Ohne! image

    OK, thanks for nothing, people.
    In a clean profile, i discovered that the page pops a notification. I allowed popups for us.o and a tab opened with the validator which told me i have 19 errors! in a style. Lovely. It still doesn't explain errors, i don't understand a thing there and the whole thing is useless to me. How come i successfully post those styles presumably with errors, i use them, too, w/out problems?
    Apparently, i was blocking popups in Fx options and had to whitelist us.o image
  • edited February 2013
    Let's see, about the parser...
    1. When you click "Validate", the @document wrappers are removed from the style, and the unwrapped style should be submitted to the W3C CSS Validator. (Because the W3C validator doesn't understand @document, and simply ignores everything inside of it.) I believe the intent was that you'd identify errors made by csspool to help Jason debug it, not that you'd go mad trying to troubleshoot your working style sheets.
    2. The W3C validator flags "weird" URLs that aren't enclosed in quotation marks, even though it shouldn't [1] [2]. You don't use quotation marks in url() expressions - that accounts for most of the "errors" you've seen.
    3. The W3C validator only warns about vendor-prefixed property names, but vendor-prefixed property values, pseudo-classes, and pseudo-elements are flagged as errors. (They're not, of course.) All of your ::-moz-tree-something pseudo-elements are flagged as "errors", for example.
    4. @Jason: Line 317 of this unwrapped style is truncated halfway through the data URL. (No harm done, the W3C validator would have flagged the complete line anyway.)
    Barbie was right about the @document rule, of course, but only the last default @namespace rule counts:
    /*@namespace url(http://www.w3.org/1999/xhtml);*/
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url("chrome://global/content/commonDialog.xul"),
    url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {
  • @makondo - I mean you're cool too

    I was trying to point the coolness to Jason.
  • Thanks, hideheader. Maybe i'll learn to write styles one day.

    Ohne,
    i know, was kiddin' thus image
  • edited February 2013
    Never mind...
  • edited February 2013
    This is a great idea Jason, but I can see it creating problems with some GUI styles. For example, my simple private style for Chrome scrollbars (28 lines of code) gets 28 errors.

    "The pseudo-element :hover can't appear here in the context CSS level 3".
    "Unknown pseudo-element or pseudo-class :start"
    Ditto for :decrement or :end or :increment or :horizontal or :vertical
    Lies, all lies. :p It works fine because it was intended for webkit, not for W3C. Maybe you could cook up some flexible mechanism for GUI styles. :/
    The W3C validator only warns about vendor-prefixed property names, but vendor-prefixed property values, pseudo-classes, and pseudo-elements are flagged as errors. (They're not, of course.) All of your ::-moz-tree-something pseudo-elements are flagged as "errors", for example.
    It's not so strict. All of the following are merely warnings, not errors:
    pseudo-element: ::-webkit-input-placeholder is an unknown vendor extended pseudo-element
    pseudo-class: :-moz-lwtheme is an unknown vendor extended pseudo-class
    property value: Property -moz-initial is an unknown vendor extension
  • Yes, there's a pile of things that the parser is erroring out on that I need to fix before doing anything useful with it. And yes, hideheader is right, the intention is that you use the W3 validator to confirm/deny what my parser is saying. The validator will spout off about a bunch of other things that may be errors or may be it just not understanding.

    It's important to note the difference between a parser and a validator - the parser will say things like "what the hell is up with this comma?", while a validator can say that and also say "I don't know what property 'foo' is". So the parser just needs to understand the syntax of a stylesheet - the errors in my document are the cases where it doesn't.
  • It's not so strict. All of the following are merely warnings...
    Well that's interesting.

    The (syntactical) parser accepts :-moz-tree-cell-text, :-moz-tree-cell-text(selected), and even :-moz-tree-cell-text(selected hover) as valid vendor pseudo-classes, accepts ::-moz-tree-cell-text as a valid vendor pseudo-element, but throws on ::-moz-tree-cell-text(selected). Which is strictly conforming - c.f. [1], [2]. (Booo, Mozilla!)

    The (semantic) validator though throws on :-moz-tree-cell-text(selected). This, for example,
    treechildren:before { }
    treechildren:-moz-tree-cell-text { }
    treechildren:-moz-tree-cell-text(hover) { }
    treechildren:-moz-tree-cell-text(selected hover) { }
    treechildren::-moz-tree-cell-text { }
    treechildren::-moz-tree-cell-text(hover) { }
    yields this
    Sorry! We found the following errors (3)
    3 Unknown pseudo-element or pseudo-class :-moz-tree-cell-text
    4 Unknown pseudo-element or pseudo-class :-moz-tree-cell-text
    6 Parse Error [::-moz-tree-cell-text(hover)]

    Warnings (2)
    2 :-moz-tree-cell-text is an unknown vendor extended pseudo-class
    5 ::-moz-tree-cell-text is an unknown vendor extended pseudo-element
    Which of course is non-conforming, like requiring quotation marks around all but http:, ftp:, and file: URLs. (Booo, W3C!)
  • I've added support for @(-moz-)keyframes and (-moz-)any and regenerated the results.
  • That appears to be caused by using URL instead of url. Fixed already, these will disappear the next time I run.
  • Two important tags for one command ? No good...
    "45deg is not a color value"... well, that's true. *delete ellipse radiants*
    E:not(F>G) isn't a valid syntax? Damn... ^^
    pfeiffer stylez - Midnight - a dark facebook theme - parse error on value "!important" (IMPORTANT_SYM) - Validate
    Fixed, compressed and validatet.
    *waiting for the next run's results*
  • edited February 2013
    ... and now I can't update it anymore. :-/
    Style code is invalid
    Code is too long (maximum is 65536 characters)
    The W3C validator says it's valid,
    and MS Word says it has 63166 characters (with emtpy spaces).
This discussion has been closed.