Error: property missing ':'

I opened this issue on PurifyCSS for Webpack, but it seems that it’s a Purify CSS issue.

I’m getting this error:

/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:72
      throw err;
      ^

Error: undefined:14:525709: property missing ':'
    at error (/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:62:15)
    at declaration (/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:223:33)
    at declarations (/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:252:19)
    at rule (/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:560:21)
    at rules (/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:117:70)
    at stylesheet (/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:81:21)
    at module.exports (/home/matheuslima/Projects/city-voices-fe/node_modules/css/lib/parse/index.js:564:20)
    at rework (/home/matheuslima/Projects/city-voices-fe/node_modules/rework/index.js:27:21)
    at CssTreeWalker.beginReading (/home/matheuslima/Projects/city-voices-fe/node_modules/purify-css/src/CssTreeWalker.js:21:14)
    at purify (/home/matheuslima/Projects/city-voices-fe/node_modules/purify-css/src/purifycss.js:60:8)
    at /home/matheuslima/Projects/city-voices-fe/node_modules/purifycss-webpack/dist/index.js:95:99
    at Array.forEach (native)
    at /home/matheuslima/Projects/city-voices-fe/node_modules/purifycss-webpack/dist/index.js:81:28
    at Array.forEach (native)
    at Compilation.<anonymous> (/home/matheuslima/Projects/city-voices-fe/node_modules/purifycss-webpack/dist/index.js:65:30)
    at next (/home/matheuslima/Projects/city-voices-fe/node_modules/webpack/node_modules/tapable/lib/Tapable.js:140:14)
    at ExtractTextPlugin.<anonymous> (/home/matheuslima/Projects/city-voices-fe/node_modules/extract-text-webpack-plugin/index.js:329:4)
    at Compilation.applyPluginsAsyncSeries (/home/matheuslima/Projects/city-voices-fe/node_modules/webpack/node_modules/tapable/lib/Tapable.js:142:13)
    at sealPart2 (/home/matheuslima/Projects/city-voices-fe/node_modules/webpack/lib/Compilation.js:622:9)
    at next (/home/matheuslima/Projects/city-voices-fe/node_modules/webpack/node_modules/tapable/lib/Tapable.js:138:11)
    at ExtractTextPlugin.<anonymous> (/home/matheuslima/Projects/city-voices-fe/node_modules/extract-text-webpack-plugin/index.js:305:5)
    at /home/matheuslima/Projects/city-voices-fe/node_modules/async/dist/async.js:359:16
    at iteratorCallback (/home/matheuslima/Projects/city-voices-fe/node_modules/async/dist/async.js:935:13)
    at /home/matheuslima/Projects/city-voices-fe/node_modules/async/dist/async.js:843:16
    at /home/matheuslima/Projects/city-voices-fe/node_modules/extract-text-webpack-plugin/index.js:289:6
    at /home/matheuslima/Projects/city-voices-fe/node_modules/async/dist/async.js:359:16
    at iteratorCallback (/home/matheuslima/Projects/city-voices-fe/node_modules/async/dist/async.js:935:13)
    at /home/matheuslima/Projects/city-voices-fe/node_modules/async/dist/async.js:843:16
    at /home/matheuslima/Projects/city-voices-fe/node_modules/extract-text-webpack-plugin/index.js:286:13
    at /home/matheuslima/Projects/city-voices-fe/node_modules/async/dist/async.js:3025:16

With this config:

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import FaviconsWebpackPlugin from 'favicons-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import OfflinePlugin from 'offline-plugin';
import glob from 'glob';
import PurifyCSSPlugin from 'purifycss-webpack';
import webpack from 'webpack';

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: path.resolve(__dirname, 'index.html'),
  filename: 'index.html',
  inject: 'body',
});

const CleanPlugin = new CleanWebpackPlugin(['static']);

const DefinePlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('qa'),
    API_URL: JSON.stringify('https://api-hom.cityvoices.mobi/'),
    STATICS_URL: JSON.stringify('https://static.cityvoices.mobi/'),
  },
});

const ExtractTextPluginCSS = new ExtractTextPlugin({
  filename: 'style.css',
  allChunks: true,
  ignoreOrder: true,
});

const UglifyPlugin = new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    screw_ie8: true,
    conditionals: true,
    unused: true,
    comparisons: true,
    sequences: true,
    dead_code: true,
    evaluate: true,
    if_return: true,
    join_vars: true,
  },
  output: {
    comments: false,
  },
});

const CommonChunksPlugin = new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: Infinity,
  filename: 'vendor.bundle.js',
});

const AggressiveMergingPlugin = new webpack.optimize.AggressiveMergingPlugin();

const LoaderOptionsPlugin = new webpack.LoaderOptionsPlugin({
  minimize: true,
  debug: false,
});

const ProvidePlugin = new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});

const PurifyCSS = new PurifyCSSPlugin({
  styleExtensions: ['.css'],
  moduleExtensions: ['.html', '.js'],
  paths: glob.sync(path.join(__dirname, 'index.html', 'src/App.js', 'src/components/**/*')),
});

const OfflinePluginConfig = new OfflinePlugin();

const FaviconPlugin = new FaviconsWebpackPlugin({
  logo: path.resolve(__dirname, 'src/assets/images/favicon.png'),
  icons: {
    android: false,
    appleIcon: false,
    appleStartup: false,
    coast: false,
    favicons: true,
    firefox: false,
    opengraph: false,
    twitter: false,
    yandex: false,
    windows: false,
  },
});

const config = {
  entry: {
    app: './src/App.js',
    vendor: ['react', 'react-dom', 'react-router'],
  },
  output: {
    path: path.resolve(__dirname, 'static'),
    filename: 'bundle.js',
  },
  resolve: {
    alias: {
      webworkify: 'webworkify-webpack',
    },
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['es2015', 'react'],
          plugins: ['transform-object-rest-spread'],
        },
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
        loader: 'transform-loader/cacheable?brfs',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[hash:base64:5]',
            minimize: {
              discardComments: {
                removeAll: true,
              },
            },
          },
        }),
      },
      {
        test: /.(mp4|png|jpg|woff(2)??|eot|otf|ttf|svg)(\?[a-z0-9=\.]+)?$/,
        loader: 'url-loader?limit=100000',
      },
      {
        include: /node_modules\/mapbox-gl-shaders/,
        loader: 'transform-loader',
        enforce: 'post',
        options: 'brfs',
      },
    ],
  },
  plugins: [CleanPlugin, DefinePlugin, HTMLWebpackPluginConfig, ExtractTextPluginCSS, UglifyPlugin,
    CommonChunksPlugin, ProvidePlugin, LoaderOptionsPlugin, AggressiveMergingPlugin,
    FaviconPlugin, OfflinePluginConfig, PurifyCSS],
  devtool: 'source-map',
};

module.exports = config;

[robin-ntriga]

This issue also occurs with the Bootstrap 4 Beta default CSS: It chokes on any inline “data:image/svg…”

For example: .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

After commenting out the 8 lines that contain this “data:image/svg…” syntax PurifyCSS works as expected.

[taylorhoward92]

I’m having this issue too… Any fix in sight?