Issue with postcss processing

Question

My local app uses the mapbox-gl library from Mapbox. I'm importing a line in my script import 'mapbox-gl/dist/mapbox-gl.css';

Here's my Webpack config:

const { join } = require('path');
const { isProd, plugins } = require('./setup');
const ExtractText = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const uglify = require('./uglify');

const out = join(__dirname, '../dist');
const exclude = /(node_modules|bower_components|src\/lib)/;

module.exports = {
    mode: 'production',
    entry: {
        app: [ ... ]
    },
    optimization: {
        minimizer: isProd === true ? [ new UglifyJsPlugin(uglify) ] : [],
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.s?css$/,
                    chunks: 'all',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true,
                },
            },
        }
    },
    node: {
        fs: 'empty'
    },
    output: {
        path: out,
        filename: '[name].[hash].js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /[\/\\]node_modules[\/\\]smooth-scroll[\/\\]dist[\/\\]js[\/\\]smooth-scroll\.js$/,
                loader: 'imports-loader?this=>window'
            },
            {
                test: /\.jsx?$/,
                exclude: exclude,
                loader: 'babel-loader',
            },
            {
                test: /\.(png)$/,
                loader: 'url-loader',
                query: {
                    mimetype: 'image/png'
                }
            },
            {
                test: /\.svg$/,
                use: [ 'svg-loader' ]
            },
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                use: [ 'file-loader' ]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: [ 'url-loader?limit=100000' ]
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: isProd != true
                        }
                    },
                    'css-loader',
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass')
                        }
                    }
                ]
            }
        ]
    },
    plugins: plugins,
    devtool: !isProd && 'eval',
    devServer: {
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        contentBase: out,
        port: process.env.PORT || 3004,
        historyApiFallback: true,
        compress: isProd,
        inline: !isProd,
        hot: !isProd
    }
};

Here are my versions:

    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",

My error is:

ERROR in ./node_modules/mapbox-gl/dist/mapbox-gl.css (./node_modules/css-loader!./node_modules/mapbox-gl/dist/mapbox-gl.css)
Module build failed (from ./node_modules/css-loader/index.js):
TypeError: Cannot read property 'toFixed' of undefined
    at strongRound (/Users/derp/Projects/compass/public/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:766:21)
    at /Users/derp/Projects/compass/public/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:424:17

The following is the exact CSS file being processed: https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.7.0/mapbox-gl.css

You can see the SVG+XML is being embedded into the payload. I'm wondering if that has to do with the problem.

Note that this only happens when I build, if I run the web server and live-code the issue doesn't exist.

Answer 1

This bug was fixed in latest versions of svgo. Try to run npm list and look at what version of svgo is in use by css-loader and postcss-loader. I also had the same problem recently and managed to fix it by upgrading css-loader to the latest version (3.4.2).