`@preprocessor stylus` bugs and how to fix them #1710

pabli24 · 2023-12-05T20:30:27Z

pabli24
Dec 5, 2023

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  "Select"        ["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://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg'"
@var          number   divW   "Width"         [600, 200, null, 1, 'px']
@var          range    divBr  "Border radius" [16, 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;
	}
}

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`@preprocessor stylus` bugs and how to fix them #1710

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

@preprocessor stylus bugs and how to fix them #1710

pabli24 Dec 5, 2023

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

Bugs

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

calc(stylusVars)

url() - Data URLs

grid-template

@supports selector()

@media - Media Queries Level 4 Syntax

@container

min() max() css functions

#decor - ID selectors similar to hex colors and operators

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

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

.foo\:bar

color-mix()

{ - opening bracket in a new line

Additional Stylus Preprocessor Info

Type of

Equality

Colors

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

Comments

Less Preprocessor

Replies: 0 comments

`@preprocessor stylus` bugs and how to fix them #1710

pabli24
Dec 5, 2023

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

`calc(stylusVars)`

`url()` - Data URLs

`grid-template`

`@supports selector()`

`@media` - Media Queries Level 4 Syntax

`@container`

`min()` `max()` css functions

`#decor` - ID selectors similar to hex colors and operators

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

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

`.foo\:bar`

`color-mix()`

`{` - opening bracket in a new line

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