Stylus + Webpack: Source Map Integrity Through Autoprefixer for Deeply Nested Rules

Source Map Propagation in the Stylus Pipeline

Autoprefixer (via PostCSS) preserves source map entries for deeply nested Stylus constructs, provided the mapping chain is unbroken. There is no hard-coded nesting depth limit in Stylus or Autoprefixer that triggers the omission of source map entries; however, mapping loss typically occurs due to configuration gaps between the stylus-loader and postcss-loader.

The Mapping Mechanism

In a Webpack 5 pipeline, source maps are passed as a chain. If stylus-loader generates a map, it is passed to postcss-loader. Autoprefixer does not "rewrite" the original source; it consumes the existing map and appends its own transformations to it. If the final map points to the intermediate CSS instead of the .styl file, the chain was broken at the PostCSS stage.

Required Configuration

To ensure integrity for deeply nested rules, verify the following settings in your Webpack configuration:

• stylus-loader: Set sourceMap: true. This ensures the initial mapping from Stylus to CSS is created and passed forward.
• postcss-loader: Ensure the postcssOptions include map: { inline: false } (or true depending on your output preference). Without the map option enabled in PostCSS, Autoprefixer may discard the incoming Stylus map and generate a new one that only references the compiled CSS.
• Webpack Devtool: Use a high-fidelity mapping option such as source-map to avoid the inaccuracies associated with eval-based mappings.

// webpack.config.js snippet
module.exports = {
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.styl$/,
      use: [
        { loader: 'css-loader', options: { sourceMap: true } },
        { loader: 'postcss-loader', options: { postcssOptions: { map: true } } },
        { loader: 'stylus-loader', options: { sourceMap: true } }
      ]
    }]
  }
};

Verification Steps

To confirm that deep nesting is not causing omissions, perform these checks:

1. Inspect the Map: Open the generated .css.map file. Search the "sources" array. It must contain the path to the .styl file, not just the intermediate CSS.
2. Browser Validation: Open Chrome DevTools, navigate to the Sources tab, and click a style rule originating from a nested block. It should jump directly to the line in the original Stylus source.

Diagnostic Detail Needed: Are you using mini-css-extract-plugin? If so, the plugin's own source map settings can override loader settings and may require additional configuration to preserve the Stylus origin.