-1

I am building up a workflow in gulp to build and minify my SCSS and JS - usual stuff.

I'm using Eric Meyer's css reset as follows:

@import 'reset.scss';

h1 {
    font-size: 4em;
    font-family: "Oswald", Verdana, sans-serif;
    font-weight: 400;
    text-align: center;
    margin: 20px 0 40px 0;
}

section h1 {
    font-size: 2em;
    font-family: "Oswald", Verdana, sans-serif;
    font-weight: 300;
    margin: 40px 0 15px 0;
}

It's in its own file, imported.

Then I have a gulp task:

gulp.task('buildScss', () => {
    return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
        .pipe(gulp.dest(paths.style.bin))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(paths.style.bin));
});

This runs sass on the CSS files, dumps them to a bin/style folder, changes the name to [name].min.css, minifies and saves.

The problem is that a) the sass process imports the reset css files and includes it in the main compiled file and b) when the minifier runs it doesn't just strip whitespace - it plays with the order of things and probably some other clever stuff. This affects how the CSS is actually processed and in this case the font-family from the reset (inherit) is now included after the main definition, resetting it after it has been styled.

h1,section h1{font-family:Oswald,Verdana,sans-serif}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}h1{font-size:4em;font-weight:400;text-align:center;margin:20px 0 40px}section h1{font-size:2em;font-weight:300;margin:40px 0 15px}

I figure one option would be if I could leave the @import in place and not follow it when running sass but I can't find an option to do that.

I'd like to not rely 100% on gulp to construct the files (so I could still manually run sass on them) and to leave some reference in the file to the reset for clarity.

I also realise that I can remove the font-family definition in section h1 as it is inherited and this solves the problem in this particular case. But it's easy to accidentally get into that situation again and it would be frustrating to constantly be debugging around it.

Any thoughts, ideas, solutions? Thanks!

3
  • 1
    Sounds like a problem with your minifier, not with anything else.
    – Etheryte
    Sep 24, 2015 at 20:17
  • What minifier plugin are you using? What version? Can you confirm that things are in the correct order after being processed by sass, but before your minifier? @Nit is probably right.
    – jeradg
    Sep 24, 2015 at 20:23
  • Thanks folks, I'm using gulp-minify-css 1.2.1 and yeah after the sass step it's still all in the right order - reset first followed by the rest. Sep 24, 2015 at 21:27

1 Answer 1

1

Thanks to @Nit and @jeradg - the problem was in the minifier settings. I don't know if it should be doing what it's doing (bug submitted - https://github.com/jakubpawlowicz/clean-css/issues/681) but either way it can be stopped by setting a switch in gulp:

gulp.task('buildScss', () => {
    return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
        .pipe(gulp.dest(paths.style.bin))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss({restructuring: false}))
        .pipe(gulp.dest(paths.style.bin))
        .pipe(livereload());
});

The change would be the restructuring parameter in this line:

.pipe(minifycss({restructuring: false}))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.