How to use postcss with @imports?

[yotov]

I have a problem when trying to use postcss ( from gulp ) for css files that has @imports.
Here is the gulp task

gulp.task('css', function () {

    var postcss = require('gulp-postcss');
    var postcssImport = require('postcss-import');
    var sourcemaps = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer-core');

    return gulp.src('./src/css/app.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([
            postcssImport(),
            autoprefixer({ browsers: ['last 2 versions'] })
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/css'));
});

and two simple css files:
common.css

html,
body {
    margin: 0;
    padding: 0;
}

app.css

@import 'common.css'

[18:06:55] Starting 'css'...
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Node#before is deprecated. Use Node#raws.before
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.

events.js:85
      throw er; // Unhandled 'error' event
            ^
TypeError: Cannot read property 'before' of undefined
    at Stringifier.raw (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:121:30)
    at Stringifier.body (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:93:31)
    at Stringifier.root (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:37:14)
    at Stringifier.stringify (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:33:24)
    at _default.stringify (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringify.js:14:9)
    at _default.generateString (...\node_modules\gulp-postcss\node_modules\postcss\lib\map-generator.js:231:14)
    at _default.generateMap (...\node_modules\gulp-postcss\node_modules\postcss\lib\map-generator.js:189:14)
    at _default.generate (...\node_modules\gulp-postcss\node_modules\postcss\lib\map-generator.js:271:25)
    at LazyResult.stringify (...\node_modules\gulp-postcss\node_modules\postcss\lib\lazy-result.js:221:24)
    at ...\node_modules\gulp-postcss\node_modules\postcss\lib\lazy-result.js:158:27

[TrySound]

@IlianYotov For now import are not ready for new API. Try to use gulp-postcss@5

[yotov]

Thank you. It's works with version 5.1.10

[dhruvbhatia]

👍 Thanks

[TrySound]

@IlianYotov @dhruvbhatia The last verson of postcss-import now works with the last gulp-postcss.

[jamesscholeyweb]

What's the status of this. I too have rolled back to 5.1.10 to allow imports to work?

[w0rm]

this isn't the issue of gulp-postcss, the latest version simply bumps the version of postcss, some plugins might not be up to date with it yet.

[andyfen]

are imports woking now ?

gulp.task('styles', () => {
  var processors = [
    require("postcss-cssnext")(),
    postcssNormalize,
    require('lost'),
    require('postcss-nested'),
    require("postcss-import")(),
  ];
  return gulp.src(input.styles)
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe($.postcss(processors))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(output.styles))
    .pipe(browserSync.stream());
});

@import './test.css';

getting this error

[12:27:08] Starting 'styles'...
[12:27:08] Plumber found unhandled error:
TypeError in plugin 'gulp-postcss'
Message:
Cannot read property 'length' of undefined
Details:
fileName: /Users/user/Documents/projects/koa-starter/app/styles/main.css
Stack:
TypeError: Cannot read property 'length' of undefined
at module.exports (/Users/user/Documents/projects/koa-starter/node_modules/postcss-import/lib/join-media.js:2:40)
at /Users/user/Documents/projects/koa-starter/node_modules/postcss-import/index.js:167:18
at Array.map (native)
at parseStyles (/Users/user/Documents/projects/koa-starter/node_modules/postcss-import/index.js:166:33)
at /Users/user/Documents/projects/koa-starter/node_modules/postcss-import/index.js:48:12
at LazyResult.run (/source/lazy-result.es6:321:20)
at /source/lazy-result.es6:248:32
at LazyResult.asyncTick (/source/lazy-result.es6:246:13)
at /source/lazy-result.es6:260:22
at LazyResult.asyncTick (/source/lazy-result.es6:246:13)
at /source/lazy-result.es6:260:22
at LazyResult.asyncTick (/source/lazy-result.es6:246:13)
at /source/lazy-result.es6:253:26
at tryCatch (/Users/user/Documents/projects/koa-starter/node_modules/es6-promise/dist/lib/es6-promise/-internal.js:195:12)
at invokeCallback (/Users/user/Documents/projects/koa-starter/node_modules/es6-promise/dist/lib/es6-promise/-internal.js:210:13)
at publish (/Users/user/Documents/projects/koa-starter/node_modules/es6-promise/dist/lib/es6-promise/-internal.js:178:7)