postcss: TypeError: Cannot read property 'before' of undefined

I’m using webpack and have two css files. One file uses an @import of the other. The imported file cannot be loaded, because I get this error:

ERROR in ./~/css-loader!./~/postcss-loader!./src/styles/styles.css
Module build failed: TypeError: Cannot read property 'before' of undefined
    at Stringifier.raw (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/stringifier.js:120:30)
    at Stringifier.body (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/stringifier.js:91:31)
    at Stringifier.root (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/stringifier.js:37:14)
    at Stringifier.stringify (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/stringifier.js:33:24)
    at _class.stringify (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/stringify.js:14:9)
    at _class.generateString (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/map-generator.js:235:14)
    at _class.generateMap (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/map-generator.js:192:14)
    at _class.generate (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/map-generator.js:275:25)
    at LazyResult.stringify (/Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/lazy-result.js:226:24)
    at /Users/timaschew/dev/redux-boilerplate/node_modules/postcss/lib/lazy-result.js:163:27
 @ ./src/styles/styles.css 4:14-125 13:2-17:4 14:20-131

My webpack config looks like this:

var cssnext = require('cssnext')
var precss = require('precss')

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css/,
        exclude: [/node_modules/],
        loader: 'style!css!postcss'
      }
    ]
  },
  postcss: function() {
    return [
      cssnext({
        autoprefixer: ['last 2 version']
      }),
      precss
    ]
  }

I logged the object where the error happens:

Rule {
  nodes:
   [ Declaration {
       type: 'decl',
       parent: [Circular],
       source: [Object],
       before: '\n    ',
       prop: 'color',
       between: ': ',
       value: '#ccc' } ],
  type: 'rule',
  parent:
   Root {
     raws: { semicolon: false, after: '\n' },
     type: 'root',
     nodes: [ [Circular], [Object], [Object], [Object] ],
     source: { input: [Object], start: [Object] },
     lastEach: 51,
     indexes: {},
     _autoprefixerDisabled: false,
     variables: { column: '200px' } },
  source:
   { start: { line: 1, column: 1 },
     input:
      Input {
        css: '.foobar {\n    color: #ccc;\n}\n',
        safe: false,
        file: '/Users/timaschew/dev/redux-boilerplate/src/styles/vendor.css',
        from: '/Users/timaschew/dev/redux-boilerplate/src/styles/vendor.css' },
     end: { line: 3, column: 1 } },
  before: '',
  between: ' ',
  selector: '.foobar',
  semicolon: true,
  after: '\n',
  lastEach: 9,
  indexes: {},
  _autoprefixerDisabled: false }

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 22 (13 by maintainers)

Most upvoted comments

Problem is that you use cssnext. It based on old PostCSS.

You should use postcss-cssnext.

Also feel free to create issue in cssnext to clear in docs, that cssnext is deprecated.