Legacy `=` mixin definitions missing from Stylus compressed output

Resolution

Stylus 1.x --compress does not silently discard mixins defined with the legacy = syntax. Because mixins are compile-time macros, they never appear in the final CSS output as definitions; they only produce CSS when invoked. If CSS is missing from your compressed output, the mixin was likely not called, or a change in Stylus 1.x interpolation caused the call to fail silently.

Legacy = mixins and modern extend blocks can coexist in the same stylesheet. They operate at different stages of the compilation pipeline: mixins inline properties at the call site, while extend modifies the selector list. You do not need to rewrite all mixins as extend calls before enabling compression.

Technical Explanation

Compression vs. Definition

The --compress flag targets the emitted CSS, not the Stylus AST (Abstract Syntax Tree). Since a mixin definition (whether using = or the modern syntax) is a blueprint and not a CSS rule, it is naturally absent from any output. If a mixin is invoked, its contents are expanded into the selector. If the resulting CSS is missing, verify that the interpolation of variables within that mixin is compatible with Stylus 1.x, as interpolation rules shifted between 0.x and 1.x.

Migration Coexistence

You can safely mix legacy mixins and extend blocks during a rolling deploy. However, be aware that extend can lead to larger CSS files if overused, as it groups selectors, whereas mixins duplicate properties. Ensure that no legacy mixin shares a name with a new variable or extend target to avoid collision.

Source Map Preservation

To preserve source maps when .styl files are removed from the deployment server, you must embed the original source code directly into the map file. By default, source maps often contain only the file paths. To fix this, enable the sourcesContent option in your build configuration.

Verification Steps

To confirm your build is stable before deployment, run these scoped tests:

• Verify Mixin Output: Create a file with one used = mixin and one unused = mixin. Run stylus --compress input.styl. Confirm that only the CSS from the invoked mixin appears.
• Verify Coexistence: Create a stylesheet using both = mixins and extend. Compile and check for parse errors.
• Verify Source Maps: Generate a map with sourcesContent: true, delete the local .styl file, and load the CSS in browser DevTools to ensure the source is still visible.

Diagnostic Detail Needed: Are you using the Stylus CLI directly, or a wrapper like gulp-stylus or stylus-loader? Wrappers may override default compression behaviors or source map settings.