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

pajamapop

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.

stonecrusher

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.

pajamapop

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;}}

stonecrusher

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; }
}