Duplicate CSS

Question

Duplicate CSS

jvdub opened this issue 10 years ago · 16 comments

When inlining multiple CSS files, one of them gets duplicated for all of them.

gulpfile:

gulp.task('inline', function () {
    return gulp.src('src/test.html')
        .pipe(inline({
            base: 'src/',
            css: minifyCss()
        }))
        .pipe(gulp.dest(paths.dest));
});

test.html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
    <!-- ... -->
</head>
<body>
    <!-- ... -->
</body>

default.css

.showOnPrint {
    display: none;
}

print.css

.showOnPrint {
    display: block;
}

output

<!DOCTYPE html>
<html>
<head>
    <style>
    .showOnPrint {display: block;}
    </style>
    <style>
    .showOnPrint {display: block;}
    </style>
    <!-- ... -->
</head>
<body>
    <!-- ... -->
</body>

It consistently duplicates one of the files, but it's not consistent in which one it duplicates. I imagine this issue is similar to Issue #7 just for CSS.

Answer 1 · 2015-03-30T21:31:07.000Z

@jvdub Hmm... not sure what's going on there. I added some test fixtures copied from your post, and they seem to pass. Can you elaborate or provide a failing test case?

Answer 2 · 2015-04-01T14:10:12.000Z

I just tested this again and was able to duplicate the issue. Here's what I have:

test.html (I realize this isn't complete HTML, but the project I'm working on takes a template that looks like this)

<link rel="stylesheet" type="text/css" href="css/test.css" />
<link rel="stylesheet" type="text/css" href="css/mine.css" media="print" />
<form>
    <p>Test</p>
</form>
<script language="javascript" type="text/javascript" src="js/test.js"></script>

test.js

(function () {
    console.log('test');
}());

test.css

.test {
    color: red;
}

mine.css

.mine {
    color: blue;
}

gulpfile.js

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    inline = require('gulp-inline'),
    minifyCss = require('gulp-minify-css'),
    paths = {
        scripts: 'src/js/*.js',
        dest: 'Code/files/'
    };

gulp.task('inlineMine', function () {
    return gulp.src('src/test.html')
        .pipe(inline({
            base: 'src/',
            css: minifyCss()
        }))
        .pipe(gulp.dest(paths.dest));
});

Running gulp inlineMine gives me the following output:

<style>
.mine{color:#00f}
</style>
<style media="print">
.mine{color:#00f}
</style>
<form>
    <p>Test</p>
</form>
<script type="text/javascript">
(function () {
    console.log('test');
}());
</script>

I hope this helps. Looking at the code, I haven't quite figured out why it would do this. It feels like a scoping issue, but I can't see where it's happening.

Answer 3 · 2015-04-14T23:10:36.000Z

I found that if I take out the css: minifyCss() option that I don't observe this behavior. This workaround resolves the issue for me as far as I'm concerned. It would be nice to be able to minify it and put it into two different link tags, but that's not something I need at this time.

Answer 4 · 2015-08-13T09:47:18.000Z

I encountered the same problem, but with my Javascript. When I take out js: uglify() it works again. So similar to what @jvdub says. It is a workaround for the moment, but would love a proper solution.

Answer 5 · 2015-08-25T11:54:01.000Z

Same here. Get this issue with JS. Basically what seems to happen is that all JS is concatenated, but then every script tag is replaced with the full version of the concatenated JS. So for every script tag you get a full copy of all combined JS.

Answer 6 · 2015-08-25T19:09:42.000Z

Sorry for the lack of progress on this issue. I'll try to address it some time this week.

Answer 7 · 2015-09-18T14:01:36.000Z

This is due to mishandling of streams. I'm working on a fix.

Answer 8 · 2015-10-19T05:40:18.000Z

I have the same issue using uglify - any news when this will be fixed/released? As far as I unterstand there also seems to be a hotfix related to this issue.

Answer 9 · 2015-10-19T08:54:03.000Z

I merged in the hotfix. The issue should be resolved now. Closing this issue for now, let me know if you're still seeing it.

Answer 10 · 2015-10-19T16:38:14.000Z

Great, I can confirm, that it works now. Thank you very much. I now have the next question: Is there a possibility to create sourcemaps when uglifying (e.g. using gulp-sourcemaps) or is this not supported by gulp-inline?

Answer 11 · 2016-11-30T22:32:07.000Z

Had the same issue with the current version 0.1.2 trying to set parameters for the JS and CSS functions.

I fixed the problem for now using a lambda expression
key: () => func({opt1: 'value'}) instead of key: func({opt1: 'value'})
since uglify seems to work and only uglify() causes problems.

Working example:

const gulp = require('gulp'),
    inline = require('gulp-inline'),
    htmlmin = require('gulp-htmlmin'),
    cssmin = require('gulp-minify-css'),
    pump = require('pump'),
    babel = require('gulp-babel'),
    inlinemin = require('gulp-minify-inline');

gulp.task('mininline', (cb) => {
    pump([
        gulp.src(paths.html),
        htmlmin({
            collapseWhitespace: true,
            removeComments: true
        }),
        inlinemin(),
        inline({
            base: './',
            js: () => babel({
                presets: ['babili'],
                comments: false
            }),
            css: () => cssmin({
                collapseWhitespace: true,
                removeComments: true
            })
        }),
        gulp.dest('./dist')
        ],
        cb
    );
});

Answer 12 · 2018-01-22T18:01:30.000Z

Having the same problem with the latest 0.1.3. Any solution to this bug? I'm using gulp-clean-css for my css minification.

Answer 13 · 2018-01-22T18:26:36.000Z

I fixed the problem for now using a lambda expression
key: () => func({opt1: 'value'}) instead of key: func({opt1: 'value'})
since uglify seems to work and only uglify() causes problems.

@mamrehn why would that solve the issue?

Answer 14 · 2018-01-22T19:16:05.000Z

Having the issue with exactly same template as the suggested on the fist post by @jvdub

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="css/responsive.css" media="print" />
    <!-- ... -->
</head>
<body>
    <!-- ... -->
</body>

Then in the gulpfile:

gulp.task('inline-css', function(){
    gulp.src('index_raw.html')
        .pipe(inline({
            base: 'css/',
            js: uglify({
                preserveComments: 'license'
            }),
            css: [
                minifyCss({
                    compatibility: 'ie8',
                    advanced: false,
                    keepSpecialComments: '1'
                })
            ],
            disabledTypes: ['svg', 'img'], // Only inline css files
            ignore: [
                'dist/js/mixin.js',
                'dist/js/build.js',
            ]
        }))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('./'));
});

And again, working all fine when removing minifyCss module within the CSS option.

Answer 15 · 2018-01-24T13:09:37.000Z

@alvarotrigo because with lambdas they are two different functions instead of just one that gets reused.
Have you tried the workaround?

Answer 16 · 2018-01-24T13:16:14.000Z

@mamrehn what do you mean by "with lambdas"? I've no idea what's that.

Have you tried the workaround?

Didn't find any solution so far. I guess I'll have to manually do it myself using the gulp-replace module. Quite annoying :(