broccolijs / broccoli-concat

Concatenate broccoli trees

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support CSS with Sourcemap Comments

jamesarosen opened this issue · comments

broccoli-sourcemap-concat defaults mapCommentType to 'line', which means // comments, which are invalid CSS. This library doesn't override that default at all. This library does pass sourceMapConfig down to the Strategy, but there's no way to configure mapCommentType on a per-file or per-file-type basis.

Possible solutions:

  1. create two trees -- one for *.js with mapCommentType: 'line' and one for *.css with mapCommentType: 'block'. This doesn't work too well with Ember-CLI since that assumes a single sourcemaps configuration.
  2. Have this library pass something like mapCommentType: (/\.css\b/.test(this.mapFile) ? 'block' : 'line')
  3. Move this discussion back down to ef4/fast-sourcemap-concat#20

See also #17 and ef4/broccoli-sourcemap-concat#37

Option 4 might be to have ember-cli check the extension of the outputFile in concatFiles, which would essentially be equivalent to your option 2 but moved up a layer to the CLI itself.

I suspect @jamesarosen original idea is good (although I haven't had time to thorough think about it). If fast-sourcemap-concat can just handle it, that would be great. If there are reasons it cannot, then yes another approach may be appropriate.

@ef4's comment on the original fast-sourcemap-concat PR:

The upstream caller (ember-cli) always knows what kind of files it's concatenating. I would rather have it pass an appropriate option than try to autodetect based on extensions.

It seems like we have a wealth of possible approaches that all seem pretty straightforward, just disagreement among maintainers about where the problem should be solved :)

Workaround until this is decided:

ember-cli-build.js:


const DefaultEmberApp = require('ember-cli/lib/broccoli/ember-app');
const DefaultStrategy = require('fast-sourcemap-concat/lib/source-map');

var Concat = require('broccoli-concat/concat');
var merge = require('lodash.merge');


class EmberApp extends DefaultEmberApp {

    _concatFiles(inputNode, options) {
        options.sourceMapConfig = this.options.sourcemaps;

        if (!options || !options.outputFile) {
            throw new Error('outputFile is required');
        }

        var config = merge({
            enabled: true
        }, options.sourceMapConfig);

        var Strategy;

        if (config.enabled) {
            var extensions = (config.extensions || ['js']);
            for (var i=0; i < extensions.length; i++) {
                var ext = '.' + extensions[i].replace(/^\./,'');
                if (options.outputFile.slice(-1 * ext.length) === ext) {
                    Strategy = function (opts){
                        opts.mapCommentType = (ext === ".css" ? 'block' : 'line');
                        return DefaultStrategy(opts);
                    };
                    break;
                }
            }
        }

        return new Concat(inputNode, options, Strategy || require('./lib/strategies/simple'));
    }
}


Anyone using this with Ember 3.0.0 will need to add a new on the following line:

                        return new DefaultStrategy(opts);