Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.
The devs are no longer actively involved in the forum, so any bug reports regarding the extension or website should be sent to them directly at contact@userstyles.org.

Can't submit userstyle; "Style code has an error"

I'm trying to submit a new style, but it's telling me "Style code has an error - wrong number of arguments (given 1, expected 3..5)." It shows errors in the browser extension Stylus as well, but they're functional codes that it marks as errors. An example:

.nav.transparent, #app #nav.nav.transparent {background: rgba(var(--black),.5) !important;}

All the errors come from using an alpha value with a variable, but again, they work. I validated the entire style here and it gave no errors.

Comments

  • edited June 2018 Firefox

    It works because the browsers are tolerant and correct the error.
    Maybe the new specs allow that, but you better stick to a more strict syntax which also fulfills the needs of CSSLint (which has problems with CSS variables):
    The alpha transparency is part of the colour and a 50% black can be written as #00000088 or #0008 or rgba(0,0,0,0.5). So just integrate the alpha value into the variable.

    p.s.: If you want to keep it that way locally, you can get rid of the warning in Stylus editor by choosing Stylelint as linter.

  • After trying to resubmit it a bunch of different ways, it was something as simple as this site rejecting variables with "rgb", but allowing them if they say "rgba". Even if they're not using transparency, they still needed the a. I really don't get it, but it submitted, so yay :}

    Doesn't submit:
    @-moz-document url-prefix("https://anilist.co/") { :root {--black: 18,18,18 !important;} .wrap .footer {background: rgb(var(--black)) !important;}}

    Submits:
    @-moz-document url-prefix("https://anilist.co/") { :root {--black: 18,18,18 !important;} .wrap .footer {background: rgba(var(--black)) !important;}}
  • edited June 2018 Firefox
    1. Do not separate transparency from the color values.
    2. Use rgb if you have just the three values, use rgba if you also have transparency.
    3. Don't put the !important in the variable (and furthermore don't use double-important)

    Both of your examples corrected should both be valid:

    @-moz-document url-prefix("https://anilist.co/") {
        :root { --almostBlack: rgb(18,18,18) }
        .wrap .footer { background-color: var(--almostBlack) !important; }
    }
    
    @-moz-document url-prefix("https://anilist.co/") {
        :root { --blackTransparent: rgba(0,0,0,0.5) }
        .wrap .footer { background-color: var(--blackTransparent) !important; }
    }
    
Sign In or Register to comment.