@preprocessor stylus bugs and how to fix them

[pabli24]

You can report stylus preprocessor bugs here: https://github.com/stylus/stylus/issues

Stylus preprocessor Docs: https://stylus-lang.com/docs/

UserCSS Docs: https://github.com/openstyles/stylus/wiki/Writing-UserCSS#stylus

Pretty much all of the bugs below you can fix by using:

• @css{} - https://stylus-lang.com/docs/literal.html#css-literal
• unquote() - https://stylus-lang.com/docs/bifs.html#unquote-str-ident
• s() - https://stylus-lang.com/docs/bifs.html#s-fmt
• "%s" % val - https://stylus-lang.com/docs/operators.html#sprintf
• \ - https://stylus-lang.com/docs/escape.html#char-escaping

Bugs

rgb(255 255 255 / 20%) - Colors Module Level 4 Syntax

stylus/stylus#2489

.problem
	color: rgb(255 255 255 / 20%)
	color: hsl(0deg 0% 100% / 20%)
	color: hwb(0deg 100% 0% / 20%)

// Use older syntax
.solution-1
	color: rgba(255, 255, 255, .2)
	color: hsla(0, 0%, 100%, .2)

// Escape / for colors that don't have older syntax or convert them to rgba()
.solution-2
	color: hwb(0deg 100% 0% \/ 20%)

// Use unquote(), s() or "%s" % val
.solution-3
	color: s("hwb(0deg 100% 0% / 20%)")
	color: "hwb(0deg 100% 0% / 20%)"%0

// Use @css{}
.solution-4
	color: @css{hwb(0deg 100% 0% / 20%)}

You can quickly convert them to older syntax in the stylus editor using the color picker. Click on the switch formats icon (↔) and then again while holding shift.

calc(stylusVars)

You can’t use stylus variables inside calc(). This is intended behavior.

stylus/stylus#1766 | #1584

foo = 13px
bar = 37px

.problem
	width: calc(foo + bar - 42px)

// Use css variables with stylus variables
.solution-1
	--foo: foo
	--bar: bar
	width: calc(var(--foo) + var(--bar) - 42px)

// Use unquote(), s() or "%s" % val
.solution-2
	width: "calc(%s + %s - 42px)" % (foo bar)
	width: s("calc(%s + %s - 42px)", foo, bar)
	width: s("calc("+ foo +" + "+ bar +" - 42px)")

// Use mixin
calc(a) {s("calc(%s)",a)}

.solution-3
	width: calc(foo \+ bar \- 42px)

url() - Data URLs

stylus/stylus#2597 | stylus/stylus#2347 | stylus/stylus#2117

.problem
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=)

// Use quotation marks for Data URLs (I recommend to always use them)
.solution-1
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=")

// Escape semicolon
.solution-2
	background: url(data:image/png\;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=)

stylus/stylus#2243

.problem
	background: url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="UTF-8"%3F%3E%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"/%3E')

// Use single quotes inside double quotes
.solution
	background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E")

grid-template

stylus/stylus#2306

.problem
	grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%

// Escape brackets
.solution-1
	grid-template: \[linename\] 100px / \[columnname1\] 30% \[columnname2\] 70%

// Use unquote(), s() or "%s" % val
.solution-2
	grid-template: s("[linename] 100px / [columnname1] 30% [columnname2] 70%")

// Use @css{}
.solution-3
	grid-template: @css{[linename] 100px / [columnname1] 30% [columnname2] 70%}

Because stylus allows to omit colons and semicolons, you can’t split values into separate lines

stylus/stylus#2293

.problem
	grid-template:
		"a a a" 40px
		"b c c" 40px
		"b c c" 40px / 1fr 1fr 1fr;

// Make it in one line
.solution-1
	grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr

// Escape new line
.solution-2
	grid-template: \
		"a a a" 40px \
		"b c c" 40px \
		"b c c" 40px / 1fr 1fr 1fr

// Use @css{}
@css  {
.solution-3 {
	grid-template:
		"a a a" 40px
		"b c c" 40px
		"b c c" 40px / 1fr 1fr 1fr;
}
}

@supports selector()

stylus/stylus#2738

@supports selector(:has(a))
	.problem
		color: #fff

// Use @css{}
@supports @css{selector(:has(a))}
	.solution-1
		color: #fff

// Use uquote() or s()
@supports s("selector(:has(a))")
	.solution-2
		color: #fff

s("@supports selector(:has(a)) {")
.solution-2_1
	color: #fff
s("}")

@media - Media Queries Level 4 Syntax

stylus/stylus#2317 | stylus/stylus#2215 | stylus/stylus#2831

@media (30em <= width <= 50em)
	.problem
		color: #fff

