Can Stylus :extend reliably preserve selector order and pseudo-classes across versions?

Answer

The :extend directive in Stylus simply copies the selector string from the source rule into the target rule. The order in which selectors appear in the comma‑separated list is the order in which the :extend statements are encountered in the source file. This behaviour is identical in 2.7.x and 3.0.x; the core selector‑merging logic has not changed between these releases.

1. Selector ordering across versions

When multiple :extend directives target the same selector, Stylus concatenates the base selectors in the order they appear. For example:

/* file A */
.foo { color: red; }

/* file B */
.bar { :extend .foo; }
.baz { :extend .foo; }

Compiles to:

.bar, .baz { color: red; }

Both 2.7.x and 3.0.x produce the same ordering. If the :extend statements are in different files, the final order depends on the import sequence.

2. Mixins with default arguments

Extending a selector that contains a mixin does not automatically bring the mixin’s properties into the target rule. Stylus only copies the selector string; it does not evaluate or re‑apply the mixin inside the target block. Therefore, if the source selector uses a mixin with defaults, those defaults will not appear in the extended rule in either 2.7.x or 3.0.x.

3. Pseudo‑classes from a different file

Pseudo‑classes attached to the base selector are preserved when the selector is extended. The full selector—including the pseudo‑class—is copied into the target rule. For instance, extending .btn:hover from another file results in the target selector containing .btn:hover exactly as written. This holds in both major releases.

4. Media queries and cascade order

Media queries are not inherited by the extended selector. If the source selector is wrapped in a media query, the target rule will appear outside that query unless the target is also nested inside the same query. Consequently, the cascade priority can shift if the target rule is emitted earlier or later in the output.

Verification Steps

1. Selector order: Create a test.styl with two :extend statements targeting the same selector. Compile and inspect the comma‑separated list to confirm the order matches the source sequence.
2. Mixin defaults: Define a mixin with default arguments, use it in a rule, then extend that rule. Verify that the target rule does not contain the mixin’s properties.
3. Pseudo‑classes: Extend a selector that includes a pseudo‑class defined in a separate file. Check that the compiled CSS retains the pseudo‑class in the extended selector.
4. Media query placement: Wrap a rule in @media, extend it, and compile. Ensure the extended selector appears outside the media query unless explicitly nested.

All steps should produce identical results in Stylus 2.7.x and 3.0.x, confirming deterministic behaviour under the described conditions.

Missing Diagnostic Detail

To fine‑tune your build, could you confirm whether you import Stylus files using @import statements or rely on a build tool’s file ordering? The import order can affect selector precedence when extensions span multiple files.