Gulp is messing up CSS content

335
August 24, 2017, at 11:43 PM

I recently started having an issue with my gulpfile messing up CSS content properties. It only does this if the content value is a symbol, like a dot or arrow. Ex. here's a section of the SCSS file with the proper content.

    ul {
  font-size: 18px;
  list-style: none;
  padding-left: 0;
  li {
    text-indent: -13px;
    padding-left: 13px;
    margin-bottom: 1em;
    &:before {
      content: '•';
      margin-right: 5px;
      font-size: 1.3em;
      line-height: 1em;
      vertical-align: -2px;
    }
    li {
      margin-top: 5px;
      text-indent: -18px;
      padding-left: 18px;          
      &:before {
        content: '›';
        margin-right: 10px;
      }
    }
  }
}

But this is what I am seeing in my final CSS file after being compiled.

body main ul li:before{content:"•";margin-right:5px;font-size:1.3em;line-height:1em;vertical-align:-2px}body main ul li li{margin-top:5px;text-indent:-18px;padding-left:18px}body main ul li li:before{content:"›";margin-right:10px}

Here's my gulpfile I'm using.

var gulp = require('gulp');
var minifycss = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function() {
    return sass('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer())
        .pipe(concat('style.css'))
        .on('error', sass.logError)
        .pipe(minifycss())
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('./scss'))
            .pipe(notify({ message: 'Wait for it....wait for it!!!' }));
});
gulp.task('default', function() {
    gulp.watch('scss/**/*.scss',['css']);
});

Anyone have any idea why this is happening and what I can do to fix it?

READ ALSO
Sitefinity MVC - include backend styling

Sitefinity MVC - include backend styling

I have added a backend page and a widget within thatI wanted to match styling up to the other backend pages for consistency

225
radiobuttons with thumbnails in material design

radiobuttons with thumbnails in material design

I am working with material design liteRight now I need to implement some kind of radio buttons where I am going to display 4 thumbnails to the user and they must choose one of them

225
Change line width for zoomed out Google Map with KML lines [on hold]

Change line width for zoomed out Google Map with KML lines [on hold]

I have a Google Map with a KML layer (drawn by a contractor)The line width looks thin when zoomed in, but when zoomed out, the lines are super thick

217
Unexpected animation when trying to copy navbar from LESS to basic CSS

Unexpected animation when trying to copy navbar from LESS to basic CSS

I am trying to copy a navbar that is written in LESS to basic CSS as I am just learning it

208