Error: ENOENT with lessc & plugin-autoprefix & plugin-clean-css

[ptim]

I'm trying to get my less autoprefixed and minified, with sourcemaps, but I'm getting the error:
Error: ENOENT: no such file or directory, open '/path/style.css.map'. (Full error below)

Am I missing something simple? I can get a working sourcemap with autoprefixer, or with clean-css, or with neither, but never with both..

Here are the npm scripts I'm using:

  "devDependencies": {
    "less": "^2.5.1",
    "less-plugin-autoprefix": "^1.4.2",
    "less-plugin-clean-css": "^1.5.0",
  },
  "scripts": {
    "comment": "# works!!",
    "sourcemap:basic":   "lessc -s --source-map library/less/style.less library/css/style.css",

    "comment": "# works!!",
    "sourcemap:autop":  "lessc -s --source-map --autoprefix=\"last 2 versions, ie > 7\" library/less/style.less library/css/style.css",

    "comment": "# works!!",
    "sourcemap:clean":  "lessc -s --source-map --clean-css=\"--s1 --advanced --compatibility=ie8\" library/less/style.less library/css/style.css",

    "comment": "# fails: Error: ENOENT: no such file or directory, open '/path/style.css.map'",
    "sourcemap:both":  "lessc -s --source-map --autoprefix=\"last 2 versions, ie > 7\" --clean-css=\"--s1 --advanced --compatibility=ie8\" library/less/style.less library/css/style.css",
  }

The stylesheet:

body {
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

And the directory structure:

• package.json
  • library/less/style.less
  • library/css/style.css

full error:

Error: ENOENT: no such file or directory, open '/path/style.css.map'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.readFileSync (fs.js:399:15)
    at fromSource (/path/node_modules/less-plugin-clean-css/node_modules/clean-css/lib/utils/input-source-map-tracker.js:73:32)
    at InputSourceMapStore.track (/path/node_modules/less-plugin-clean-css/node_modules/clean-css/lib/utils/input-source-map-tracker.js:214:5)
    at /path/node_modules/less-plugin-clean-css/node_modules/clean-css/lib/clean.js:120:44
    at CleanCSS.minify (/path/node_modules/less-plugin-clean-css/node_modules/clean-css/lib/clean.js:102:42)
    at Object.CleanCSSProcessor.process (/path/node_modules/less-plugin-clean-css/lib/clean-css-processor.js:40:48)
    at ParseTree.toCSS (/path/node_modules/less/lib/less/parse-tree.js:44:48)
    at /path/node_modules/less/lib/less/render.js:31:40

Let me know if I can provide further info, TIA, Tim

[ispringer]

As crazy as this may sound, try swapping the order of the autoprefix and clean-css plugins on the lessc command line. That is, put clean-css first and autoprefix second. That solved it for me.

[seven-phases-max]

I can get a working sourcemap with autoprefixer, or with clean-css

Are they actually working, or "it just compiles" w/o a error? AFAIR one of these plugins (clean-css I presume) does not really support proper sourcemap passthrough, thus the sourcemap file would be invalid anyway.

[ispringer]

You are right. Although it compiled, the line numbers in the source-map were all messed up. They were messed up for clean-css+autoprefix, clean-css only, and autoprefix only. So it appears these plugins cannot be used in conjunction with source mappings period, which is pretty sad. I briefly looked into using postcss for autoprefix support, but it didn't look like that would work with less source mappings either. If anyone has figured out a way to use autoprefix in conjunction with less source mappings, please share. If not, it may be time for me to ditch less, because I'm tired of using lesshat for prefixing.

[seven-phases-max]

A usual recommendation I assume would be "do not use lessc" as a "project/tool-chain environment" thing. Consider using a real tool-chain box made specifically for the purpose (e.g. grunt/gulp and so on). Actually at least autoprefix lib is able to properly transform an input sourcemap and it is working just fine in a proper tool-chain stuff (I suspect the same goes for clean-css most recent versions). While lessc itself is never going to replace any of those by supporting all possible features (simply because it never made too much sense this way, see #1917 etc.).

[ispringer]

I am actually using grunt and grunt-contrib-less and still having this issue. As far as I can tell, grunt-contrib-less is just a fairly thin wrapper around less.

[matthew-dean]

In my mind, the "post-processing plugins" of Less should be deprecated, because the purpose of Less is not a task runner, and AFAIK it doesn't properly translate source maps through each step.

Even if you're using Grunt or Gulp, it looks like you're using Less plugins vs Grunt plugins that iterate through various tasks. I've had no problem using Gulp with the "gulp-sourcemaps" plugin, and running a series of pipes after Less that include autoprefixing and minification.

When this was proposed for Less, Grunt was fairly new, and I'm not sure if Gulp was a thing or not. I think at this point, just don't use Less post-processing plugins (IMHO). (Note, there are other types of plugins coming to Less with much greater value.)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.