// Use older syntax
@media (min-width: 30em) and (max-width: 50em)
	.solution-1
		color: #fff

// Use @css{}
@media ({@css{30em <= width <= 50em}})
	.solution-2
		color: #fff

@css {
	@media (30em <= width <= 50em) {
		.solution-2_1 {
			color: #fff;
		}
	}
}

// Use uquote() or s()
@media ({s("30em <= width <= 50em")})
	.solution-3
		color: #fff

s("@media (30em <= width <= 50em) {")
.solution-3_1
	color: #fff
s("}")

@container

stylus/stylus#2746

@container (width > 400px) and (height > 400px)
	.problem
		color: #fff

// Escape: and, or, not, =
@container (width > 400px) \and (height > 400px)
	.solution-1
		color: #fff

// Use @css{}
@container (width > 400px) {@css{and}} (height > 400px)
	.solution-2
		color: #fff

// Use unquote() or s()
@container (width > 400px) {s("and")} (height > 400px)
	.solution-3
		color: #fff

s("@container (width > 400px) and (height > 400px) {")
.solution-3_1
	color: #fff
s("}")

min() max() css functions

Stylus preprocessors min() max() functions override build-in css min() max() functions

stylus/stylus#2584

.problem
	width: min(69vw, 420px)
	width: max(69vw, 420px)

// Use unquote(), s() or "%s" % val
.solution-1
	width: s("min(69vw, 420px)")

// Use @css{}
.solution-2
	width: @css{min(69vw, 420px)}

// Use calc()
.solution-3
	width: calc(min(69vw, 420px))

#decor - ID selectors similar to hex colors and operators

IDs that start with: a, b, c, d, e, f (similar to hex color) and end with: or, and, is, isnt, unless, not, null (operators) cause error

stylus/stylus#2140

#banot, #abunless, #ffffand, #decor, #dais, #eaisnt, #aanull
	color: #fff

// Escape #
\#banot, \#abunless, \#ffffand, \#decor, \#dais, \#eaisnt, \#aanull
	color: #fff

:is(a, b) :where(a, b) :has(a, b) :not(a, b) with nesting

stylus/stylus#2774

.problem
	:not(.foo, .bar)
		color: #fff

// Use older syntax
.solution
	:not(.foo):not(.bar)
		color: #fff

stylus/stylus#2750 | stylus/stylus#2710 | stylus/stylus#2694

.problem
	:is(.foo, .bar) p
		color: #fff

// Don't use :is()
.solution-1
	.foo, .bar
		p
			color: #fff

// Escape commas (and new line?) using \\\
.solution-2
	:is(.foo\\\, .bar) p
		color: #fff

// Use mixin
c(a) {s(replace(",", "\,", a))}

.solution-3
	{c(":is(.foo, .bar)")} p
		color: #fff

is(a)    {s(":is(%s)",    c(a))}
has(a)   {s(":has(%s)",   c(a))}
not(a)   {s(":not(%s)",   c(a))}
where(a) {s(":where(%s)", c(a))}

.solution-3_1
	{is(".foo, .bar")} p
		color: #fff

[style="color: rgb(0, 0, 0)"]

stylus/stylus#2378 | stylus/stylus#2658

.problem [style="color: rgb(0, 0, 0)"]
	color: #fff
	
// Escape commas
.solution [style="color: rgb(0\, 0\, 0)"]
	color: #fff

.foo\:bar

stylus/stylus#2805

.problem\:bar
	color: #fff

// Escape backslashes
.solution\\:bar
	color: #fff

color-mix()

#1694

.problem
	background: color-mix(in srgb, black 10%, white)

// Use unquote(), s() or "%s" % val
.solution-1
	background: s("color-mix(in srgb, black 10%, white)")

// Use mix() https://stylus-lang.com/docs/bifs.html#mix-color1-color2-amount
.solution-2
	background: mix(black, white, 10%)

// Use @css{}
.solution-3
	background: @css{color-mix(in srgb, black 10%, white)}

