Search code examples
csssassgulpgulp-sasslibsass

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

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?

Solution

  • This is a bug in libsass - reported in https://github.com/sass/libsass/issues/1103: the libsass developers are planning to sort out whitespace issues in their 3.4 release.