From MozillaWiki
Jump to: navigation, search
Please use "Edit with form" above to edit this page.


CSS Source Map
Stage Definition
Status `
Release target `
Health OK
Status note `


Product manager Kevin Dangoor
Directly Responsible Individual Kevin Dangoor
Lead engineer `
Security lead `
Privacy lead `
Localization lead `
Accessibility lead `
QA lead `
UX lead `
Product marketing lead `
Operations lead `
Additional members `

Open issues/risks


Stage 1: Definition

1. Feature overview

The Source Map feature adds JavaScript source mapping, which allows JavaScript programmers to get to their original source files for errors, source viewing, etc. The idea is that most deployed JavaScript comes from multiple files that are grouped into one and minified. Sometimes, deployed JavaScript was written in another programming language, such as CoffeeScript.

These same things apply to CSS. LESS, SCSS/SASS and Stylus are alternative languages that compile to CSS and there are tools that will minify CSS files as well.

2. Users & use cases

Minified Files

Users will concatenate and minify their CSS for deployment. If there are errors, they would like to see those errors in the original context. They would also like to be able to use our styling tools with original source as much as possible.


Mozilla's webdev group uses LESS.js to assist them in producing CSS. They would like to be able to see errors relative to their LESS files and even edit the LESS files directly in the style editor.

3. Dependencies


4. Requirements

  1. Support for loading the same Source Mapping format used in DevTools/Features/SourceMap but for CSS
  2. Errors in Web Console provide references to the original files
  3. Style Inspector links to the original files


  1. Style Editor support for LESS via add-on



Stage 2: Design

5. Functional specification


6. User experience design


Stage 3: Planning

7. Implementation plan


8. Reviews

Security review


Privacy review


Localization review




Quality Assurance review


Operations review


Stage 4: Development

9. Implementation


Stage 5: Release

10. Landing criteria


Feature details

Priority P3
Rank 2
Theme / Goal `
Roadmap Developer Tools
Secondary roadmap `
Feature list Desktop
Project `
Engineering team DevTools

Team status notes

  status notes
Products ` `
Engineering ` `
Security ` `
Privacy ` `
Localization ` `
Accessibility ` `
Quality assurance ` `
User experience ` `
Product marketing ` `
Operations ` `