{ - opening bracket in a new line

This indentation style is not fully supported. You can see supported style syntax here.

#1730 | stylus/stylus#2847

// Problem
add(a, b)
{
	a + b
}
foo
{
	bar1 bar2
	{
		color: #fff
	}
}
// Solution (I recommend to always use this indentation style)
add(a, b) {
	a + b
}
foo {
	bar1 bar2 {
		color: #fff
	}
}
// Solution 2
add(a, b)
	a + b
foo
	bar1 bar2
		color: #fff

Additional Stylus Preprocessor Info

Type of

https://stylus-lang.com/docs/bifs.html#typeof-node

type(true)         // 'boolean'
type(false)        // 'boolean'
type(0)            // 'unit'
type(1)            // 'unit'
type(4.2px)        // 'unit'
type(#a)           // 'rgba'
type(#f00)         // 'rgba'
type(rgb(255,0,0)) // 'rgba'
type(red)          // 'rgba'
type("red")        // 'string'
type("foo")        // 'string'
type(foo)          // 'ident'
type(calc)         // 'ident'
type(url)          // 'ident' ('function' if optional "Data URI Image Inlining" is enabled. It's not in the stylus browser extension)
type(rgb)          // 'function'
type(length)       // 'function'
type(\a)           // 'literal'
type(@css{a})      // 'literal'
type("%s"%a)       // 'literal'
type(null)         // 'null'
type()             // 'null'
type(/*foo*/)      // 'comment'

Equality

https://stylus-lang.com/docs/operators.html#equality-relational | https://stylus-lang.com/docs/functions.html#conditionals

foo     == foo     // true - Undefined identifiers yield themselves as the value
foo     == "foo"   // true - Idents are string-like
10px    == 10%     // true - Numbers are equal even if they have different units

"bar"   == "bar"   // true
red     == "red"   // false
red     == #f00    // true
true    == 1       // true
""+10px == ""+10%  // false

Colors

Colors are converted to hex or rgba on output

body
	color: red                    // #f00
	color: #f                     // #fff
	color: #00                    // #000
	color: #ff000080              // rgba(255,0,0,0.502)
	color: #ff0000                // #f00
	color: rgb(255, 0, 0)         // #f00
	color: rgba(255, 0, 0, .5)    // rgba(255,0,0,0.5)
	color: hsl(0, 100%, 50%)      // #f00
	color: hsla(0, 100%, 50%, .5) // rgba(255,0,0,0.5)

Sprintf "%s" % val vs s("%s", val)

foo = f1 f2 "f3"
bar = b1 b2, "b3"

"%s" % foo           // f1
"%s" % bar           // b1 b2

"%s %s %s" % foo     // f1 f2 "f3"
"%s %s"    % bar     // b1 b2 "b3"

// To make it act like s(), you need to add another value (it can be null, () or whatever you want)
"%s" % (foo ())      // f1 f2 "f3"
s("%s", foo)         // f1 f2 "f3"
"%s" % (bar ())      // b1 b2, "b3"
s("%s", bar)         // b1 b2, "b3"

"%s %s" % (foo bar)  // f1 f2 "f3" b1 b2, "b3"
s("%s %s", foo, bar) // f1 f2 "f3" b1 b2, "b3"
	
// s() or unquote()
s(""+ foo)           // f1 f2 f3
s(""+ bar)           // b1 b2 b3
s(""+ foo +" "+ bar) // f1 f2 f3 b1 b2 b3

Comments

https://stylus-lang.com/docs/comments.html

// Double slash comments don't output
/* Multi-line comments output when the 'compress' option is not enabled (It's not enabled in the stylus browser extension) */
/*! Multi-line buffered comments output regardless of compression */

Input

foo = /*#0f0*/
body {
	color: #fff;
	/*color: #000;*/
	//color: #f00;
	color: foo;
}

Output

body {
  color: #fff;
/*color: #000;*/
  color: /*#0f0*/;
}

Less Preprocessor

If you chose Stylus Preprocessor just because it has the same name as the extension and you only use if statements and variables, then maybe try Less Preprocessor instead. It’s also very powerful and not that buggy.

/* ==UserStyle==
@name         example.com LESS
@version      1.0.0
@namespace    example LESS
@license      WTFPL
@preprocessor less
@var          select   fonts  "Font"          ["Roboto", "Helvetica", "'Comic Sans MS'"]
@var          color    txt    "Text"          #fff
@var          color    link   "Link"          #7790ff
@var          color    bg     "Background"    #000
@var          checkbox bgImg  "Image"         1 
@var          text     bgImgL "Image Link"    "'https://cataas.com/cat?width=1000'"
@var          number   divW   "Width"         [600, 200, null, 1, "px"]
@var          range    divBr  "Border radius" [15, 5, 30, 1, "px"]
==/UserStyle== */
@-moz-document domain("example.com") {
	body {
		background-color: @bg;
		& when (@bgImg = 1) {
			background-image: url(@bgImgL);
		}
		color: @txt;
		font-family: @fonts;
	}
	div {
		background-color: lighten(@bg, 5%);
		width: @divW;
		border-radius: @divBr;
	}
	a:link, a:visited {
		color: @link;
	}
}

Standard CSS is also evolving. Preprocessors are slowly starting to become obsolete. CSS Nesting is supported natively. @container: Style queries for custom properties can be used as if statement (@container style(--bgImg: 1){}). You can mix colors using color-mix() function.

An example of the same style in every @preprocessor (stylus, less, uso, default)

[Desynci]

To add: @starting-style is also not handled correctly and requires wrapping in @css