Import vendor css problems

[lmi11]

What status of issue with importing plain css from vendor files? I have problems with css from bower_components. It now fixed yet?

My problems:

1. Sometimes css from bower_components have tabs and spaces and I have error Mixed tabs and spaces are not allowed.
2. Double brackets in dest css-file.

.owl-theme .owl-controls{ {
  margin-top: 10px;;
  text-align: center;;
}

}

[Nitive]

See #33 and #39

[lmi11]

@Nitive I See, but this issues are closed and problem not fixed.

[ai]

How did you make import?

Problem is that your mix CSS content with SugarSS content.

[lmi11]

@ai I tried using postcss-easy-import and postcss-import, but I have the same error.

Problem is that your mix CSS content with SugarSS content.

I understand this and my question - Will you add support of importing plain css to Sugarss in future? Because no sense use Sugarrss without this feature, unfortunately.

[ai]

SugarSS doesn't need a import. You have some issue with config. Could you show your sources and build tool config.

[lmi11]

@ai Gulp config with styles task:

gulp.task('styles', function () {
  var processors = [
    postcssEasyImport({extensions: 'sss'}),
    autoprefixer({browsers: ['> 1%', 'last 4 version', 'Opera 12', 'Firefox ESR']}),
    postcssNested(),
    precss(),
    cssMqpacker(),
    postcssSvg({paths: ['dist/img']}),
    postcssAssets({loadPaths: ['dist/img/']}),
    postcssFlex(),
  ];
  return gulp.src('src/assets/stylesheets/style.sss')
  .pipe(postcss(processors, { parser: sugarss }))
  .pipe(rucksack({
    shorthandPosition: false,
    quantityQueries: false,
    alias: false,
    fontPath: false
  }))
  .pipe(rename({ extname: '.css' }))
  .pipe(gulp.dest('dist/css/'))
  .pipe(browserSync.stream());
});

style.sss:

@import "../vendor/owl-carousel/owl-carousel/owl.carousel.css"
@import "../vendor/owl-carousel/owl-carousel/owl.theme.css"

Files in vendor folder are from Bower and owl.carousel.css file have tabs and spaces. When I'm trying import this file I have error

Mixed tabs and spaces are not allowed.

I can fix this file manually, but it is not good, because it's bower component.

Ok, I changed owl.carousel.css file manually and Import was done, but in compiled css file I have double brackets:

.owl-theme .owl-controls{ {
    margin-top: 10px;;
    text-align: center;
}

}

[ai]

Hm, why you use Rustack (it is PostCSS plugin pack) after gulp-postcss? I think Rustack see .sss extension in files and run SugarSS again.

You should put Rustack into PostCSS processors.

[lmi11]

@ai It's not problem in Rustack. I removed this from gulp task and I have the same problems...

[ai]

OK. You have only this styles in app?

@import "../vendor/owl-carousel/owl-carousel/owl.carousel.css"
@import "../vendor/owl-carousel/owl-carousel/owl.theme.css"

Show full error stacktrace

[lmi11]

@ai I created simple gulp config and recorded video.

https://drive.google.com/open?id=0B_h6btFJGJQsMHNzNjV4VF9jQzA

[ai]

Seems like we have some issue in postcss-import plugin. @MoOx @TrySound any ideas?