Using concat with css files - Error: "version" is a required argument.

[dragonautdev]

Hi.

I've decided to use sigh for a project and I'm currently trying to accomplish a simple task: Concatenate css files. Although very trivial task, it's being impossible to do because an exception happens inside a library the concat plugin depends on.

My pipeline is as follows:

pipelines['build-vendor-css'] = [
        glob({basePath: 'bower_components'}, 'ng-dialog/css/ngDialog.css', 'ng-dialog/css/ngDialog-theme-plain.css'),
        concat('base.css'),
        write('dist/app/css')
    ];

And the error I'm getting is:

  at SourceMapConsumer.BasicSourceMapConsumer (/Users/rjuliani/WebstormProjects/billeteracli/node_modules/sigh-core/node_modules/source-map/lib/source-map/source-map-consumer.js:292:24)
  at new SourceMapConsumer (/Users/rjuliani/WebstormProjects/billeteracli/node_modules/sigh-core/node_modules/source-map/lib/source-map/source-map-consumer.js:26:9)
  at /Users/rjuliani/WebstormProjects/billeteracli/node_modules/sigh-core/lib/sourceMap.js:49:12
  at Array.map (native)
  at concatenate (/Users/rjuliani/WebstormProjects/billeteracli/node_modules/sigh-core/lib/sourceMap.js:48:30)
  at /Users/rjuliani/WebstormProjects/billeteracli/node_modules/sigh/lib/plugin/concat.js:68:59

Ideas? Help please?

[insidewhy]

Source maps should contain a field stating the version they conform to but it looks like these sourcemaps lack the field. Could you attach the source CSS files so I can verify?

[dragonautdev]

@ohjames Thanks for your quick reply and help!

Please find the files attached, hope they help.Had to zip them because github won't allow .css files to be uploaded, but the actual code is not zipped.

As an explanation of my goal with this, is to simply concatenate a set of vendor's css files so that they can be better served and hopefully catched. I've tried using the built in concat (resulting in this error) as well as gulp-concat, resulting in no action at all.

Archive.zip

[dragonautdev]

@ohjames BTW, these scpecific css scripts come bundled with the ngDialog package for AngularJS, but it looks like it's happening even with the most basic css files.

[insidewhy]

Yeah this will happen on any CSS file without source maps, in this case sigh should detect the lack of source maps and generate an identity source map for each CSS file (as it does for javascript files).

To do this I just need to find a CSS tokenizer library and integrate it, there is a TODO in the code already pointing to this.

[dragonautdev]

@ohjames I've quickly searched npmjs and found this: https://www.npmjs.com/package/css-tokenize

Would that do the job? If so, maybe I can do it and send a pull request. Do you happen to know where that TODO is?

[insidewhy]

Line 72 of sigh-core's sourceMap.js.

[dragonautdev]

@ohjames Thanks! Let me see if I can implement it and have this fixed!

[dragonautdev]

@ohjames In regards to this issue, wouldn't it be good to add some options to the concat plugin? For example, and not limited to, a flag to decide if we want to have a source map or not?

Although it is generally valuable to have a source map, I believe it might be ok for users to just decide what they want to do. Thoughts?

[insidewhy]

Seems reasonable as long as the default is to include source maps.

[dragonautdev]

@ohjames I'm afraid I've been unable to find a css tokenizer compatible with the needs of the SourceMapGenerator class. Most of the apps I've found simply get the list of "tokens" as strings, but not a reference in terms of Line of Code, or anything that SourceMapGenerator uses.

I'll see what sass uses for this task, or either develop something myself. In the meantime, it would be great to have a workaround for this.

As I mentioned, it looks like gulp-concat and gulp-clean-css aren't playing well along with sigh. Can you think of a viable alternative?

[insidewhy]

It should be easy (if not optimal) to turn a list of string tokens into source map style line/columns. Checking the code of the gulp plugins might also bring up something useful. I'll have time to give a more thorough look when I'm back from holiday.

[insidewhy]

I've had problems with gulp-concat and source maps in the past in pure gulp piplelines. Tried raising the issues but received very defensive responses so gave up on gulp.

[dragonautdev]

Too bad you hit a wall with gulp's devs; finding issues should be a way to help make things better, not something to defend against.

Anyways, back to the parsing stuff, I've not specific issues with doing as you suggest since that would enable my app to work just fine; it just didn't feel optimal. I'll give it a shot tomorrow and see where my limited knowledge of this kind of javascript programming gets me.

[insidewhy]

Created a new bug against sigh-core for this.

[insidewhy]

Working on this today, see https://github.com/sighjs/sigh-core/issues/3