Autoprefixer: Error introduced in 8.6.1

Created on 9 Jun 2018 · 14Comments · Source: postcss/autoprefixer

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:

````css
.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:

````css
.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):

````js
'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

Source

Dan503

Most helpful comment

Fixed in #1059 by @yepninja

ai on 9 Jun 2018

🎉2

All 14 comments

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

ai on 9 Jun 2018

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.

````js
'use strict';

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'}));
});
}
````

Dan503 on 9 Jun 2018

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.

ai on 9 Jun 2018

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'
````

Dan503 on 9 Jun 2018

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

ai on 9 Jun 2018

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

Dan503 on 9 Jun 2018

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

ai on 9 Jun 2018

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)

Dan503 on 9 Jun 2018

Awesome 👍 this stack trace is much useful.

ai on 9 Jun 2018

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

ai on 9 Jun 2018

👍1

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)