@supports doesn't compile from SASS to CSS

[philalexeev]

I have a problem in compiling SASS to CSS.

here is my part of code in SASS:

.news {
  background-color: #f8f5f2;
  border-bottom: 1px solid #e5ddd5;

  @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
    -webkit-clip-path: polygon(0 0, 50% 34px, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 50% 34px, 100% 0, 100% 100%, 0 100%);
    margin-top: -35px;
  }
}

And here is my Gruntfile:

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt);

  grunt.initConfig({

    sass: {
      dist: {
        files: {
          'build/css/style.css': 'src/scss/style.scss'
        }
      }
    },

    postcss: {
      options: {
        processors: [
          require("autoprefixer")({browsers: "last 2 versions"})
        ]
      },
      style: {
        src: "build/css/*.css"
      }
    },

    cmq: {
      style: {
        files: {
          'build/css/style.css': ['build/css/style.css']
        }
      }
    },

    cssmin: {
      style: {
        options: {
          keepSpecialComments: 0
        },
        files: [{
          expand: true,
          cwd: 'build/css',
          src: ['*.css', '!*.min.css'],
          dest: 'build/css',
          ext: '.min.css'
        }]
      }
    },

    copy: {
      img: {
        expand: true,
        cwd: 'src/img/',
        src: ['**/*.{png,jpg,gif,svg}'],
        dest: 'build/img/',
      },

      js: {
        expand: true,
        cwd: 'src/js/',
        src: ['*.js'],
        dest: 'build/js/',
      },
    },

    includereplace: {
      html: {
        expand: true,
        cwd: 'src/',
        src: '*.html',
        dest: 'build/',
      }
    },

   'gh-pages': {
      options: {
        base: 'build',
        branch: 'master'
      },
      src: '**/*'
    },

    watch: {
      livereload: {
        options: { livereload: true },
        files: ['build/**/*'],
      },
      style: {
        files: ['src/scss/**/*.scss'],
        tasks: ['style'],
        options: {
          spawn: false,
        },
      },
      images: {
        files: ['src/img/**/*.{png,jpg,gif,svg}'],
        tasks: ['img'],
        options: {
          spawn: false
        },
      },
      html: {
        files: ['src/*.html', 'src/_html_inc/*.html'],
        tasks: ['includereplace:html'],
        options: {
          spawn: false
        },
      },

      scripts: {
        files: ['src/js/*.js'],
        tasks: ['copy:js'],
        options: {
          spawn: false,
        },
      },
    },

    browserSync: {
      dev: {
        bsFiles: {
         src : [
            'build/css/*.css',
            'build/js/*.js',
            'build/img/*.{png,jpg,gif,svg}',
            'build/*.html',
          ]
        },
        options: {
          watchTask: true,
          server: {
            baseDir: "build/",
          },
          ghostMode: {
            clicks: true,
            forms: true,
            scroll: false
          }
        }
      }
    }

  });

  grunt.registerTask('default', [
    'style',
    'img',
    'includereplace:html',
    'copy:js',
    'browserSync',
    'watch'
  ]);

  grunt.registerTask('style', [
    'sass',
    'postcss',
    'cmq',
    'cssmin',
  ]);

  grunt.registerTask('img', [
    'copy:img',
  ]);

  grunt.registerTask('build', [
    'style',
    'img',
    'includereplace:html',
    'gh-pages',
  ]);

};

All of the SASS code compiles great, except @supports directive. There is NO @supports directive in css after compilation.

what could be the problem?

[aasilva]

Have you found a way to solve this ? I'm with the same issue here.