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

[pabli24]

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

Make sure to enable UserCSS editor

Config example ⚙️

@preprocessor stylus - stylus-lang.com

/* ==UserStyle==
@name         example.com STYLUS
@version      1.0.0
@namespace    example STYLUS
@license      WTFPL
@preprocessor stylus
@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://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg'"
@var          number   divW   "Width"         [600, 200, null, 1, "px"]
@var          range    divBr  "Border radius" [15, 5, 50, 1, "px"]
==/UserStyle== */
@-moz-document domain("example.com")
	body
		background-color bg
		if bgImg
			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

or

/* ==UserStyle==
@name         example.com STYLUS
@version      1.0.0
@namespace    example STYLUS
@license      WTFPL
@preprocessor stylus
@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://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg'"
@var          number   divW   "Width"         [600, 200, null, 1, "px"]
@var          range    divBr  "Border radius" [15, 5, 50, 1, "px"]
==/UserStyle== */
@-moz-document domain("example.com") {
	body {
		background-color: bg;
		if bgImg {
			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;
	}
}

Output (click to expand)

UserCSS @var Metadata → Stylus Preprocessor

fonts = Roboto
txt = #fff
link = #7790ff
bg = #000
bgImg = 1
bgImgL = 'https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg'
divW = 600px
divBr = 15px
@-moz-document domain("example.com") {
	body {
		background-color: bg;
		if bgImg {
			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;
	}
}

Stylus Preprocessor → CSS

@-moz-document domain("example.com") {
	body {
		background-color: #000;
		background-image: url("https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg");
		color: #fff;
		font-family: Roboto;
	}
	div {
		background-color: #0d0d0d;
		width: 600px;
		border-radius: 15px;
	}
	a:link,
	a:visited {
		color: #7790ff;
	}
}

CSS → Injecting style at the bottom of the DOM on websites specified in the @-moz-document rule

<style id="stylus-420" type="text/css" class="stylus" data-name="example.com STYLUS">
body {
	background-color: #000;
	background-image: url("https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg");
	color: #fff;
	font-family: Roboto;
}
div {
	background-color: #0d0d0d;
	width: 600px;
	border-radius: 15px;
}
a:link,
a:visited {
	color: #7790ff;
}
/*# sourceURL=chrome-extension://apmmpaebfobifelkijhaljbmpcgbjbdo/example.com.user.css#420 */</style>
</html>

@preprocessor less - lesscss.org

/* ==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://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg'"
@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;
	}
}

Output (click to expand)

UserCSS @var Metadata → Less Preprocessor

@fonts: Roboto;
@txt: #fff;
@link: #7790ff;
@bg: #000;
@bgImg: 1;
@bgImgL: 'https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg';
@divW: 600px;
@divBr: 15px;
@-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;
	}
}

Less Preprocessor → CSS

@-moz-document domain("example.com") {
	body {
		background-color: #000;
		background-image: url('https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg');
		color: #fff;
		font-family: Roboto;
	}
	div {
		background-color: #0d0d0d;
		width: 600px;
		border-radius: 15px;
	}
	a:link,
	a:visited {
		color: #7790ff;
	}
}

CSS → Injecting style at the bottom of the DOM on websites specified in the @-moz-document rule

<style id="stylus-420" type="text/css" class="stylus" data-name="example.com LESS">
body {
	background-color: #000;
	background-image: url('https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg');
	color: #fff;
	font-family: Roboto;
}
div {
	background-color: #0d0d0d;
	width: 600px;
	border-radius: 15px;
}
a:link,
a:visited {
	color: #7790ff;
}
/*# sourceURL=chrome-extension://apmmpaebfobifelkijhaljbmpcgbjbdo/example.com.user.css#420 */</style>
</html>

@preprocessor uso - userstyles.org docs (Archive)

/* ==UserStyle==
@name         example.com USO
@version      1.0.0
@namespace    example USO
@license      WTFPL
@preprocessor uso
@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          select   bgImg  "Image" {
	"ON": "background-image: url(/*[[bgImgL]]*\/);",
	"OFF": ""
}
@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" [15, 5, 30, 1, "px"]
==/UserStyle== */
@-moz-document domain("example.com") {
	body {
		background-color: /*[[bg]]*/;
		/*[[bgImg]]*/
		color: /*[[txt]]*/;
		font-family: /*[[fonts]]*/;
	}
	div {
		background-color: color-mix(in srgb, /*[[bg]]*/, #fff 5%);
		width: /*[[divW]]*/;
		border-radius: /*[[divBr]]*/;
	}
	a:link, a:visited {
		color: /*[[link]]*/;
	}
}

Output (click to expand)

UserCSS @var Metadata → USO Preprocessor → CSS

@-moz-document domain("example.com") {
	body {
		background-color: #000000;
		background-image: url('https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg');
		color: #ffffff;
		font-family: Roboto;
	}
	div {
		background-color: color-mix(in srgb, #000000, #fff 5%);
		width: 600px;
		border-radius: 15px;
	}
	a:link, a:visited {
		color: #7790ff;
	}
}

CSS → Injecting style at the bottom of the DOM on websites specified in the @-moz-document rule

<style id="stylus-420" type="text/css" class="stylus" data-name="example.com USO">
body {
	background-color: #000000;
	background-image: url(https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg);
	color: #ffffff;
	font-family: Roboto;
}
div {
	background-color: color-mix(in srgb, #000000, #fff 5%);
	width: 600px;
	border-radius: 15px;
}
a:link, a:visited {
	color: #7790ff;
}
/*# sourceURL=chrome-extension://apmmpaebfobifelkijhaljbmpcgbjbdo/example.com.user.css#420 */</style>
</html>

Working "@var checkbox" in the uso preprocessor (click to expand)

@supports (grid-area: 1) {} - ON
@supports (grid-area: 0) {} - OFF (invalid property value)

/* ==UserStyle==
@name         example.com USO
@version      1.0.0
@namespace    example USO
@license      WTFPL
@preprocessor uso
@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://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg"
@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]]*/;
		color: /*[[txt]]*/;
		font-family: /*[[fonts]]*/;
	}
	@supports (grid-area: /*[[bgImg]]*/) {
		body {
			background-image: url(/*[[bgImgL]]*/);
		}
	}
	div {
		background-color: color-mix(in srgb, /*[[bg]]*/, #fff 5%);
		width: /*[[divW]]*/;
		border-radius: /*[[divBr]]*/;
	}
	a:link, a:visited {
		color: /*[[link]]*/;
	}
}

@preprocessor default - CSS Variables

/* ==UserStyle==
@name         example.com DEFAULT
@version      1.0.0
@namespace    example DEFAULT
@license      WTFPL
@preprocessor default
@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          select   bgImg  "Image" {
	"ON": "var(--bgImgL, none)",
	"OFF": "none"
}
@var          text     bgImgL "Image Link"    "url(https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg)"
@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: var(--bg);
		background-image: var(--bgImg);
		color: var(--txt);
		font-family: var(--fonts);
	}
	div {
		background-color: color-mix(in srgb, var(--bg), #fff 5%);
		width: var(--divW);
		border-radius: var(--divBr);
	}
	a:link, a:visited {
		color: var(--link);
	}
}

Output (click to expand)

UserCSS @var Metadata → Default Preprocessor → CSS

@-moz-document domain("example.com") {
	:root {
		--fonts: Roboto;
		--txt: #fff;
		--link: #7790ff;
		--bg: #000;
		--bgImg: var(--bgImgL, none);
		--bgImgL: url(https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg);
		--divW: 600px;
		--divBr: 15px;
	}
	body {
		background-color: var(--bg);
		background-image: var(--bgImg);
		color: var(--txt);
		font-family: var(--fonts);
	}
	div {
		background-color: color-mix(in srgb, var(--bg), #fff 5%);
		width: var(--divW);
		border-radius: var(--divBr);
	}
	a:link, a:visited {
		color: var(--link);
	}
}

CSS → Injecting style at the bottom of the DOM on websites specified in the @-moz-document rule

<style id="stylus-420" type="text/css" class="stylus" data-name="example.com DEFAULT">
:root {
	--fonts: Roboto;
	--txt: #fff;
	--link: #7790ff;
	--bg: #000;
	--bgImg: var(--bgImgL, none);
	--bgImgL: url(https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg);
	--divW: 600px;
	--divBr: 15px;
}
body {
	background-color: var(--bg);
	background-image: var(--bgImg);
	color: var(--txt);
	font-family: var(--fonts);
}
div {
	background-color: color-mix(in srgb, var(--bg), #fff 5%);
	width: var(--divW);
	border-radius: var(--divBr);
}
a:link, a:visited {
	color: var(--link);
}
/*# sourceURL=chrome-extension://apmmpaebfobifelkijhaljbmpcgbjbdo/example.com.user.css#420 */</style>
</html>

Working "@var checkbox" in the default preprocessor (click to expand)

https://caniuse.com/mdn-css_at-rules_container_style_queries_for_custom_properties

/* ==UserStyle==
@name         example.com DEFAULT
@version      1.0.0
@namespace    example DEFAULT
@license      WTFPL
@preprocessor default
@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"    "url(https://coolbackgrounds.io/images/unsplash/samuel-zeller-medium-b832fe04.jpg)"
@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: var(--bg);
		color: var(--txt);
		font-family: var(--fonts);
	}
	@container style(--bgImg: 1) {
		body {
			background-image: var(--bgImgL, none);
		}
	}
	div {
		background-color: color-mix(in srgb, var(--bg), #fff 5%);
		width: var(--divW);
		border-radius: var(--divBr);
	}
	a:link, a:visited {
		color: var(--link);
	}
}

/* ==UserStyle==
@name         example.com Rounded Corners
@version      1.0.0
@namespace    example DEFAULT
@license      WTFPL
@preprocessor default
@var          checkbox br "Rounded Corners" 1
==/UserStyle== */
@-moz-document domain("example.com") {
	div {
		--br-1: 30px;
		--br-0: 0px;
		border-radius: calc(var(--br) * var(--br-1) + (1 - var(--br)) * var(--br-0));
	}
}

[tophf]

I can make a new Category in discussions for these types of posts, but maybe it's better to move both of them into wiki? Can you edit it?

[pabli24]

hmmm I guess I could