Skip to content

Add opt-in sourceMap option to emit .css.map files and sourceMappingURL comments alongside compiled CSS#5806

Merged
iclanton merged 3 commits into
microsoft:mainfrom
cmalonzo:heft-sass-plugin/sourceMaps
May 29, 2026
Merged

Add opt-in sourceMap option to emit .css.map files and sourceMappingURL comments alongside compiled CSS#5806
iclanton merged 3 commits into
microsoft:mainfrom
cmalonzo:heft-sass-plugin/sourceMaps

Conversation

@cmalonzo
Copy link
Copy Markdown
Contributor

@cmalonzo cmalonzo commented May 19, 2026

Summary

Fixes sp-dev-docs#10831 — SPFx 1.23 dev builds lost CSS/SCSS source-map support because @rushstack/heft-sass-plugin never passed sourceMap: true to sass-embedded, so no .css.map files were produced and DevTools "Sources" pointed at intermediate compiled files instead of the original .scss.

Changes

src/SassProcessor.ts

  • Added sourceMap?: boolean to ISassProcessorOptions
  • When sourceMap: true, passes sourceMap: true and sourceMapIncludeSources: true to compileStringAsync so result.sourceMap is populated
  • For each CSS output folder: writes a <file>.css.map alongside the .css, with sources[] rewritten from internal heft: URLs to paths relative to the map file's directory (what source-map-loader expects); appends /*# sourceMappingURL=<basename>.css.map */ to the .css
  • Default is false — no behavior change for existing consumers

src/SassPlugin.ts

  • Added sourceMap?: boolean to ISassConfigurationJson and threads it through to ISassProcessorOptions

src/schemas/heft-sass-plugin.schema.json

  • Added "sourceMap" boolean property

src/test/SassProcessor.test.ts

  • Added three tests under describe('sourceMap option'):
    • sourceMap: true emits a .css.map and a sourceMappingURL comment; map is valid JSON v3 with non-empty mappings and sources[0] resolving to the input .scss
    • Default (sourceMap unset) produces no .css.map and no sourceMappingURL comment, confirming byte-identical output to pre-change behavior
    • sourceMap: true + doNotTrimOriginalFileExtension: true uses the correct foo.scss.css.map filename in both the written file and the sourceMappingURL comment

Downstream contract

The plugin's only obligation to consumers is:

  • A parseable v3 source map at <file>.css.map
  • A /*# sourceMappingURL=<basename>.css.map */ comment in the emitted .css
  • sources[] entries that resolve (relative to the .css.map) to the original .scss on disk

@cmalonzo
Copy link
Copy Markdown
Contributor Author

Blocker for SharePoint/sp-dev-docs#10831

Comment thread heft-plugins/heft-sass-plugin/src/schemas/heft-sass-plugin.schema.json Outdated
Comment thread heft-plugins/heft-sass-plugin/src/test/SassProcessor.test.ts Outdated
Comment thread heft-plugins/heft-sass-plugin/src/test/SassProcessor.test.ts Outdated
Comment thread heft-plugins/heft-sass-plugin/src/SassProcessor.ts
@iclanton iclanton merged commit 89e14ce into microsoft:main May 29, 2026
6 checks passed
@github-project-automation github-project-automation Bot moved this from Needs triage to Closed in Bug Triage May 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Closed

Development

Successfully merging this pull request may close these issues.

2 participants