not parsing files with ../

[gilbarbara]

hey,

The new version 2 isn't working with files starting with ../
Like @import '../../node_modules/c3/c3.css'; with or without url()
I've tried to load ../minified/d.css into complete/styles.css in the tests directory but no luck.

[unlight]

@gilbarbara Sorry, but I cannot reproduce your case.

This file is parsed without errors.

Can you provide more details about your case?

[gilbarbara]

Hey!
this is the troubling file:
app/styles/main.scss

// bower:css
@import '../../bower_components/pickadate/lib/themes/default.css';
@import '../../bower_components/pickadate/lib/themes/default.date.css';
@import '../../bower_components/pickadate/lib/themes/default.time.css';
// endbower

@import '../../node_modules/c3/c3.css';

This is my gulp task:

return gulp.src('app/styles/main.scss')
  .pipe($.sass.sync({
      includePaths: ['bower_components/'],
      precision: 10
  }).on('error', $.sass.logError))
  .pipe($.autoprefixer({
      browsers: AUTOPREFIXER_BROWSERS
  }))
  .pipe($.cssimport({ matchPattern: '*.css' }))
  .pipe(gulp.dest('.tmp/styles'));

I've tried to pipe the already parsed .css straight to gulp-cssimport and it didn't work anyway.

[unlight]

That is minimatch problem for some reason pattern *.css does not match for ../../x.css paths.
You need pass minimatch options matchBase: true to plugin options:
E.g.

var options = {
    matchPattern: '*.css',
    matchOptions: {
        matchBase: true
    }
};

stream = gulp.src("style.css")
   .pipe($.cssimport(options))

[unlight]

I made option matchBase: true by default. It make sense.

[gilbarbara]

hey, I'm trying with the new matchBase option.
It does parse the .css files however it's messing with the dest path

return gulp.src('app/styles/main.scss')
    .pipe($.plumber())
    .pipe($.sass.sync({
        includePaths: ['bower_components/'],
        precision: 10
    }).on('error', $.sass.logError))
    .pipe($.plumber.stop())
    .pipe($.autoprefixer({
        browsers: AUTOPREFIXER_BROWSERS
    }))
    .pipe($.debug())
//gulp-debug: app/styles/main.css
    .pipe($.cssimport({
        matchPattern: '*.css',
        matchOptions: {
            matchBase: true
        }
    }))
    .pipe($.debug())
//gulp-debug: app/styles/main.css
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.debug())
//gulp-debug: ../../app/styles/main.css

The last path should be .tmp/styles/main.css instead of ../../app/styles/main.css

Any ideas?

[unlight]

No ideas.
Run task with $.debug() and with --verbose option ans show the result.

[gilbarbara]

I got an error in $.debug using --verbose after gulp-cssimport parses the first file and it's unable to finish.
something related to date 😁

gulp-debug: 1 items
gulp-debug: 
cwd:   ~/sai
base:  ~/sai/node_modules/c3
path:  ~/sai/app/styles/main.css

node_modules/gulp-debug/node_modules/stringify-object/index.js:42
    return "new Date('" + val.toISOString() + "')";

RangeError: Invalid time value

[unlight]

Well, replace in node_modules\gulp-debug\index.js stringifyObject() by JSON.stringify(), and try again.

[gilbarbara]

hey,
I can't spent more time with this issue today, I'll keep using version 1.x for now. I'll try again later.

thanks

[unlight]

I have rewritten part with resolving paths, which leads to bogus destination paths.
Please, try new version npm i unlight/gulp-cssimport#3.0, it is not published yet @ npm.

[unlight]

FIxed in 3.0+

[gilbarbara]

Sweet, I'll try it tomorrow!
Thanks