postcss-loader: [2.0.5] `css-loader: modules` not working as needed after upgrade

css modules inside node_modules are working but css modules on my source are not added but loaded.

css is missed

require('babel-polyfill');
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const FlowtypePlugin = require('flowtype-loader/plugin');
const assetsPath = path.resolve(__dirname, '../static/dist');
const host = (process.env.HOST || 'localhost');
const port = (+process.env.PORT + 1) || 4001;

const rootPath = path.join(__dirname, './..');
const nodeModulesPath = path.join(rootPath, 'node_modules');

// Isomorfic Tools
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
const WebpackIsomorphicToolsPlugin =
  require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin =
  new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));

// Babel config update to for client

const babelrc = fs.readFileSync('./.babelrc');
let babelrcObject = {};

try {
  babelrcObject = JSON.parse(babelrc);
} catch (err) {
  console.error('==>     ERROR: Error parsing your .babelrc.');
  console.error(err);
}

const babelrcObjectDevelopment =
  babelrcObject.env && babelrcObject.env.development || {};

// merge global and dev-only plugins
let combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);

const babelLoaderQuery = Object.assign(
  {},
  babelrcObjectDevelopment,
  babelrcObject,
  { plugins: combinedPlugins }
);

delete babelLoaderQuery.env;

// Since we use .babelrc for client and server, and we don't want HMR enabled
// on the server, we have to add the babel plugin react-transform-hmr manually
// here.

// make sure react-transform is enabled
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
let reactTransform = null;
for (let i = 0; i < babelLoaderQuery.plugins.length; ++i) {
  let plugin = babelLoaderQuery.plugins[i];
  if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
    reactTransform = plugin;
  }
}

babelLoaderQuery.presets =
  babelLoaderQuery.presets.map(function (item) {
    if (item === 'es2015') {
      return ['es2015', { modules: false }];
    }
    return item;
  });

if (!reactTransform) {
  reactTransform = ['react-transform', {transforms: []}];
  babelLoaderQuery.plugins.push(reactTransform);
}

if (!reactTransform[1] || !reactTransform[1].transforms) {
  reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
}

module.exports = {
  entry: {
    vendor: require('./vendorList'),
    main: [
      'react-hot-loader/patch',
      //activate HMR for React

      'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',

      './src/client.js'
      //the entry point of our app
    ],
  },

  output: {
    path: assetsPath,
    filename: '[hash]-[id].js',
    chunkFilename: '[name]-[chunkhash].js',
    publicPath: 'http://' + host + ':' + port + '/assets/',
  },

  context: path.resolve(__dirname, '..'),

  devtool: 'inline-source-map',

  performance: { hints: false },

  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        'react-hot-loader/webpack',
        'babel-loader?' + JSON.stringify(babelLoaderQuery),
        'eslint-loader',
        // 'flowtype-loader',
      ],
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
            localIdentName: '[local]___[hash:base64:5]',
            importLoaders: 2,
            modules: true,
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: (loader) => [
              require('postcss-import')({
                root: loader.resourcePath,
              }),
              require('postcss-mixins')(),
              require('postcss-each')(),
              require('postcss-cssnext')({
                features: {
                  customProperties: {
                    variables: require('../src/theme/variables.js'),
                  }
                }
              }),
            ],
          } ,
        },
      ]
    }, {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff',
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff',
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file-loader',
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
    }, {
      test: webpackIsomorphicToolsPlugin.regular_expression('images'),
      loader: 'url-loader?limit=10',
    }],
  },

  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.json', '.js', '.jsx', '*'],
  },

  plugins: [
    // new FlowtypePlugin(),

    new webpack.LoaderOptionsPlugin({
      options: {
        context: path.resolve(__dirname, '..'),
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'], // Specify the common bundle's name.
    }),

    new webpack.HotModuleReplacementPlugin(),
    //activates HMR

    new webpack.NamedModulesPlugin(),
    //prints more readable module names in the browser console on HMR updates
    //
    new webpack.IgnorePlugin(/webpack-stats\.json$/),

    new webpack.DefinePlugin({
      __CLIENT__: true,
      __SERVER__: false,
      __DEVELOPMENT__: true,
      __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
    }),

    webpackIsomorphicToolsPlugin.development()
  ],
};

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 34 (20 by maintainers)

Most upvoted comments

@felixsanz yep create new issue and try to show what is wrong (screenshots, console, example of code and etc.). Don’t write here otherwise the problem may not be noticed.

Here is my test repo with react-toolbox: olegstepura/postcss-loader-test

The only change between two versions below is an edit in package.json:

-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.5",

And run npm i inside test repo folder after edit.

With version 1.3.3:

Big screen, everything is stacked good (click to see screenshot)

2017-05-17 11_52_15-test

Small screen, animation is smooth (click to see gif)

940f45f3008aaed768ae5d0d39f216bf

With version 2.0.5:

Big screen, strange spacing between navbar and appbar (click to see screenshot)

2017-05-17 11_56_14-test

Small screen (click to see gif and comments)
  • animation is broken: fade out first, no transition animation of nav bar, it just disappears.
  • icon color is also wrong (black instead of white)

87e299ea8ba4172b6a58865cc7b9c9c3