Webpack3 generate css in wrong order

[ohmyhusky]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
When using extract-text-webpack-plugin with webpack3 to generate stylesheet file, the content's order doesn't obey source code's order. Use create-react-app boilerplate to explain this :

// App.js
import React, { Component } from "react";
import Block from "./Block";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Block />
      </div>
    );
  }
}

export default App;

//Block.js
import React from "react";
import "./block.css";

export default () => <div className="block">Content</div>;

// App.css
.App {
  text-align: center;
}

// block.css
.block {
  font-size: 16px;
}

Got :

.App {
  text-align: center;
}.block {
  font-size: 16px;
}
/*# sourceMappingURL=main.f2db6320.css.map*/

I'm not sure if this problem is webpack3 or extract-text-webpack-plugin's problem, since I can get correct result in webpack2.6.1, I think I should post in here first.
If the current behavior is a bug, please provide the steps to reproduce.

The complete project : https://github.com/cyl19910101/wp3_test

What is the expected behavior?
Expected stylesheet order :

.block {
  font-size: 16px;
}.App {
  text-align: center;
}

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

OS :

ProductName:    Mac OS X
ProductVersion: 10.12.5
BuildVersion:   16F73

Node :

v8.1.2

Webpack :

3.0.0

[moimael]

extract-text-webpack-plugin has a ignoreOrder option. It's false by default but maybe you activated it ?

[phun-ky]

I have the same issue. Just upgraded to webpack@3.0.0, and the css is in wrong order. ignoreOrder is not touched here.

[polco]

same here

[ohmyhusky]

@moimael I didn't touch the ignoreOrder option. And I've tried to set it to false specifically after read your comment, still get the same output.

[sokra]

@webpack-bot move to webpack-contrib/extract-text-webpack-plugin

extractedChunk.modules.sort is no longer valid, as extractedChunk.modules is now a getter to extractedChunk._modules which is a Set.

[webpack-bot]

I've moved it to webpack-contrib/extract-text-webpack-plugin.