Property missing ':' error

[ltarasiewicz]

This is a task that keeps erroring out with "property missing :":

gulp.task('concatenateCSS', function() {
    return gulp.src("themes/my_domain/css/*.css")
        .pipe(concatCSS("bundle.css"))
        .pipe(gulp.dest('themes/mydomain/css/dist/'));
});

The relative paths are set correctly. What is more interesting, if I change src to themes/my_domain/css/custom.css that tasks proceeds without errors (who would want to concatenate one file anyway).

More so, passing gulp.src(['themes/my_domain/css/custom.css', 'themes/my_domain/css/responsive.css']) does not error out, but only the first file is read. The second argument (responsive.css) is ignored.

How can I get rid of this error and concatenate all files in one folder with gulp-concat-css?

[mariocasciaro]

It seems you have a syntax error in one of your css files, which prevent gulp-concat-css to parse the file. You should try to isolate the file with the error.

[mattez]

Hi. I get same error when I use gulp-concat-css on jQuery UI CSS files. I found file /bower_components/jquery-ui/themes/base/theme.css and this line which makes an error property missing ':'. (That line is VALID CSS)

.ui-widget-shadow {
    background: #aaaaaa/*{bgColorShadow}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/;
}

so I try to fix code. I put ":" in place which was pointed as problem place (inside comments). I was pretty surprised: before:

/*{bgColorShadow}*/ ... /*{bgImgUrlShadow}*/ ... /*{bgShadowXPos}*/ ... /*{bgShadowYPos}*/...;

after (watch colons in comments! ;):

/*{bgColorShadow}*/ ... /*{bgImgUrlSha:dow}*/ ... /*{bgShadowX:Pos}*/ ... /*{bgShadowY:Pos}*/...;

It was also missing "{}" in the end of code (wtf?) I finished with this INVALID code which is OK for gulp-concat-css and it runs thru soothly without errors:

.ui-widget-shadow {
    background: #aaaaaa/*{bgColorShadow}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlSha:dow}*/ 50%/*{bgShadowX:Pos}*/ 50%/*{bgShadowY:Pos}*/ repeat-x/*{bgShadowRep:eat}*/;
}
{}

[mariocasciaro]

gulp-concat-css it's just some glue code for rework and some rework plugins, this is likely some parsing problem buried in one of those libraries. I'll create a test case and try to investigate the issue.

[ray007]

Running the css files though minification (using yui compressor) before unification seems to fix the problem for me.

[margusbirk]

removing comments usually helps:

var stripCssComments = require('gulp-strip-css-comments');
...
.pipe(stripCssComments())
.pipe(concatCSS("bundle.css"))
...

[mattez]

@margusbirk Thanks for tip, I'll try it. It sounds promising.