With all the optimization techniques like bundling and minification etc getting important and popular it is good that we talk about Source Maps now. Think of this, once you bundle all the CSS files you have into one single file, how do you know which part of CSS was written in which file? To make the situation a little more tricky let us minify the bundled CSS file too. Well, here comes Source Maps to the rescue!
What are CSS Source Maps or CSS.map file?
CSS source maps are source map files for CSS. So a CSS source map file would contain the references of code that is within the minified or bundled CSS file. Usually CSS map files would be named after the CSS file names but with .map extension. For example, main.css might have its map file as main.css.map
How to use a source map?
Most of the modern browsers nowadays have inbuilt support for source map files. So if the source map files are available, on Inspecting an element using the developer tools shipped with the browser, it would show you the name of the file and line number where the code is written.
For example, let’s try an example using chrome :
Visit https://getbootstrap.com/getting-started/ (Bootstrap’s download page) and inspect the “Download” page heading. You can see that it has a class named “page-header” and under the “styles” tab on the right you can see that the class is defined in a file named “type.less” on line number 158 (at the time I wrote this) . Please see the screenshot below :
Now, if you notice there is no “type.less” file included on the page anywhere. This is coming from the maps file they have defined which is bootstrap.css.map located on the same path where bootstrap.css file is located. But how did the browser know this? Let check that out.
How to intimate browser that source map for a file is available?
There are different ways through which you can intimate the browser that the Source Map file for a file is available:
1. Through comment :
You can include a comment in a CSS or JS file which intimates the browser that the map file is also available and the path to it.
The Syntax for it is :
/*# sourceMappingURL=/path/to/thefile.css.map */
For example in the case of Bootstrap.css you can find the comment referring to the SourceMaps file at the end as follows:
/*# sourceMappingURL=bootstrap.css.map */
This way the browser recognizes that the source map file is located in the same folder as the CSS file but with the file name as bootstrap.css.map .
2. Through header information :
How to generate source maps ?
NodeJs Modules like generate-source-map .
You can refer to their page for more details.
If you are using Webpack please refer https://webpack.js.org/configuration/output/#outputsourcemapfilename for more details on How to generate source map file using Webpack.
If you are using GulpJs you can refer https://www.npmjs.com/package/gulp-sourcemaps for more details on How to generate Source maps using GulpJs .
If you are using LESS / SASS, during the compile time itself you can pass parameters to the command to generate the source maps file.
So say if you are using LESSC compiler you can use the following command
# compile bootstrap.less to bootstrap.css with the map file as bootstrap.css.map
$ lessc bootstrap.less bootstrap.css --source-map
If you don’t provide a file name, it would use the output file’s name with a .map extension.
To conclude, I would say that source maps are playing a significant role in helping debug compressed or bundled files. With the trend being to optimize the websites, it becomes very important to minify and bundle the CSS and JS files, and once we do that we would definitely require source maps to debug it. You can use a compiler of your choice however, I would suggest to you the same ones that you use to compile, compress or bundle the CSS/ JS if they support it. Well, so go ahead try out generating source maps.