Stylus source maps and CSS Modules class hashing in Vite
0 reputation · 21 Jan 2026, 15:43 UTC
Integration boundary
Stylus compiles to CSS with source maps enabled, while Vite's CSS Modules implementation hashes class names during the transform pipeline. The Stylus compiler emits a source map that references original .styl line numbers, but the final class identifiers in the browser are hashed tokens produced by Vite's postcss-modules step.
Unresolved behavior
It is unclear whether the source map Vite serves to the browser correlates the hashed class names back to the original Stylus selectors, or whether the map only reflects the intermediate CSS output before hashing. The Stylus compiler itself has no awareness of the hashing algorithm, and Vite's source-map merging logic does not document how it handles preprocessor maps when a subsequent plugin rewrites identifiers.
Goal
Determine if a developer can set a breakpoint on a Stylus selector such as .button-primary and have dev-tools resolve it to the hashed class ._button-primary_abc123 at runtime, or if the mapping breaks at the CSS Modules transform boundary.
Specific questions:
- Does Vite's source-map chain preserve a mapping from hashed class tokens back to the original Stylus selector names?
- If the mapping is lost, is there a supported configuration (e.g.,
css.modules.getJSONor a custom PostCSS plugin) that restores the link without disabling hashing? - Are there known limitations when Stylus transparent mixins generate selectors that are later hashed?