ENOENT Error

[LukeMauldin]

Receive error:

lmauldin@9c68fd81e7d7:/var/www/html/pmtool/erp-extender/pms420$ ./node_modules/.bin/gulp less
[15:24:43] Using gulpfile /var/www/html/pmtool/erp-extender/pms420/gulpfile.js
[15:24:43] Starting 'less'...
Potentially unhandled rejection [2] Error: ENOENT, open '<input css 1>'
    at Error (native)

Relevant gulp file:

gulp.task("less", function() {
    var cleancss = new lessPluginCleanCSS({ advanced: true });
   var autoprefix= new lessPluginAutoPrefix({browsers: ["last 2 versions"]});
    //return gulp.src(['./assets/styles/application.less', './assets/styles/*/*.less'])
    return gulp.src(['./assets/styles/application.less'])
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix]
        }))
        .pipe(sourcemaps.write()) //.pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./webroot/styles'));
});

[seven-phases-max]

It looks like the same issue as in less/less-plugin-clean-css#8, though I have no idea of it could be too. It looks like some incompatibility between how gulp-less and gulp-sourcemaps handle their sourcemaps and/or the output CSS itself (at least when Less plugins are used). Though according to gulp-community/gulp-less#169 it's something wrong with how plugins handle sourcemaps... hmm...

[LukeMauldin]

I disabled sourcemaps and now the plugin runs without error. However, I don't see any prefixed CSS files?

gulp.task("styles", function() {
    var cleancss = new lessPluginCleanCSS({ advanced: true });
    var autoprefix= new lessPluginAutoPrefix({browsers: ["last 2 versions"]});
    return gulp.src(['./assets/styles/application.less', './assets/styles/*/*.less'])
        .pipe(changed('./webroot/styles'))
        //.pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix]
        }))
        //.pipe(sourcemaps.write()) //.pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./webroot/styles'));
});

[seven-phases-max]

However, I don't see any prefixed CSS files?

Are you sure? Most of "last 2 versions" browsers may not need prefixes for most of properties, but nothing at all... hmm, try "last 99 versions" just to make sure it's actually working.

[LukeMauldin]

I have updated my gulp file to the below and still don't see any prefixed CSS files in the output.

gulp.task("styles", function() {
    var cleancss = new lessPluginCleanCSS({ advanced: true });
    var autoprefix= new lessPluginAutoPrefix({browsers: ["last 2 versions"]});
    return gulp.src(['./assets/styles/application.less', './assets/styles/*/*.less'])
        .pipe(changed('./webroot/styles'))
        //.pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix]
        }))
        //.pipe(sourcemaps.write()) //.pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./webroot/styles'));
});

[jbhannah]

I get this issue (Potentially unhandled rejection [2] Error: ENOENT: no such file or directory, open '$stdin') specifically when using this plugin in combination with sourcemaps. When using just the clean-css LESS plugin, I get correct source maps.

gulp.task('less', function () {
  return gulp.src(['./assets/css/main.less'], {base: '.'})
    .pipe(gulpIf(!isProd(), sourcemaps.init()))
    .pipe(less({
      plugins: [cleanCSS] // works
   // plugins: [autoprefix, cleanCSS] // doesn't work
    }))
    .pipe(gulpIf(!isProd(), sourcemaps.write('.')))
    .pipe(gulp.dest(DEST))
    .pipe(livereload());
});

[jbhannah]

It should be noted that this is on io.js 3.0.x and 3.1.x. Could be an io.js issue?

[borekb]

Confirming this issue on Node 4.0.0.

[lukeapage]

My current thinking is that this is not node version specific and is the same bug that @seven-phases-max pointed to, which is a bug in clean-css. less/less-plugin-clean-css#8.. which is clean-css/clean-css#593

If you can reproduce without clean-css, I'll investigate.

If you are stuck on this bug consider helping to track down the problem in clean css (some progress and evidence is on that issue) or find a different css minifier (or don't use sourcemaps).

[borekb]

I'd like to help with this but am not very well-versed in the less package / its plugins. This is what my code roughly looks like:

var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('less-plugin-autoprefix');

gulp.task('less', function () {

    var destFolder = projectDir + '/css';

    return gulp.src(projectDir + '/css/style-*.less')
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [new autoprefixer()],
            relativeUrls: true
        }))
        .on('error', function (error) {
            console.log(error);
        })
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(destFolder));

});

What do you mean by "reproducing without clean-css"?

[lukeapage]

What do you mean by "reproducing without clean-css"?

okay so it isn't a clean-css issue, since you are reproducing with the above code.

is that in a repo somewhere? if I have an easy to reproduce test case it makes tracking it down easier

[borekb]

There isn't but I'll try to create one.

[borekb]

There you go: https://github.com/borekb/less-plugin-autoprefix-17

[lukeapage]

thanks, I'll take a look now

[lukeapage]

seems like it might be a regression in postcss, but am investigating further
postcss/postcss#96

the sourcemap going into postcss has all less sources. coming out it has 1 more source, named <input css 1> which doesn't exist (of course).

[lukeapage]

Ok, it might not be a regression, but it is related to a quirk in postcss.

one way to fix it is to set

            sourceMap: {
                outputSourceFiles: true
            },

in gulp less.

e.g.

        .pipe(less({
            sourceMap: {
                outputSourceFiles: true
            },
            plugins: [new autoprefixer()],
            relativeUrls: true // so that e.g. a link to the bg-noise image works from the 'lib' directory
        }))

basically postcss always adds its input to the sources. If you have an output filename its possible to get postcss to merge that source with the existing one (I don't really know why its like that). postcss source is less' output and actually isn't referenced by the map, because the map needs to go from the input less files straight to the output.

possible solutions

1. get postcss to fix this (I tried previously and wasn't listened to)
2. remove the postcss source from the sourcemap after it is returned
3. include the postcss source in the sources content, so nothing tries to fetch it

[lukeapage]

Please try again now, I found a simpler solution.
It is published as 1.5.1

[jbhannah]

👍, fixed it for me.

[borekb]

Yep, worked for me too. Thanks!

[wazp]

For some reason this still doesn't work for me with 1.5.1. I have version 5.0.10 of postcss installed - maybe some more changes were made that broke it again?

A real shame that postcss developers aren't listening to you at all!

[lukeapage]

@wazp I've re-installed @borekb example repo with the latest versions and re-ran the test case and it still passes.
Could you provide a test case?

[wolfy1339]

The workarounds noted above don't seem to work for me either

[matthew-dean]

@wolfy1339 Would this be a suitable workaround? https://github.com/Crunch/postcss-less

[wolfy1339]

I will take a look, but in the mean time I can suggest another workaround, instead of using LESS plugins we use gulp or grunt plugins instead. For some reason that fixes the sourcemap problem

[cybersam]

Can someone with edit access please correct the title of this issue by replacing "ENONET" with "ENOENT"? This will save some time for people (like me) searching online for "ENONET"; this issue is the first one shown by Google.