Using the grid support causes .map files to contain <no source> in sources list

[ekatioz]

I have a simple .css with grid-areas:

.container{
    display: grid;
    grid-template-areas: "a";
}

.a{
    grid-area: a;
}

and I process it using

fs.readFile("./styles.css", (err, css) => {
  postcss([autoprefixer({ grid: "no-autoplace" })])
    .process(css, { from: "./styles.css", to: "./post-styles.css" , map: { inline: false }})
    .then(result => {
      fs.writeFile("./post-styles.css", result.css, () => true);
      if (result.map) {
        fs.writeFile("./post-styles.css.map", result.map, () => true);
      }
    });
});

The output .css is as expected, but the output .css.map is not:

{
    "version": 3,
    "sources": [
        "styles.css",
        "<no source>"
    ],
    "names": [],
    "mappings": "AAAA,YAAY,iBAAa,EAAb,aAAa,EAAE,wBAAwB,CAAC;;AAEpD;ICFA,gBAAA;IAAA,mBAAA;IDGI,YAAY;AAChB",
    "file": "post-styles.css",
    "sourcesContent": [
        ".container{ display: grid; grid-template-areas: \"a\";}\n\n.a{\n    grid-area: a;\n}",
        null
    ]
}

As you see, there is a "<no source>" entry in "sources" and a null in "sourcesContent".

This is not a huge problem, but it causes 404s because Chrome is trying to get http://some.domain.com/<no source>.

[ai]

@ekatioz thanks for the report.

Seems like Grid Layout code forgets to set Node#source somewhere.

Can you use source map visualization to find what nodes have no source?

[ekatioz]

Unfortunately not. The tool you linked can't process the mapping file and gives me an error: "Source '<no source>' missing".

[ai]

@ekatioz you can try another vizualizer

[ekatioz]

Weird results... All lines were mapped to the expected counterpart in the generated CSS file. But the lines

  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

/*# sourceMappingURL=post-styles.css.map */

were mapped to "<no source>" as well. Even the sourceMappingURL is linked in the Source Map...

For reference, my files:

Original:

.container {
  display: grid;
  grid-template-areas: "a";
}

.a {
  grid-area: a;
}

Generated:

.container {
  display: -ms-grid;
  display: grid;
      grid-template-areas: "a";
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

/*# sourceMappingURL=post-styles.css.map */

Source Map:

{"version":3,"sources":["styles.css","<no source>"],"names":[],"mappings":"AAAA;EACE,iBAAa;EAAb,aAAa;MACb,wBAAwB;AAC1B;;AAEA;ECLA,gBAAA;EAAA,mBAAA;EDME,YAAY;AACd","file":"post-styles.css","sourcesContent":[".container {\n  display: grid;\n  grid-template-areas: \"a\";\n}\n\n.a {\n  grid-area: a;\n}\n",null]}

[ai]

Even the sourceMappingURL is linked in the Source Map...

sourceMappingURL is just a link to file with mappings. Autoprefixer generates few mappings wrong and they point to <no source>.

But the lines were mapped

Can you try to look at lib/hacks for files that generate these properties (you can just search for property names)?

Seems like we just forget to set source in node constructor. You can copy it from other (related) node. I will help you with the process.