Fails silently with missing file and postcss-import about gulp-postcss

[w0rm]

@timkelty, given this gulpfile:

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var postcssImport = require('postcss-import')

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

  return gulp
    .src('src/style.css')
    .pipe(postcss([postcssImport()]))
    .on('error', function (error) {
      console.log(error)
    })
    .pipe(gulp.dest('dest'))

})

and the following css file src/style.css:

@import "./missing.css";

I get the following output in the console:

{ [Error: Error: /Users/w0rm/Work/postcss-test/src/style.css:1:1: Failed to find './missing.css' from /Users/w0rm/Work/postcss-test
    in [ 
        /Users/w0rm/Work/postcss-test/src
    ]]
  message: 'Error: /Users/w0rm/Work/postcss-test/src/style.css:1:1: Failed to find \'./missing.css\' from /Users/w0rm/Work/postcss-test\n    in [ \n        /Users/w0rm/Work/postcss-test/src\n    ]',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-postcss',
  __safety: { toString: [Function] } }

So I guess it is working as expected and the error is passed as a stream event.

[w0rm]

@timkelty got no further input from your side, may I close this?

[timkelty]

I'll test right now and see what's going on with my environment.

[olegstepura]

Gulp-postcss (not sure, maybe postcss itself) seem to always fail silently. Any error with missing paths in some of the plugins causes it silently fail. It should print the error, this hardens debugging very much.

Issues noticed with cssgrace (when url points to missing file), postcss-assets with same problem of resolving paths.

[olegstepura]

This is how it looks like:

web@web ~/gulp $ npm install gulp-postcss
[email protected] node_modules/gulp-postcss
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
web@web ~/gulp $ gulp build:css:next
[14:06:49] Using gulpfile ~/gulp/host/gulpfile.js
[14:06:49] Starting 'build:css:next'...
web@web ~/gulp $

[timkelty]

Sticking gulp-plumber in the pipe right before postcss takes care of everything for me. @olegstepura I would give that a try if you haven't yet.

[olegstepura]

It helps. Thanks!

[w0rm]

gulp-postcss has a test for correct stream error that you can listen to and log to console.

It also tests that in case of cssSyntaxError it should emit a pretty error from postCSS instead of regular js stack trace.

According to gulp plugin guidelines an error should not be thrown, but it should be emitted.

[olegstepura]

Well, stack trace is helpful when you don't know who did thrown an exception. In case of postcss plugins exceptions are no longer thrown by some gulp plugins, it's thrown by postcss plugins that know nothing about gulp.

[w0rm]

@olegstepura of course stack trace is helpful, and it is there for non-cssSyntaxErrors, so feel free to subscribe to the stream error event and use your preferred method of displaying the errors. Tests should give you a hint of how to capture stream errors, or use gulp-plumber with gulp-postcss.

[olegstepura]

I'm very exceited of the project postcss itself. but silent fails almost made stop trying. Also it seems some postcss plugins are still bad quality, plugin order matters, and so on... but thanks to @timkelty for pointing to gulp-plumber, I was thinking plumber was designed for other reasons.

This is an offtop, but don't you know if it is possible to tell plumber to print stack?

[olegstepura]

Ok, seems the best way is to setup custom error logging function

[w0rm]

@olegstepura feel free to open pull request to improve the quality of certain postcss plugins. This repository is only related to gulp plugin.

[simonsmith]

Hoping this is the right place to ask, but what is the best way to surface warnings from postcss plugins now?

For example postcss-bem-linter uses the warning class as seen here. But I don't think this triggers an error in a stream?

Have tried using postcss-log-warning with throwError set to true but still doesn't seem to throw an error.

Any thoughts?

[w0rm]

@simonsmith I think that warnings should behave differently from the errors, as far as I understand, according to guidelines they should be output in the console rather than emitted as errors.

//cc @ai

[VinSpee]

I'm also facing this issue, but plumber doesn't seem to be helping:

given:

gulp.task('styles:toolkit', function () {
  var sourcemaps = require('gulp-sourcemaps');
  var postcss = require('gulp-postcss');
  //var bem_linter = require('postcss-bem-linter');
  var calc = require('postcss-calc');
  var colorFunction = require('postcss-color-function');
  var customMedia = require('postcss-custom-media');
  var customProperties = require('postcss-custom-properties');
  var fontVariant = require('postcss-font-variant');
  var lost = require('lost');
  var inline = require('postcss-import');
  var nested = require('postcss-nested');
  var simpleVars = require('postcss-simple-vars');
  var plumber = require('gulp-plumber');
  var processors = [
    //bem_linter(),
    nested,
    inline(),
    customProperties(),
    calc(),
    simpleVars(),
    customMedia(),
    lost(),
    colorFunction(),
    fontVariant()
  ];
  return gulp.src(config.src.styles.toolkit)
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(postcss(processors))
    .pipe(sourcemaps.write())
    .pipe(prefix())
    .pipe(gulpif(!config.dev, csso()))
    .pipe(gulp.dest(config.dest + '/assets/toolkit/styles'))
    .pipe(gulpif(config.dev, reload({stream:true})))
});

running:

gulp styles:toolkit --dev

resulting:

[14:21:19] Using gulpfile ~/projects/LevelEleven/ui-kit/gulpfile.js
[14:21:19] Starting 'styles:toolkit'...

[VinSpee]

I also tried using postcss-log-warnings, now I get this:

gulp styles:toolkit
[14:41:10] Using gulpfile ~/projects/LevelEleven/ui-kit/gulpfile.js
[14:41:10] Starting 'styles:toolkit'...

** postcss-log-warnings: warnings were found **

but that's it.

[VinSpee]

in addition, postcss-import IS finding these files:

$>  gulp styles:toolkit
[14:58:26] Using gulpfile ~/projects/LevelEleven/ui-kit/gulpfile.js
[14:58:26] Starting 'styles:toolkit'...
[ '/Users/vince/projects/LevelEleven/ui-kit/src/assets/toolkit/styles/toolkit.css',
  '/Users/vince/projects/LevelEleven/ui-kit/node_modules/suitcss-components-grid/index.css',
  '/Users/vince/projects/LevelEleven/ui-kit/node_modules/suitcss-components-grid/lib/grid.css',
  '/Users/vince/projects/LevelEleven/ui-kit/src/assets/toolkit/styles/dude.css' ]

** postcss-log-warnings: warnings were found **

[w0rm]

@VinSpee sorry, I'm super busy and will only be able to look into this on the weekend.

[VinSpee]

No problem! I appreciate you even looking at all. On a second glance, I think the issue may be in gulp-sourcemaps or maybe even gulp-autoprefixer because if I remove them, the build works. I'll close for now.

[davidtheclark]

@VinSpee that issue is about postcss-log-warnings I believe, not gulp-postcss. See: davidtheclark/postcss-log-warnings#6 --- working on figuring it out.

[w0rm]

@davidtheclark It seems something is indeed wrong in exception handling, problem explained in this gist: https://gist.github.com/w0rm/36ff0b4399a414384690

By default, if there is an unhandled error in the stream, gulp will terminate and output the error in the console, but this is not happening with gulp-postcss.

[w0rm]

My guess is that it has something to do with promises, because an exception that is emitted from the transform function body is output in console, but the one from the postcss promise is not.

    postcss(processors)
      .process(file.contents, opts)
      .then(handleResult, handleError) // this error is not in console

    handleError(new Error('this error will be output'))