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)
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.