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

[carlitux]

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()
  ],
};

[michael-ciniawsky]

Maybe because you are setting context in LoaderOptionsPlugin (not supportd by postcss-loader >= v2.0.0) anymore.

[michael-ciniawsky]

Which CSS is missing (from @import only or all CSS) ?
CSS Modules from src or node_modules, please elaborate further on this 😛

[michael-ciniawsky]

Maybe releated to #222 (needs more info)

[carlitux]

Which CSS is missing (from @import only or all CSS) ?
CSS Modules from src or node_modules, please elaborate further on this 😛

css modules from src are not in css bundle.

Maybe because you are setting context in LoaderOptionsPlugin (not supportd by postcss-loader

= v2.0.0) anymore.

I was thinking same but how could I do same without context option?

[michael-ciniawsky]

...
plugins: (loader) => { loader.context } // it should be there already
...

What it's purpose atm? I couldn't really reason about, where it actually gets used? :)
When you disable postcss-loader CSS Modules work ? This is odd, because they get generated by css-loader which runs after postcss-loader, could you post 1-2 components which import CSS ?

[olegstepura]

Hi!

I did not investigate too deep, but after upgrade from 1.x to 2.0.5 version animations are broken in a project with react-toolbox (2.0 beta).

I can confirm that it's exactly the upgrade of postcss-loader breaks it. In my case it's an upgrade from 1.3.3 to 2.0.5.

But seems like there are some improvements as well, since build is now way smaller (1.1 Mb with 2.0.5 vs
1.5 Mb with 1.3.3) Previously I noticed lots of unprocessed postcss code in a build. Currently there are some sourcemaps inside build, but maybe it's my fault of misconfiguration.

So I assume you optimized importing logic, but looks like optimizations were too hard =) It's a pity i cannot upgrade due to the mentioned issue.

[alexander-akait]

@olegstepura can your provide minimal reproducible test repo?

[michael-ciniawsky]

@olegstepura I need your more info on how you utilise the lib (source files, webpack.config.js, [postcss.config.js]), normally postcss-loader doesn't alter anything 'unexpected' without the plugins you use :). The biggest improvement was to not generate a sourcemap by default anymore and cleanup some old API's (webpack && PostCSS). v2.0.0 uses PostCSS v6 (breaking change), so please check if your plugins are yet compatible with v6 by now, e.g cssnext isn't atm and maybe you need to manually update some plugins due to semver range in package.json

[olegstepura]

Hi, @michael-ciniawsky!

Thanks for your response. Here are my config files: gist

In build.js I've placed some code in which you can see that sources are still included (I would like to remove it, but sourceMap: true in postcss.config.js does not seem to help).

@evilebottnawi I will try to prepare test repo.

[olegstepura]

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)

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

With version 2.0.5:

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

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)

[olegstepura]

Also I would love to hear any suggestion on how to remove source maps from build.js in my test repo.
npm run build produces src/main/webapp/asset/test.js
inside of that there is such content (with postcss-loader version 2.0.5, I inserted some newlines to make it more visually readable)

// ..
{"
.M7gDzYJNjHIL0YutSEctg :before{-webkit-touch-callout:none}._3pcMeyQKXVxkWHxAmg7hCU{background:rgba(97,97,97,.9);border-radius:2px;color:#fff;display:block;padding:8px}",
"",
{version:3,
sources:["c:/Temp/test/postcss-loader-test/node_modules/react-toolbox/lib/tooltip/theme.css"],
names:[],
mappings:"AAAA,+CACI,0DAA2D,AACnD,kDAAmD,AAE3D,0BACE,0DAA2D,AACnD,iDAAmD,CAC5D,CACJ,AAED,+CACI,8DAA+D,AACvD,sDAAuD,AAE/D,0BACE,8DAA+D,AACvD,qDAAuD,CAChE,CACJ,AAED,6CACI,8DAA+D,AACvD,sDAAuD,AAE/D,0BACE,8DAA+D,AACvD,qDAAuD,CAChE,CACJ,AAED,+CACI,4CAA6C,AACrC,mCAAqC,CAChD,uBACC,cAAe,AAEf,eAAgB,AAChB,gBAAiB,AACjB,iBAAkB,AAClB,gBAAiB,AACjB,YAAa,AACb,oBAAqB,AACrB,kBAAmB,AACnB,kBAAmB,AACnB,oBAAqB,AACrB,4CAA6C,AACrC,oCAAqC,AAC7C,kCAAmC,AAC3B,0BAA2B,AACnC,iDAAyD,AACzD,YAAa,AAEX,6CAAwD,CAM3D,AAED,6GATI,sBAAuB,AAEvB,mCAAoC,AACpC,2BAA4B,AAC5B,8BAA+B,AAC3B,0BAA2B,AACvB,qBAAsB,CAajC,AAVD,sFASM,0BAA4B,CACjC,AACD,yBACE,6BAAkC,AAClC,kBAAmB,AACnB,WAA0B,AAC1B,cAAe,AACf,WAAa,CACd",
file:"theme.css",
sourcesContent:[".tooltip.tooltipRight {\n    -webkit-transform: scale(0) translateX(0) translateY(-50%);\n            transform: scale(0) translateX(0) translateY(-50%);\n\n    &.tooltipActive {\n      -webkit-transform: scale(1) translateX(0) translateY(-50%);\n              transform: scale(1) translateX(0) translateY(-50%);\n    }\n}\n\n.tooltip.tooltipLeft {\n    -webkit-transform: scale(0) translateX(-100%) translateY(-50%);\n            transform: scale(0) translateX(-100%) translateY(-50%);\n\n    &.tooltipActive {\n      -webkit-transform: scale(1) translateX(-100%) translateY(-50%);\n              transform: scale(1) translateX(-100%) translateY(-50%);\n    }\n}\n\n.tooltip.tooltipTop {\n    -webkit-transform: scale(0) translateX(-50%) translateY(-100%);\n            transform: scale(0) translateX(-50%) translateY(-100%);\n\n    &.tooltipActive {\n      -webkit-transform: scale(1) translateX(-50%) translateY(-100%);\n "
]}    
// ...

this clearly states that there are source maps inside, which just make build heavier. I'm not even sure if this can somehow help debugging

[alexander-akait]

@olegstepura without minimal repo we can't do anything, seems your use postcss plugins based on postcss v5, new loader working on v6, also seems sorceMap: false don't using in loader options.