postcss/test/map.js

var PreviousMap = require('../lib/previous-map');
var postcss     = require('../lib/postcss');

var mozilla = require('source-map');
var should  = require('should');
var path    = require('path');
var fs      = require('fs-extra');

var consumer = map => new mozilla.SourceMapConsumer.fromSourceMap(map);

var read = function (result) {
    var prev = new PreviousMap(result.css, { });
    return prev.consumer();
};

describe('source maps', () => {
    before( () => {
        this.dir = __dirname + '/fixtures';

        this.doubler = postcss( (css) => {
            css.eachDecl( decl => decl.parent.prepend(decl.clone()) );
        });
        this.lighter = postcss( (css) => {
            css.eachDecl( decl => decl.value = 'white' );
        });
    });

    afterEach( () => {
        if ( fs.existsSync(this.dir) ) fs.removeSync(this.dir);
    });

    it('adds map field only on request', () => {
        should.not.exists(postcss().process('a {}').map);
    });

    it('return map generator', () => {
        postcss().process('a {}', { map: { inline: false } }).map
            .should.be.instanceOf(mozilla.SourceMapGenerator);
    });

    it('generate right source map', () => {
        var css       = "a {\n  color: black;\n  }";
        var processor = postcss( (css) => {
            css.eachRule( (rule) => {
                rule.selector = 'strong';
            });
            css.eachDecl( (decl) => {
                decl.parent.prepend( decl.clone({ prop: 'background' }) );
            });
        });

        var result = processor.process(css, {
            from: 'a.css',
            to:   'b.css',
            map:  true
        });
        var map = read(result);

        map.file.should.eql('b.css');

        map.originalPositionFor({ line: 1, column: 0 }).should.eql({
            source: 'a.css',
            line:   1,
            column: 0,
            name:   null
        });
        map.originalPositionFor({ line: 2, column: 2 }).should.eql({
            source: 'a.css',
            line:   2,
            column: 2,
            name:   null
        });
        map.originalPositionFor({ line: 3, column: 2 }).should.eql({
            source: 'a.css',
            line:   2,
            column: 2,
            name:   null
        });
    });

    it('changes previous source map', () => {
      var css = 'a { color: black }';

      var doubled = this.doubler.process(css, {
          from: 'a.css',
          to:   'b.css',
          map: { inline: false }
      });

      var lighted = this.lighter.process(doubled.css, {
          from: 'b.css',
          to:   'c.css',
          map: { prev: doubled.map }
      });

      consumer(lighted.map)
          .originalPositionFor({ line: 1, column: 18 }).should.eql({
              source: 'a.css',
              line:   1,
              column: 4,
              name:   null
          });
    });

    it('adds source map annotation', () => {
        var css    = 'a { }/*# sourceMappingURL=a.css.map */';
        var result = postcss().process(css, {
            from: 'a.css',
            to:   'b.css',
            map: { inline: false }
        });

        result.css.should.eql("a { }\n/*# sourceMappingURL=b.css.map */");
    });

    it('misses source map annotation, if user ask', () => {
        var css    = 'a { }';
        var result = postcss().process(css, {
            from: 'a.css',
            to:   'b.css',
            map: { annotation: false }
        });

        result.css.should.eql(css);
    });

    it('misses source map annotation, if previous map missed it', () => {
        var css = 'a { }';

        var step1 = postcss().process(css, {
            from: 'a.css',
            to:   'b.css',
            map: { annotation: false }
        });

        var step2 = postcss().process(step1.css, {
            from: 'b.css',
            to:   'c.css',
            map: { prev: step1.map }
        });

        step2.css.should.eql(css);
    });

    it('uses user path in annotation, relative to options.to', () => {
        var result = postcss().process('a { }', {
            from: 'source/a.css',
            to:   'build/b.css',
            map: { annotation: 'maps/b.map' }
        });

        result.css.should.eql("a { }\n/*# sourceMappingURL=maps/b.map */");
        var map = consumer(result.map);

        map.file.should.eql('../b.css');
        map.originalPositionFor({ line: 1, column: 0 })
            .source.should.eql('../../source/a.css');
    });

    it('generates inline map', () => {
        var css = 'a { }';

        var inline = postcss().process(css, {
            from: 'a.css',
            to:   'b.css',
            map: { inline: true }
        });

        should.not.exists(inline.map);
        inline.css.should.match(/# sourceMappingURL=data:/);

        var separated = postcss().process(css, {
          from: 'a.css',
          to:   'b.css',
          map: { inline: false }
        });

        var base64 = new Buffer(separated.map).toString('base64');
        inline.css.should.endWith(base64 + ' */');
    });

    it('generates inline map by default', () => {
        var inline = postcss().process('a { }', {
            from: 'a.css',
            to:   'b.css',
            map:   true
        });

        inline.css.should.match(/# sourceMappingURL=data:/);
    });

    it('generates separated map if previous map was not inlined', () => {
        var step1 = this.doubler.process('a { color: black }', {
            from: 'a.css',
            to:   'b.css',
            map: { inline: false }
        });
        var step2 = this.lighter.process(step1.css, {
            from: 'b.css',
            to:   'c.css',
            map: { prev: step1.map }
        });

        should.exists(step2.map);
    });

    it('generates separated map on annotation option', () => {
        var result = postcss().process('a { }', {
            from: 'a.css',
            to:   'b.css',
            map: { annotation: false }
        });

        should.exists(result.map);
    });

    it('allows change map type', () => {
        var step1 = postcss().process('a { }', {
            from: 'a.css',
            to:   'b.css',
            map: { inline: true }
        });

        var step2 = postcss().process(step1.css, {
            from: 'b.css',
            to:   'c.css',
            map: { inline: false }
        });

        step2.should.have.property('map');
        step2.css.should.not.match(/# sourceMappingURL=data:/);
    });

    it('misses check files on requires', () => {
        var step1 = this.doubler.process('a { }', {
            from: 'a.css',
            to:    this.dir + '/a.css',
            map:   true
        });

        fs.outputFileSync(this.dir + '/a.css.map', step1.map);
        var step2 = this.lighter.process(step1.css, {
            from: this.dir + '/a.css',
            to:  'b.css',
            map:  false
        });

        should.not.exists(step2.map);
    });

    it('works in subdirs', () => {
        var result = this.doubler.process('a { }', {
            from: 'from/a.css',
            to:   'out/b.css',
            map: { inline: false }
        });

        result.css.should.match(/sourceMappingURL=b.css.map/);

        var map = consumer(result.map);
        map.file.should.eql('b.css');
        map.sources.should.eql(['../from/a.css']);
    });

    it('uses map from subdir', () => {
        var step1 = this.doubler.process('a { }', {
            from: 'a.css',
            to:   'out/b.css',
            map: { inline: false }
        });

        var step2 = this.doubler.process(step1.css, {
            from: 'out/b.css',
            to:   'out/two/c.css',
            map: { prev: step1.map }
        });

        consumer(step2.map).originalPositionFor({ line: 1, column: 0 })
            .source.should.eql('../../a.css');

        var step3 = this.doubler.process(step2.css, {
            from: 'c.css',
            to:   'd.css',
            map: { prev: step2.map }
        });

        consumer(step3.map).originalPositionFor({ line: 1, column: 0 })
            .source.should.eql('../../a.css');
    });

    it('uses map from subdir if it inlined', () => {
        var step1 = this.doubler.process('a { }', {
            from: 'a.css',
            to:   'out/b.css',
            map:   true
        });

        var step2 = this.doubler.process(step1.css, {
            from: 'out/b.css',
            to:   'out/two/c.css',
            map: { inline: false }
        });

        consumer(step2.map).originalPositionFor({ line: 1, column: 0 })
          .source.should.eql('../../a.css');
    });

    it('uses map from subdir if it written as a file', () => {
        var step1 = this.doubler.process('a { }', {
            from: 'source/a.css',
            to:   'one/b.css',
            map: { annotation: 'maps/b.css.map', inline: false }
        });

        consumer(step1.map).originalPositionFor({ line: 1, column: 0 })
            .source.should.eql('../../source/a.css');

        fs.outputFileSync(this.dir + '/one/maps/b.css.map', step1.map);

        var step2 = this.doubler.process(step1.css, {
            from: this.dir + '/one/b.css',
            to:   this.dir + '/two/c.css',
            map:  true
        });

        consumer(step2.map).originalPositionFor({ line: 1, column: 0 })
            .source.should.eql('../source/a.css');
    });

    it('works with different types of maps', () => {
        var step1 = this.doubler.process('a { }', {
            from: 'a.css',
            to:   'b.css',
            map: { inline: false }
        });

        var map  = step1.map;
        var maps = [map, consumer(map), map.toJSON(), map.toString()];

        for ( var i of maps ) {
            var step2 = this.doubler.process(step1.css, {
                from: 'b.css',
                to:   'c.css',
                map: { prev: i }
            });
            consumer(step2.map).originalPositionFor({ line: 1, column: 0 })
                .source.should.eql('a.css');
        }
    });

    it('sets source content by default', () => {
        var result = this.doubler.process('a { }', {
            from: 'a.css',
            to:   'out/b.css',
            map:   true
        });

        read(result).sourceContentFor('../a.css').should.eql('a { }');
    });

    it('misses source content on request', () => {
        var result = this.doubler.process('a { }', {
            from: 'a.css',
            to:   'out/b.css',
            map: { sourcesContent: false }
        });

        should.not.exists( read(result).sourceContentFor('../a.css') );
    });

    it('misses source content if previous not have', () => {
        var step1 = this.doubler.process('a { }', {
          from: 'a.css',
          to:   'out/a.css',
          map: { sourcesContent: false }
        });

        var file1 = postcss.parse(step1.css, {
            from: 'a.css',
            map: { prev: step1.map }
        });
        var file2 = postcss.parse('b { }', { from: 'b.css', map: true });

        file2.append( file1.childs[0].clone() );
        var step2 = file2.toResult({ to: 'c.css', map: true });

        should.not.exists( read(step2).sourceContentFor('b.css') );
    });

    it('misses source content on request', () => {
        var step1 = this.doubler.process('a { }', {
            from: 'a.css',
            to:   'out/a.css',
            map: { sourcesContent: true }
        });

        var file1 = postcss.parse(step1.css, {
            from: 'a.css',
            map: { prev: step1.map }
        });
        var file2 = postcss.parse('b { }', { from: 'b.css', map: true });

        file2.append( file1.childs[0].clone() );
        var step2 = file2.toResult({
            to:   'c.css',
            map: { sourcesContent: false }
        });

        var map = read(step2);
        should.not.exists(map.sourceContentFor('b.css'));
        should.not.exists(map.sourceContentFor('../a.css'));
    });

    it('detects input file name from map', () => {
        var one = this.doubler.process('a { }', { to: 'a.css', map: true });
        var two = this.doubler.process(one.css, { map: { prev: one.map } });
        two.root.first.source.file.should.eql(path.resolve('a.css'));
    });

    it('works without file names', () => {
        var step1 = this.doubler.process('a { }', { map: true });
        var step2 = this.doubler.process(step1.css);
    });

    it('supports UTF-8', () => {
        var step1 = this.doubler.process('a { }', {
            from: 'вход.css',
            to:   'шаг1.css',
            map:   true
        });
        var step2 = this.doubler.process(step1.css, {
            from: 'шаг1.css',
            to:   'выход.css',
        });

        read(step2).file.should.eql('выход.css');
    });

    it('generates map for node created manually', () => {
        var contenter = postcss( (css) => {
            css.first.prepend({ prop: 'content', value: '""' });
        });
        var result = contenter.process('a:after{\n}', { map: true });
        read(result).originalPositionFor({ line: 2, column: 0 })
            .should.eql({ source: null, line: null, column: null, name: null });
    });

    it('uses input file name as output file name', () => {
        var result = this.doubler.process('a{}', {
            from: 'a.css',
            map: { inline: false }
        });
        result.map.toJSON().file.should.eql('a.css');
    });

    it('uses to.css as default output name', () => {
        var result = this.doubler.process('a{}', { map: { inline: false } });
        result.map.toJSON().file.should.eql('to.css');
    });

    it('supports annotation comment in any place', () => {
        var css    = '/*# sourceMappingURL=a.css.map */a { }';
        var result = postcss().process(css, {
            from: 'a.css',
            to:   'b.css',
            map: { inline: false }
        });

        result.css.should.eql("a { }\n/*# sourceMappingURL=b.css.map */");
    });

    it('does not update annotation on request', () => {
        var css    = 'a { }/*# sourceMappingURL=a.css.map */';
        var result = postcss().process(css, {
            from: 'a.css',
            to:   'b.css',
            map: { annotation: false, inline: false }
        });

        result.css.should.eql("a { }/*# sourceMappingURL=a.css.map */");
    });

});