[webpack v3.0.0] generates CSS in wrong order

[webpack-bot]

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

---

This issue was moved from webpack/webpack#5106 by @sokra. Orginal issue was by @cyl19910101.

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

[kud]

Haaaaaaaa I'm not alone.

I'm playing with ignoreOrder but it doesn't change anything.

Imagine i've got:

import 'antd/dist/antd.css'
import '~/styles/index.css'

Once it's compiled (it's random), I've got the result like:

import '~/styles/index.css'
import 'antd/dist/antd.css'

which is wrong for me as both define font-size for body, for example.

[joshwiens]

Why is a bug set to semver: Major?

[joshwiens]

Please stop assigning the entire org team to issues. This is exactly what @evilebottnawi was talking about in slack when he said it makes things confusing.

Everyone has a personal projects board, when someone picks up an issue for work they will add it to their personal projects board.

[joshwiens]

@cyl19910101 - Can you put that test project back up so I can get this issue sorted? Thanks :)

[joshwiens]

@filipesilva FYI this should probably be added to your blocking scope hoisting list in angular/angular-cli#6365

[manigandham]

@d3viant0ne that test project is still up: https://github.com/cyl19910101/wp3_test

any import statements bringing in css files are not output in the order of the imports

[joshwiens]

Thanks, the link in the migrated issue routes to a 404.

[filipesilva]

Thanks for the heads up @d3viant0ne, much appreciated 👍

[joshwiens]

Closing this as all issues reported have been resolved & regression tests added.

[email protected] will be going to the latest tag tomorrow evening.

[elrumordelaluz]

@d3viant0ne great work on that update.
I have a weird issue updating from 2.1.2 to 3.0.0.
Everything works well launching the Application (yarn start) but since now the order matters I found a style to fix. So, when changing a single line in one of the .css files starts a series of webpack Errors (when hot module reloading) not necessarily direct related to the line of css edited.

The errors seems to be related on CSS Mpdule'scomposes since looks like:

ERROR in ./src/shared/components/Pages/pages.css
Module build failed: TypeError: Cannot read property 'line' of undefined

where line is a class composed from another file.

Below is the configuration:

{
  test: /\.css$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1,
          localIdentName: `[name]__[local]${DEBUG
            ? ''
            : '-[hash:base64:4]'}`,
          minimize: true,
          discardComments: { removeAll: true },
        },
      },
      'postcss-loader',
    ],
  }),
},

sidenotes:
I have no deprecation warning anymore (unlike #529)

[joshwiens]

@elrumordelaluz - Throw this in a new issue if you don't mind.

[glortho]

We still have an issue with this in v3.0.0, which may or may not be solvable. With multiple composes style-loader outputs rules in the expected (or just different?) order, while extract does not. Here is our setup:

my_component.css

.btnCustom {
  composes: btnPrimaryColor from '../css/button_colors.css';
  composes: btnXs from '../css/buttons.css';
  padding: 10px;
}

../css/button_colors.css

.btnPrimaryColor {
  color: blue;
}

../css/buttons.css

.btn {
  color: #ccc;
  font-size: 12pt;
}

.btnXs {
  composes: btn;
  font-size: 9pt;
}

With style-loader, the above gets output in this order:

.btnCustom {
  padding: 10px;
}

.btnPrimaryColor {
  color: blue;
}

.btnXs {
  font-size: 9pt;
}

.btn {
  color: #ccc;
  font-size: 12pt;
}

With extract, this is the output:

.btnCustom {
  padding: 10px;
}

.btnXs {
  font-size: 9pt;
}

.btn {
  color: #ccc;
  font-size: 12pt;
}

.btnPrimaryColor {
  color: blue;
}

In effect, this means the primary color is never applied. We can get around this by composing btn in the btnPrimaryColor class, or by composing it anywhere in button_colors.css, but it'd be nice to not have to think about chains of composition if we just want to bring in a color, and to have rules output according to the style-loader order.

(Note that our classes are a bit more complex than what I've represented here, such that @value is not an efficient option for these cases.)

[joshwiens]

@glortho - The specific case for this issue was fixed. If you don't mind, please put the above in a new issue & including something like https://github.com/cyl19910101/wp3_test is immensely helpful with triaging or add a failing test case if you want to skip the boilerplate.

In either case, new issue if you would please.

[glortho]

Sure, sorry about that @d3viant0ne . Stay tuned for new issue.

[thomashibbard]

@d3viant0ne 3.0.0-rc.1 works for me, however 3.0.2 does not. I think I have followed everything in this thread but perhaps I've missed something?

[kud]

And fun fact : mini-css-extract-plugin doesn't help at all : webpack-contrib/mini-css-extract-plugin#184

[thomashibbard]

@kud Do you only have this issue when importing s/css as scss @imports and not when you do as JavaScript imports?

[kud]

I don't know for extract text because people told me to switch to mini css extract since webpack4 but yes, indeed. Importing from JS is better than importing in CSS if you want to keep the order.

[kud]

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

[thomashibbard]

Interesting. I was having the same problem using JS imports..

[kud]

But do you use mini css extract?

[thomashibbard]

No, in this project I'm using webpack 3.x, and no mini css extract.

[gucomecan]

I fix the problem but it was a mistake by myself which may some of you are doing. (I am using React so my starting file is index.js and there I load my first component - App.js). I was including the styles after including the App component. I just should load the styles first.

[wrong importing]
import App from './components/App';
import './style.scss';

[right importing]
import './style.scss';
import App from './components/App';

Realy stupid mistake.

[jjinux]

@gucomecan, why doesn't components/App import its own styles?

[gucomecan]

@jjinux Every component import its own styles, in my opinion that is the right way(reusability).

PS: What I mean at first was - in index.js I import my global styles before importing my first component(App.js), otherwise my first components's (and every child of him) styles will be loaded before global styles.

Hope that answer your question. :)

[fgerschau]

Realy stupid mistake.

@gucomecan had the same issue xD Thanks for sharing 👍