Nested quotes in vue template being HTML-encoded on processInline().restore()

[samuel99]

I'm having this gulp task compiling vue files:

module.exports = function (gulp, plugins, options, envOptions) {
    return function () {
        return gulp.src(['/*.vue'], { follow: 'true' })
            .pipe(plugins.chmod(666))
            .pipe(plugins.processInline().extract('script'))
            .pipe(plugins.eslint())
            .pipe(plugins.eslint.format().on('data', function () { }))
            .pipe(plugins.eslint.failAfterError())
            .pipe(plugins.babel({
                presets: ['env']
            }))
            .pipe(plugins.processInline().restore())
            .pipe(plugins.rename({ dirname: '' }))
            .pipe(gulp.dest('/dist/'));

    }
}

And my vue file looks like this (a lot of stuff deleted):

<template>
    <div :id="groupId + \' -\' + item.id" class="accordion-item" :class="{isActiveClass: item.active}">
        <dt class="accordion-item-title">
            <button @click="toggle" class="accordion-item-trigger" type="button">
                <h4 class="accordion-item-title-text">{{item.title}}</h4>
                <span class="accordion-item-trigger-icon"></span>
            </button>
        </dt>
    </div>
</template>
<script>
// a lot of script
</script>

Problem is, when I run the task the output of the first line of the template will look like this: <div :id="groupId + \&apos; -\&apos; + item.id" class="accordion-item" :class="{isActiveClass: item.active}">

The nested single quotes are HTML-encoded :(

And therefore vue can't compile the template:

If I do like this the single quotes are correct in the dist folder:

module.exports = function (gulp, plugins, options, envOptions) {
    return function () {
        return gulp.src(['/*.vue'], { follow: 'true' })
            .pipe(plugins.chmod(666))
            //.pipe(plugins.processInline().extract('script'))
            //.pipe(plugins.eslint())
            //.pipe(plugins.eslint.format().on('data', function () { }))
            //.pipe(plugins.eslint.failAfterError())
            //.pipe(plugins.babel({
            //    presets: ['env']
            //}))
            //.pipe(plugins.processInline().restore())
            .pipe(plugins.rename({ dirname: '' }))
            .pipe(gulp.dest('/dist/'));

    }
}

If I do like this the quotes are being HTML-encoded as ' again:

module.exports = function (gulp, plugins, options, envOptions) {
    return function () {
        return gulp.src(['/*.vue'], { follow: 'true' })
            .pipe(plugins.chmod(666))
            .pipe(plugins.processInline().extract('script'))
            //.pipe(plugins.eslint())
            //.pipe(plugins.eslint.format().on('data', function () { }))
            //.pipe(plugins.eslint.failAfterError())
            //.pipe(plugins.babel({
            //    presets: ['env']
            //}))
            .pipe(plugins.processInline().restore())
            .pipe(plugins.rename({ dirname: '' }))
            .pipe(gulp.dest('/dist/'));

    }
}

Any ideas what could be wrong?

Best regards, Samuel

[samuel99]

Seems to be an issue in cheerio? https://github.com/cheeriojs/cheerio/issues/319