[Bug] Applying on all pages when using @preprocessor stylus

[zenstorage]

Bug Report

Bug Description

When using the Stylus preprocessor with nested Media Queries, the styles are applied to all pages.

Screenshots

example.net:

example.com:

CSS Code

/* ==UserStyle==
@name           example.com
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@preprocessor   stylus
==/UserStyle== */

@-moz-document domain("example.com") {
        /* Only in example.com */
	h1 {
		border: 3px solid yellow;
	}
	
	@media (min-width: 600px) {
		/* Only in example.com */
		p {
			border: 3px solid blueviolet;
		}
		@media (min-height: 600px) {
			/* Styles above are applied to all pages */
			* {
				border: 3px solid red;
			}
		}
	}
}

System Information

• OS: Windows
• Browser: Firefox 130
• Stylus Version: 1.5.51

Additional Context

[tophf]

It's a bug in stylus-lang @preprocessor. Its development is apparently abandoned and it has so many bugs that I wonder if we should remove it altogether...

[zenstorage]

Good to know, unfortunately it is abandoned, it has the most functions to use

[tophf]

Try workarounds in this list and if none helps, try reporting the problem in https://github.com/stylus/stylus/issues/

[zenstorage]

Thanks, I will try

[pabli24]

For some reason this

@-moz-document domain("example.com") {
	@media (min-width: 10px) {
		p {
			color: #000
		}
		@media (min-height: 20px) {
			p {
				color: #fff
			}
		}
	}
}

compiles to

@-moz-document domain("example.com") {
@media (min-width: 10px) {
    p {
      color: #000;
    }
}
}
@media (min-width: 10px) and (min-height: 20px) {
  p {
    color: #fff;
  }
}

---

The easiest solution would be to not nest @media

@-moz-document domain("example.com") {
	@media (min-width: 10px) {
	    p {
	      color: #000
	    }
	}
	@media (min-width: 10px) and (min-height: 20px) {
	  p {
	    color: #fff
	  }
	}
}

I also noticed that more nesting "fixes" it :D

@document domain("example.com") {
	& {
		@media (min-width: 10px) {
			p {
				color: #000
			}
			@media (min-height: 20px) {
				p {
					color: #fff
				}
			}
		}
	}
}

[BoffinBrain]

I was about to report a bug relating to the Stylus preprocessor not detecting compiler errors with certain garbled code. After looking at a few issues here, I guess there's no point in creating another, but here it is for the sake of curiosity.

 /* */

/* ==UserStyle==
@name           Stylus Preprocessor Test
@namespace      github.com/openstyles/stylus
@version        1.0.0
@preprocessor   stylus
@var color aaa "aaa" #aaa
==/UserStyle== */

@-moz-document domain("github.com") {
	#asdf {}
}

* {
    //
}

If you install the above UserStyle, you get a stylelint issue, but it will save just fine. If you remove the indentation before the very first comment, or the // near the end, suddenly you get the compiler errors.

Is it still the case that you recommend using the Less preprocessor where possible? Any other recommendations relating to that?

[tophf]

Personally I wouldn't recommend using any less or stylus preprocessors and just use uso or none at all, see our wiki. If you author complicated styles, use an IDE with proper SASS/postcss plugins and apply the style via live reload in Stylus.

[BoffinBrain]

What else is available for making a style that has user-customizable options, though?

[tophf]

There's no need for preprocessor to use configurable variables. Well, in simple cases, that is.

[tophf]

To clarify, you don't need stylus or less. You can use uso or no preprocessor at all (wiki) and still create flexible configurable styles, there are many examples here https://github.com/StylishThemes