Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

[webpack v3.0.0] generates CSS in wrong order #548

Closed
webpack-bot opened this issue Jun 20, 2017 · 56 comments · Fixed by #540
Closed

[webpack v3.0.0] generates CSS in wrong order #548

webpack-bot opened this issue Jun 20, 2017 · 56 comments · Fixed by #540

Comments

@webpack-bot
Copy link

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
Copy link

kud commented Jun 22, 2017

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.

@webpack-contrib webpack-contrib deleted a comment from fengmiaosen Jun 24, 2017
@joshwiens
Copy link
Member

Why is a bug set to semver: Major?

@joshwiens
Copy link
Member

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.

@webpack-contrib webpack-contrib deleted a comment from manigandham Jun 24, 2017
@joshwiens
Copy link
Member

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

@joshwiens
Copy link
Member

joshwiens commented Jun 24, 2017

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

@manigandham
Copy link

@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
Copy link
Member

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

@filipesilva
Copy link

Thanks for the heads up @d3viant0ne, much appreciated 👍

@joshwiens
Copy link
Member

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

extract-text-webpack-plugin@3.0.0 will be going to the latest tag tomorrow evening.

@elrumordelaluz
Copy link

elrumordelaluz commented Jul 13, 2017

@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
Copy link
Member

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

@glortho
Copy link

glortho commented Oct 25, 2017

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
Copy link
Member

@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
Copy link

glortho commented Oct 25, 2017

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

@thomashibbard
Copy link

thomashibbard commented Jul 12, 2018

@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
Copy link

kud commented Jul 13, 2018

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

@thomashibbard
Copy link

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

@kud
Copy link

kud commented Jul 13, 2018

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
Copy link

kud commented Jul 13, 2018

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

@thomashibbard
Copy link

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

@kud
Copy link

kud commented Jul 13, 2018

But do you use mini css extract?

@thomashibbard
Copy link

thomashibbard commented Jul 13, 2018

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

@gucomecan
Copy link

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
Copy link

jjinux commented Aug 16, 2018

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

@gucomecan
Copy link

gucomecan commented Aug 17, 2018

@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
Copy link

fgerschau commented Feb 1, 2019

Realy stupid mistake.

@gucomecan had the same issue xD Thanks for sharing 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.