Unknown word

[stevenvachon]

It appears to be choking on line comments:

[10:45:46] Using gulpfile ~/gulpfile.js
[10:45:46] Starting 'css'...
[10:45:46] Starting 'js'...
[10:45:46] Starting 'css:watch'...
[10:45:46] Starting 'js:watch'...
[10:45:47] 'css' errored after 79 ms
[10:45:47] Error in plugin 'gulp-postcss'
Message:
    /Users/stevendvachon/less/site.less:6:1: Unknown word

// Namespaces
^
@import "site/text";
Details:
    fileName: /Users/stevendvachon/less/site.less
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false
[10:45:47] The following tasks did not complete: js, css:watch, js:watch
[10:45:47] Did you forget to signal async completion?

var less = require("postcss-less-parser");
var lessOptions = { rootpath:"/", strictMath:true };
var postcss = require("gulp-postcss");
var postcssPlugins = [ less(lessOptions)/*, cssnext, cssnano({autoprefixer:false})*/ ];

gulp.src("./less/site.less")
  .pipe(postcss(postcssPlugins))
  .pipe(concat("style.css"));

[matthew-dean]

What's your Less version?

[stevenvachon]

I was using the latest version before switching to this.

[stevenvachon]

I use a plugin that I wrote called less-plugin-future-compat. Perhaps it's not getting loaded in via plugins in lessOptions?

I'm also using gulp v4 (git+https://git@github.com/gulpjs/gulp.git#4.0)

[matthew-dean]

It should be passing the options as is to the Less compiler. Are you setting Less as the parser?

[stevenvachon]

I thought that this library already did that. The documentation doesn't have an example that specifies a different parser.

[matthew-dean]

@stevenvachon This plugin provides both a "postcss plugin" and a "postcss custom parser", so when sending to PostCSS, you need to specify both.

[stevenvachon]

What would the code look? This is from the documentation and does not work:

var postcss = require('gulp-postcss');

gulp.task('less', function () {
    return gulp.src('./css/src/style.less').pipe(
        postcss([
            require('postcss-less-engine')({ /* Less.js options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

[matthew-dean]

You're right, I think the doc is incorrect. The correct usage should be (I believe):

var postcss = require('gulp-postcss');
var less = require('postcss-less-engine');

gulp.task('less', function () {
    return gulp.src('./css/src/style.less').pipe(
        postcss([
            less({ /* Less.js options */ })
        ], { parser: less.parser })
    ).pipe(
        gulp.dest('./css')
    );
});

Can you verify?

[stevenvachon]

Still getting "unknown word".

[stevenvachon]

TypeError: Cannot read property 'name' of undefined
    at LazyResult.handleError (/project/node_modules/postcss/lib/lazy-result.js:89:22)
    at /project/node_modules/postcss/lib/lazy-result.js:127:31
    at runMicrotasksCallback (internal/process/next_tick.js:58:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickDomainCallback (internal/process/next_tick.js:122:9)

[matthew-dean]

Thanks, this was definitely a bug. The file stream provided by Gulp was being interpreted by this plugin as non-input. Fixed and published. The first part of your bug report was indeed the parser not being set.

[stevenvachon]

It works now. Thanks!