Error introduced in 8.6.1

[Dan503]

When running post-css autoprefixer version 8.6.0 the code compiles fine. When I updated to 8.6.1 I received this error when trying to compile my css:

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.basename (path.js:820:5)
    at Transform.errorHandler (C:/project/gulp/tasks/sass.js:30:71)
    at emitOne (events.js:121:20)
    at Transform.emit (events.js:211:7)
    at onwriteError (_stream_writable.js:418:12)
    at onwrite (_stream_writable.js:440:5)
    at Transform.afterTransform (_stream_transform.js:90:3)
    at Immediate._onImmediate (C:\project\node_modules\gulp-postcss\index.js:93:9)
    at runCallback (timers.js:794:20)

When I use CSS grid code that looks like this, it is able to compile fine:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

.cell-A {
  grid-area: a;
}
.cell-B {
  grid-area: b;
}
.cell-C {
  grid-area: c;
}
.cell-D {
  grid-area: d;
}
.cell-E {
  grid-area: e;
}
.cell-F {
  grid-area: f;
}

@media (min-width: 600px){
  .grid {
    grid-gap: 10px;
    grid-template:
      "a   b   c" 100px
      "d   e   f" 100px /
       1fr 1fr 1fr;
  }
}

However css grid code that looks like this will cause the compiler to error:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

@media (min-width: 600px){
  .grid {
    grid-gap: 10px;
    grid-template:
      "a   b   c" 100px
      "d   e   f" 100px /
       1fr 1fr 1fr;
  }
}

.cell-A {
  grid-area: a;
}
.cell-B {
  grid-area: b;
}
.cell-C {
  grid-area: c;
}
.cell-D {
  grid-area: d;
}
.cell-E {
  grid-area: e;
}
.cell-F {
  grid-area: f;
}

This is what my gulp sass compile file looks like (not sure if that is important at all):

'use strict';

import path from 'path';
import autoprefixer from 'autoprefixer';
import px2rem from 'postcss-pxtorem';
import gulpif from 'gulp-if';
import notifier from 'node-notifier';
import c from 'chalk';
import { notification_icon_location, plugins, join } from '../config/shared-vars';

export default function(gulp, plugins, args, config, taskTarget, browserSync) {
  let dirs = config.directories;
  let entries = config.entries;
  let dest = join(taskTarget, dirs.assets, dirs.styles.replace(/^_/, ''));

  const px2rem_settings = {
    rootValue: 10,
    propWhiteList: ['font', 'font-size', 'letter-spacing'],
    replace: false,
  };

  // Sass compilation
  gulp.task('sass', () => {
    return gulp.src([
      [dirs.source, dirs.styles, entries.css].join('/')
    ])
      .pipe(plugins.plumber((error)=>{
        console.log(`\n ${c.red.bold('Sass failed to compile:')} ${c.yellow(error.message)}\n`);
        //console.error(error.stack);
        return notifier.notify({title: 'Sass Error', message: `${path.basename(error.file)} line ${error.line}`, icon: notification_icon_location+'gulp-error.png'});
      }))
      .pipe(plugins.wait(100))//Helps prevent odd file not found error
      .pipe(plugins.sourcemaps.init())
      .pipe(plugins.sassGlob())
      .pipe(plugins.sass({
        outputStyle: 'expanded',
        precision: 10,
        includePaths: [
          join(dirs.source, dirs.styles),
          join(dirs.source, dirs.modules),
          join('node_modules')
        ]
      }).on('error', plugins.sass.logError))
      .pipe(plugins.postcss([
        autoprefixer({browsers: ['> 1%'], grid: true }),
        px2rem(px2rem_settings)
      ]))
      .pipe(plugins.rename(function(path) {
        // Remove 'source' directory as well as prefixed folder underscores
        // Ex: 'src/_styles' --> '/styles'
        path.dirname = path.dirname.replace(dirs.source, '').replace('_', '');
      }))
      .pipe(gulpif(args.production, plugins.cssnano({rebase: false})))
      .pipe(plugins.sourcemaps.write('./'))
      .pipe(gulp.dest(dest))
      .pipe(browserSync.stream({match: '**/*.css'}));
  });
}

gulp-sass version 4.0.1 postcss version 6.0.22

[ai]

Seems like this errors comes from Sass. To test this idea, can you try to remove Sass and compile styles again?

[Dan503]

Nope, stripping sass conversion out of the equation didn't fix it. I also tried removing the other post-css plugin and that didn't work either.

'use strict';

import path from 'path';
import autoprefixer from 'autoprefixer';
import px2rem from 'postcss-pxtorem';
import gulpif from 'gulp-if';
import notifier from 'node-notifier';
import c from 'chalk';
import { notification_icon_location, plugins, join } from '../config/shared-vars';

