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