search

webpack-contrib / purifycss-webpack

UNMAINTAINED, use https://github.com/FullHuman/purgecss-webpack-plugin
MIT License
772 stars 37 forks source link

Error: property missing ':' #89

Closed matheusml closed 7 years ago

matheusml commented 7 years ago

I have this simple Webpack 2 PurifyCSS config:

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

But I'm getting this error:

/home/Projects/my-project/node_modules/css/lib/parse/index.js:72
      throw err;
      ^
bebraw commented 7 years ago

Can you link to a little project to study? I have a rough idea of what might be going on, but I have to verify my hunch.

ClinicalCharles commented 7 years ago

I'm having the same issue, I traced it to an inline svg image just after the base64,: background:url("data:image/svg+xml;base64,PD94b

It seems related to this post https://github.com/reworkcss/css/issues/67

Some more information:

matheusml commented 7 years ago

@ClinicalCharles that's probably it.

@bebraw does your hunch relates to that?

bebraw commented 7 years ago

@matheusml I was thinking it could be some css/css-loader thing. A stack trace would help a lot. A standalone project would be even better.

bebraw commented 7 years ago

A part of the problem is that reworkcss doesn't seem to be under active maintenance. If the bug is there, there's not much we can do here.

matheusml commented 7 years ago

@bebraw A standalone project that replicate this error is going to be really hard for now, but I'm sending the full stack trace, and the complete webpack config:

/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
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;
bebraw commented 7 years ago

@matheusml Ok. That definitely confirms it. It's choking in Purify logic. I guess the next step would be isolating this out of webpack and reporting to Purify and they can go upstream from there.