Why is gulp-sass removing line breaks when I @import a SCSS file inside a media query?

Question

I'm trying to migrate my site to compile SASS with gulp-sass instead of Compass. It does seem promising - I love the speed, and the integration with Gulp is useful. Unfortunately I'm finding gulp-sass does weird things to the line breaks in the CSS output when I import files inside media queries.

We have several SCSS files, which get compiled into separate CSS files for development. For production, we import each of the SCSS files into a global.scss file, which gets compiled into a single CSS file. The imports in that file look like:

@import "header";
@import "footer";
@import "forms";
@import "posts";

@media screen and (min-width: 480px) {
    @import "media-query-480";
}

@media screen and (min-width: 768px) {
    @import "media-query-768";
}

When I run my gulp-sass task, it compiles the individual files media-query-480.css and media-query-760.css fine, but removes the line breaks between style rules from the corresponding parts of global.css. For example this bit in media-query-480.scss

.entry-meta-date {
  display: block;
}

.entry-meta-date .day {
  display: inline;
}

.entry-meta-date-under {
  display: none;
}

Becomes this in media-query-480.css, which is fine

.entry-meta-date {
  display: block; }

.entry-meta-date .day {
  display: inline; }

.entry-meta-date-under {
  display: none; }

But is this in the corresponding part of global.css

  .entry-meta-date {
    display: block; }
  .entry-meta-date .day {
    display: inline; }
  .entry-meta-date-under {
    display: none; }

It looks like libsass has deleted the line breaks in the second pass. This is not very useful when you have a big CSS file with thousands of rules clomped together.

(I've checked the encoding and line endings of the SCSS files, and they're all UTF-8 and LR.)

Is there any workaround for this, apart from doing the concatenation in Gulp?

==========================

EDIT

The same thing is happening when I wrap the media query around the rules in my file media-query-480.scss: when I do that the line breaks disppear from that file too. Is normal libsass behaviour to strip out line breaks from code inside media queries?

Tyson Nero · Answer 1 · 2016-06-25T03:07:40.793

if gulp-sass is built on top of node-sass, you may also run into the outputStyle option which is set to nested by default. The nested value will do what is happening above in the transpiled CSS as so:

.btn {
   font-size: 12px; }

libsass doesn't preserve new lines in nested style: https://github.com/sass/libsass/issues/552

To avoid this, pass the option outputStyle: expanded to node-sass for instance and your CSS will output normally:

.btn {
   font-size: 12px; 
}

if using sass-loader for webpack, simply add the following to your webpack config:

sassLoader: {
  outputStyle: 'expanded'
}

Why is gulp-sass removing line breaks when I @import a SCSS file inside a media query?

2 Answers2