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