Cssnano: js-api to pass in sourcemap

[thisconnect]

Hi, is there a way to pass a sourcemap to cssnano via the js api?

// ... postcss stuff
.then(result => {
  return cssnano.process(result.css, {
      // pass in result.map somehow?
    })
  })

I know cssnano could directly be used as postcss plugin. But the reason I'd like to do it after postcss is to log the unminified and minified sizes and write both stylesheets to separate files. I.e.

• dist/
  
  
  
  • bundle.css
  
  
  • bundle.css.map
  
  
  • bundle.min.css
  
  
  • bundle.min.css.map
  
  

For now I guess I could write the unminified file first and then read back into cssnano. But I'd prefer to just pass the map directly via cssnano JavaScirpt api.

[thisconnect]

EDIT:
I succeeded by studying how cssnano-cli does it.
I could make it work by writing the unminified css+sourcemap first, then run cssnano.

cssnano.process(result.css, {
  map: true,
  from: 'dist/bundle.css',
  to: 'dist/bundle.min.css'
})

from and to is I guess unofficial/unsupported api and passing in result.map would be much nicer.

[ben-eb]

@thisconnect cssnano passes the options for sourcemap generation straight through to PostCSS. The documentation for this on our end could use improving, for sure, but you should be able to find what you are looking for in the PostCSS sourcemap documentation.

[thisconnect]

Thanks for the link, if I understood correctly pref is what I am looking for, but now the sources point to the generated unminfied file. I guess I stick to my first approach.

const input = 'src/styles/main.css';
const output = 'dist/styles/bundle.css';

postcss([
  atImport()
})
.process(css, {
  from: input,
  to: output,
  map: {
    inline: false
  }
})
.then(result => {
  return cssnano.process(result.css, {
    map: {
      inline: false
    },
    from: output, // <--- this is wrong at I guess
    to: 'dist/styles/bundle.min.css',
    prev: result.map // pass in result.map ?
  })
  .then(function(min){
    return [result, min]
  })
})
})

[thisconnect]

Found it http://api.postcss.org/global.html#processOptions

the solution seems to be to pass the sourcemap to map.pref

map: {
  inline: false,
  prev: result.map
}

[ben-eb]

I've added a source map example to https://github.com/ben-eb/cssnano/blob/master/packages/cssnano/quickstart.js, hope this helps. 👍