export default function(gulp, plugins, args, config, taskTarget, browserSync) {
  let dirs = config.directories;
  let entries = config.entries;
  let dest = join(taskTarget, dirs.assets, dirs.styles.replace(/^_/, ''));

  const px2rem_settings = {
    rootValue: 10,
    propWhiteList: ['font', 'font-size', 'letter-spacing'],
    replace: false,
  };

  // Sass compilation
  gulp.task('sass', () => {
    return gulp.src([
      [dirs.source, dirs.styles, 'test.css'].join('/')
    ])
      .pipe(plugins.plumber((error)=>{
        console.log(`\n ${c.red.bold('Sass failed to compile:')} ${c.yellow(error.message)}\n`);
        //console.error(error.stack);
        return notifier.notify({title: 'Sass Error', message: `${path.basename(error.file)} line ${error.line}`, icon: notification_icon_location+'gulp-error.png'});
      }))
      .pipe(plugins.wait(100))//Helps prevent odd file not found error
      .pipe(plugins.sourcemaps.init())
      // .pipe(plugins.sassGlob())
      // .pipe(plugins.sass({
      //   outputStyle: 'expanded',
      //   precision: 10,
      //   includePaths: [
      //     join(dirs.source, dirs.styles),
      //     join(dirs.source, dirs.modules),
      //     join('node_modules')
      //   ]
      // }).on('error', plugins.sass.logError))
      .pipe(plugins.postcss([
        autoprefixer({browsers: ['> 1%'], grid: true })
        // px2rem(px2rem_settings)
      ]))
      .pipe(plugins.rename(function(path) {
        // Remove 'source' directory as well as prefixed folder underscores
        // Ex: 'src/_styles' --> '/styles'
        path.dirname = path.dirname.replace(dirs.source, '').replace('_', '');
      }))
      .pipe(gulpif(args.production, plugins.cssnano({rebase: false})))
      .pipe(plugins.sourcemaps.write('./'))
      .pipe(gulp.dest(dest))
      .pipe(browserSync.stream({match: '**/*.css'}));
  });
}

[ai]

Very-very strange. Can you try to use pure PostCSS API (without gulp-postcss). Maybe we have 2 errors and second error hides real error.

[Dan503]

Not quite sure how to do that. :/

This is my folder structure

[root]
    - node_modules
    - src
        - _styles
            test.css

I've installed Post-CSS cli, what commands do I need to run? I'm trying but it's saying that it can't find autoprefixer

postcss -u autoprefixer > src/_styles/test.css
> Plugin Error: Cannot find module 'autoprefixer'

[ai]

postcss([autuprefixer({ grid: true })]).process(css).css

[Dan503]

Still not really sure how to do what you're asking

[ai]

Create JS file. Put your input CSS into a css variable. Then add code I posted above. Execute this JS file.

[Dan503]

yep still happening even at that very raw level. I have a more interesting error message for you now though.

TypeError: Cannot read property 'type' of undefined
    at C:\project\node_modules\autoprefixer\lib\hacks\grid-utils.js:348:26
    at C:\project\node_modules\postcss\lib\container.es6:163:28
    at C:\project\node_modules\postcss\lib\container.es6:109:26
    at Rule.each (C:\project\node_modules\postcss\lib\container.es6:77:22)
    at Rule.walk (C:\project\node_modules\postcss\lib\container.es6:108:21)
    at C:\project\node_modules\postcss\lib\container.es6:111:32
    at Root.each (C:\project\node_modules\postcss\lib\container.es6:77:22)
    at Root.walk (C:\project\node_modules\postcss\lib\container.es6:108:21)
    at Root.walkDecls (C:\project\node_modules\postcss\lib\container.es6:161:25)
    at insertAreas (C:\project\node_modules\autoprefixer\lib\hacks\grid-utils.js:317:17)

[ai]

Awesome 👍 this stack trace is much useful.

[ai]

I will try to fix it today (but not promising, hangover is killing me 😅)

[yuheiy]

A similar error occurred to me.

@media (min-width: 30em) {
    .test {
        display: grid;
        grid-template-areas: 'a b';
    }

    .test-a {
        grid-area: a;
    }

    .test-b {
        grid-area: b;
    }
}

TypeError: Cannot read property 'type' of undefined

  332 |
  333 |                 if (
> 334 |                     next.type === 'atrule' &&
  335 |                     next.name === 'media' &&
  336 |                     next.params === parentMedia.params &&
  337 |                     next.first.type === 'rule' &&

  at lib/hacks/grid-utils.js:334:26
  at node_modules/postcss/lib/container.es6:163:28
  at node_modules/postcss/lib/container.es6:109:26
  at Rule.each (node_modules/postcss/lib/container.es6:77:22)
  at Rule.walk (node_modules/postcss/lib/container.es6:108:21)
  at node_modules/postcss/lib/container.es6:111:32
  at AtRule.each (node_modules/postcss/lib/container.es6:77:22)
  at AtRule.walk (node_modules/postcss/lib/container.es6:108:21)
  at node_modules/postcss/lib/container.es6:111:32
  at Root.each (node_modules/postcss/lib/container.es6:77:22)

[ai]

Will open a laptop in next 10 minutes. Sorry for the error 😅

[ai]

Fixed in #1059 by @yepninja

[ai]

Released in 8.6.2