css - 如何解释源 map 映射？

Question

假设我有这个样式表:

.d1
    width: 10px
    .d2
        width: 20px

它产生以下 css 代码(具有 nested 输出样式):

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

源映射 (v3) 包含以下映射:

AAAA,AAAA,GAAG,CAAC;EACA,KAAK,EAAE,IAAK,GAES;EAHzB,AAEI,GAFD,CAEC,GAAG,CAAC;IACA,KAAK,EAAE,IAAK,GAAG

用this service解码后，我得到了:

([0,0](#0)=>[0,0]) | ([0,0](#0)=>[0,0]) | ([0,3](#0)=>[0,3]) | ([0,4](#0)=>[0,4])
([1,4](#0)=>[1,2]) | ([1,9](#0)=>[1,7]) | ([1,11](#0)=>[1,9]) | ([1,16](#0)=>[1,13]) | ([3,25](#0)=>[1,16])
([0,0](#0)=>[2,2]) | ([2,4](#0)=>[2,2]) | ([0,3](#0)=>[2,5]) | ([2,4](#0)=>[2,6]) | ([2,7](#0)=>[2,9]) | ([2,8](#0)=>[2,10])
([3,8](#0)=>[3,4]) | ([3,13](#0)=>[3,9]) | ([3,15](#0)=>[3,11]) | ([3,20](#0)=>[3,15]) | ([3,23](#0)=>[3,18])

源是在 similar fashion 中生成的使用 node-sass (libsass)。

我的理解是，这些是原始文件和结果文件中的点对。但是让我们以第二行的最后一对为例:([3,25](#0)=>[1,16])。第 3 行第 25 列？这有点出乎意料，你不觉得吗？

我做错了吗？或者源映射不正确？如果可以，您能否建议生成正确源映射的方法？

Answer 1

有一个 great tool ，您不仅可以使用 libsass，如 here 所述.

请注意，您需要一个以多行注释的形式嵌入源映射并在其中包含 sourcesContent 字段的文件，如下所示:

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmQxIHtcbiAgICB3aWR0aDogMTBweDtcbiAgICAuZDIge1xuICAgICAgICB3aWR0aDogMjBweDtcbiAgICB9XG59XG4iXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

您只需将其粘贴到“输出”字段中，然后单击“分析”，一切就绪。在此之前输入字段中的内容无关紧要。它被 source map 中的内容替换。使用箭头键在映射之间切换。

让我们看看如何使用 ruby​​ 的 sass gem 来做到这一点:

gem 文件:

source 'https://rubygems.org'
gem 'sass'

package.json:

{
  "dependencies": {
    "convert-source-map": "^1.3.0"
  }
}

1.scss:

.d1 {
    width: 10px;
    .d2 {
        width: 20px;
    }
}

1.js:

var convert = require('convert-source-map');
var fs = require('fs');
console.log(
    convert.fromJSON(
            fs.readFileSync('1.css.map')
    ).toComment()
    .replace(/^\/\//, '/*')
    .replace(/$/, ' */')
);

然后

$ bundle install && npm i
$ rm -f 1.css* && bundle exec sass --sourcemap=inline 1.scss 1.css
$ cat 1.css | head -n -1 && node 1.js
.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

将其放入输出字段即可。

工作流程有点复杂。但这是检查源映射的更轻松的方法，然后“手动”进行。我说的是我自己的经历:)

如果您有 json 格式的源映射，例如:

{ version: 3,
  sourceRoot: '/path/to/dir',
  sources: [ '1.css' ],
  sourcesContent: [ 'body {\n    background: #ddd;\n}\ndiv {\n    width: 100px;\n    height: 100px;\n    margin: auto;\n    background: #666;\n}\n' ],
  names: [],
  mappings: 'AAAA,AAAA,IAAI,AAAC,CACD,UAAU,CAAE,IAAI,CACnB,AACD,AAAA,GAAG,AAAC,CACA,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CACnB' }

您可以按如下方式将其转换为评论:

var convertSourceMap = require('convert-source-map')
console.log(convertSourceMap.fromJSON(mapAsAString).toComment({multiline: true}));

附言这里是some more tools .和 introduction to source maps .另外，sourcemap-codec package可能会派上用场。