gulp + postCSS + typescript ... throws on // syntax

Question

am using postcss-scss and it should allow // inside scss files.

instead, getting...

` Unknown word

// injector

here is my gulp task.

var postcss     = require('gulp-postcss');
var reporter    = require('postcss-reporter');
var syntax_scss = require('postcss-scss');
var stylelint   = require('stylelint');

gulp.task("scss-lint", function() {  var stylelintConfig = {
"plugins": [
  "stylelint-statement-max-nesting-depth"
],
"rules": {
    "statement-max-nesting-depth": [3, { countAtRules: false }],
  "block-no-empty": true,
  "color-no-invalid-hex": true,
  "declaration-colon-space-after": "always",
  "declaration-colon-space-before": "never",
  "function-comma-space-after": "always",
  "function-url-quotes": "double",
  "media-feature-colon-space-after": "always",
  "media-feature-colon-space-before": "never",
  "media-feature-name-no-vendor-prefix": true,
  "max-empty-lines": 5,
  "number-leading-zero": "never",
  "number-no-trailing-zeros": true,
  "property-no-vendor-prefix": true,
  "rule-no-duplicate-properties": true,
  "declaration-block-no-single-line": true,
  "rule-trailing-semicolon": "always",
  "selector-list-comma-space-before": "never",
  "selector-list-comma-newline-after": "always",
  "selector-no-id": true,
  "string-quotes": "double",
  "value-no-vendor-prefix": true}}

var processors = [stylelint(stylelintConfig),reporter({clearMessages: true,throwError: true})];

return gulp.src(['src/**/*.scss']).pipe(postcss(processors), {syntax: syntax_scss});});

it says that postcss-scss is suppose to allow // comment syntax.

here is the full scss file...

.slide-toggle { overflow: hidden;  transition: all 1.5s;}

.angular-google-map-wrapper {
position:relative;
height: 100%;
width: 100%;
}

.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

/**
*  Do not remove the comment below. It's the markers used by gulp-inject to inject
*/
// injector
// endinjector

since the file is auto generated, i wont be able to remove the //.

Answer 1

The issue you have here is on the last line:

return gulp.src(['src/**/*.scss']).pipe(postcss(processors), {syntax: syntax_scss});});

Your parenthesis are not wrapped correctly and thus your options are not passed to postcss correctly.

It should be:

return gulp.src(['src/**/*.scss']).pipe(postcss(processors, {syntax: syntax_scss}));});

I've formatted the answer to make it more readable.

return gulp
  .src(['./*.scss'])
  .pipe(postcss(processors, {
    syntax: syntax_scss
  }));
});