New CSS parser/validator

167891012»

Comments

  • For some reason,
    content: "$" !important;
    becomes
    content: "passedValuequot; !important;
    after a save, which then throws a parser error on subsequent saves.
  • For some reason,
    content: "$" !important;
    becomes
    content: "passedValuequot; !important;
    after a save, which then throws a parser error on subsequent saves.
    I had no problem posting that:

    http://userstyles.org/styles/318/test-style2

    Maybe it depends on the other content of the style? Can you post the full code you were using?
  • @supports and calcs with extra parentheses are now supported, as well as CSS variables.
  • edited May 2014
    Thanks for getting back to me.

    http://userstyles.org/styles/101273/
    The affected code is in one of the style settings (install key: WS).

    To clarify, STR for me:
    1. Paste in code.
    2. Save — works fine.
    3. Edit
    4. Find that content: "$" has been replaced with content: "passedValuequot;
    5. Upon saving, the parser shows:
    1 error prohibited this style from being saved

    There were problems with the following fields:

    Style code has an error - parse error on value "\"passedValuequot; !important;" (error) on line 509 around " content: "passedValuequot; !important; marg". If you need help, post your code at http://forum.userstyles.org/discussion/34614/new-css-parservalidator .
    Full code of that style setting:
    /* Make work-safe! */

    /* money */
    /* hide icons */
    nav.toolbar .toolbar-subscribe {display: none !important;}
    nav.toolbar .toolbar-wallet .Gems,
    nav.toolbar .toolbar-wallet .shop_gold,
    nav.toolbar .toolbar-wallet .shop_silver {display: none !important;}
    /* money */
    .toolbar-wallet .gem-wallet span {
    padding-top: 0.236em !important;
    margin-right: -.5em !important;
    }
    .toolbar-wallet .gem-wallet span:before {
    content: "$" !important;
    margin: 0 2px 0 0 !important;
    color: #999 !important;
    }
    .toolbar-currency.gold {
    color: rgba(183, 168, 0, 1) !important;
    /*font-weight: 700 !important;*/
    }
    .toolbar-currency.silver:before {
    content: "." !important;
    margin: 0 2px 0 -6px !important;
    }


    /* Bailey */
    .npc_bailey {
    background: none !important;
    }
    .npc_bailey:before {
    content: "News!" !important;
    position: absolute !important;
    top: 6px !important;
    }

    /* hide avatars */
    .herobox, .herobox-wrap {display: none !important;}

    .header-wrap {
    width: auto !important;
    }

    .sticky-wrapper {
    height: 120px !important;
    }

    /* bars */
    .hero-stats {
    border: none !important;
    background: none !important;
    min-width: 300px !important;
    width: 55% !important;
    }
    .meter {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(0,0,0,0.5) !important;
    background: #FFF !important;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.25) !important;
    margin: 6px 0 0px !important;
    height: 2.25em /* default: 2.25em */ !important;
    }
    .bar {}
    .meter-text .glyphicon {display:none !important;}

    /*
    .todos {
    margin-top: -52px !important;
    }
    .rewards {
    margin-top: -52px !important;
    }
    */

    h2.task-column_title {display: none !important;}

    /* add task — click above column to add */
    .addtask-field input {
    opacity: 0 !important;
    transition: 200ms !important;
    }
    .addtask-field input:focus {
    opacity: 1 !important;
    min-height: 3em !important;
    transition: 200ms !important;
    /*outline: 1px solid #CCC !important;*/
    }


    /* Rewards */
    /* hide potion & gold icons */
    .shop_gold, .shop_potion {display: none !important;}
    .reward-cost:before {content: "$" !important;}

    /* TAVERN */
    .npc_daniel {display: none !important;}
  • Filed as https://github.com/JasonBarnabe/userstyles/issues/28 and fixed. It was just a problem with the edit screen - it was getting saved correctly and given to users correctly.
  • Thanks a lot!
  • Receiving this error when trying to save my style:
    parse error on value "var(" (FUNCTION) on line 47 around "lc(100% + var(--url-righ".
    Line 47:
    width: calc(100% + var(--url-right-margin)) !important; text-align: var(--url-text-align) !important;
    And my variable declaration used in that line:
    :root {
    --url-right-margin: 5px;
    --url-text-align: left; /* left | center | right */
    }
    Full code can be read at http://twily.info/firefox/firefox-css.
  • Hi,

    I'm getting this error when attempting to make any changes:
    Style code has an error - parse error on value "vh" (IDENT) on line 14 around "t:calc(100vh - 92px)!i"
    I think the parser doesn't like the vh unit in calc(). Though without it my YouTube style is not very useful...
    I appreciate any help.
  • I'm getting this error when attempting to make any changes:
    Style code has an error - parse error on value "vh" (IDENT) on line 14 around "t:calc(100vh - 92px)!i"
    I think the parser doesn't like the vh unit in calc(). Though without it my YouTube style is not very useful...
    Same here, also with my style to enlarge YouTube. :) http://userstyles.org/styles/100169/youtube-larger-player
  • Sorry about the errors, I refactored some code and it kind of messed up some of the options validation.

    Can you give it a shot now? When I try now with your new code, then it gets up to line 110 on the pbc setting, which appears to be something new you're adding...
    I have problems uploading a style because this line of code
    background-size: calc(-2px + 100%) calc(-2px + 100%) !important;
    returns an error:

    1 error prohibited this style from being saved

    There were problems with the following fields:

    Style code has an error - parse error on value " " (S) on line 63 around "px + 100%) calc(-2px ". If you need help, post your code at http://forum.userstyles.org/discussion/34614/new-css-parservalidator .
  • It might be a crazy idea, but how about using the W3C CSS Validator, instead of re-implementing the parser?

    http://jigsaw.w3.org/css-validator/DOWNLOAD.html
  • Another idea is to run the current parser/validator against all userstyles currently hosted on the site. That way, it can quickly find all the brokenness.

    (sorry for double-posting)
  • edited May 2014
    The W3C validator doesn't handle @-moz-documents and a ton of other things that browsers support.

    When the parser went in, I did run against everything. Start reading from page 1 :)
  • Receiving this error when trying to save my style:
    parse error on value "var(" (FUNCTION) on line 47 around "lc(100% + var(--url-righ".
    Line 47:
    width: calc(100% + var(--url-right-margin)) !important; text-align: var(--url-text-align) !important;
    https://github.com/JasonBarnabe/csspool/issues/15

  • All reported issues fixed.

    I think it's time for this thread to die. If anyone has problems with the validator in the future, please post a new discussion in Style Development.
This discussion has been closed.