Mini-css-extract-plugin: Order trouble when importing CSS files from a css file

[kud]

I've got for instance this:

• index.js:

import "~/styles/index.css"

• index.css:

/**
 * Lib, DO NOT OVERRIDE THESE FILES
 */
@import "./lib/hopscotch.css";

/**
 * Base
 */
@import "./base/reset.css";
@import "./base/base.css";
@import "./base/layout.css";
@import "./base/texts.css";
@import "./base/colours.css";
@import "./base/icons.css";

/**
 * Objects
 */
@import "./objects/permissions.css";
@import "./objects/legal-lists.css";
@import "./objects/header.css";
@import "./objects/menu.css";
@import "./objects/form.css";
@import "./objects/search.css";
@import "./objects/search-autocomplete.css";
@import "./objects/email-input.css";
@import "./objects/image-blend-fx.css";
@import "./objects/cookie-info.css";
@import "./objects/close-cross-button.css";
@import "./objects/home-column-layout.css";
@import "./objects/archive-layout.css";
@import "./objects/box.css";
@import "./objects/feedback.css";
@import "./objects/ads.css";
@import "./objects/unsubscribed-info.css";
@import "./objects/newsletter.css";
@import "./objects/try.css";
@import "./objects/twitter.css";
@import "./objects/read-all.css";
@import "./objects/article.css";
@import "./objects/register.css";
@import "./objects/heading-section.css";
@import "./objects/cover.css";
@import "./objects/briefing.css";
@import "./objects/hub.css";
@import "./objects/positions.css";
@import "./objects/inquest.css";
@import "./objects/special-edition.css";
@import "./objects/interview.css";
@import "./objects/tag.css";
@import "./objects/fact-checking.css";
@import "./objects/inline-separator.css";
@import "./objects/page-article.css";
@import "./objects/tag.css";
@import "./objects/page-hub.css";
@import "./objects/page-special-edition.css";
@import "./objects/page-all-hubs.css";
@import "./objects/tab-nav.css";
@import "./objects/page-briefing.css";
@import "./objects/datepicker.css";
@import "./objects/user-account.css";
@import "./objects/user-profile.css";
@import "./objects/user-newsletter-briefing.css";
@import "./objects/user-alert.css";
@import "./objects/user-subscription.css";
@import "./objects/hero.css";
@import "./objects/abonnement.css";
@import "./objects/vacancy-banner.css";
@import "./objects/individual-subscription.css";
@import "./objects/special-offer-deputy.css";
@import "./objects/user-wallet.css";
@import "./objects/user-bill.css";
@import "./objects/page-search.css";
@import "./objects/page-newsletter.css";
@import "./objects/page-subscription.css";
@import "./objects/page-archive.css";
@import "./objects/page-about.css";
@import "./objects/page-pub.css";
@import "./objects/page-404.css";
@import "./objects/pagination.css";
@import "./objects/modal.css";
@import "./objects/mobile.css";
@import "./objects/big-size.css";
@import "./objects/page-positions.css";
@import "./objects/data-landing-page.css";
@import "./objects/global-alert.css";
@import "./objects/banner.css";
@import "./objects/hopscotch-override.css";
@import "./objects/make-it-default.css";
@import "./objects/print.css";

I'll got a unordered index.css at the end.

---

But if I do this:

• index.js:

/* styles */
/**
 * Lib, DO NOT OVERRIDE THESE FILES
 */
import "~/styles/lib/hopscotch.css";

/**
 * Base
 */
import "~/styles/base/reset.css";
import "~/styles/base/base.css";
import "~/styles/base/layout.css";
import "~/styles/base/texts.css";
import "~/styles/base/colours.css";
import "~/styles/base/icons.css";

/**
 * Objects
 */
import "~/styles/objects/permissions.css";
import "~/styles/objects/legal-lists.css";
import "~/styles/objects/header.css";
import "~/styles/objects/menu.css";
import "~/styles/objects/form.css";
import "~/styles/objects/search.css";
import "~/styles/objects/search-autocomplete.css";
import "~/styles/objects/email-input.css";
import "~/styles/objects/image-blend-fx.css";
import "~/styles/objects/cookie-info.css";
import "~/styles/objects/close-cross-button.css";
import "~/styles/objects/home-column-layout.css";
import "~/styles/objects/archive-layout.css";
import "~/styles/objects/box.css";
import "~/styles/objects/feedback.css";
import "~/styles/objects/ads.css";
import "~/styles/objects/unsubscribed-info.css";
import "~/styles/objects/newsletter.css";
import "~/styles/objects/try.css";
import "~/styles/objects/twitter.css";
import "~/styles/objects/read-all.css";
import "~/styles/objects/article.css";
import "~/styles/objects/register.css";
import "~/styles/objects/heading-section.css";
import "~/styles/objects/cover.css";
import "~/styles/objects/briefing.css";
import "~/styles/objects/hub.css";
import "~/styles/objects/positions.css";
import "~/styles/objects/inquest.css";
import "~/styles/objects/special-edition.css";
import "~/styles/objects/interview.css";
import "~/styles/objects/tag.css";
import "~/styles/objects/fact-checking.css";
import "~/styles/objects/inline-separator.css";
import "~/styles/objects/page-article.css";
import "~/styles/objects/tag.css";
import "~/styles/objects/page-hub.css";
import "~/styles/objects/page-special-edition.css";
import "~/styles/objects/page-all-hubs.css";
import "~/styles/objects/tab-nav.css";
import "~/styles/objects/page-briefing.css";
import "~/styles/objects/datepicker.css";
import "~/styles/objects/user-account.css";
import "~/styles/objects/user-profile.css";
import "~/styles/objects/user-newsletter-briefing.css";
import "~/styles/objects/user-alert.css";
import "~/styles/objects/user-subscription.css";
import "~/styles/objects/hero.css";
import "~/styles/objects/abonnement.css";
import "~/styles/objects/vacancy-banner.css";
import "~/styles/objects/individual-subscription.css";
import "~/styles/objects/special-offer-deputy.css";
import "~/styles/objects/user-wallet.css";
import "~/styles/objects/user-bill.css";
import "~/styles/objects/page-search.css";
import "~/styles/objects/page-newsletter.css";
import "~/styles/objects/page-subscription.css";
import "~/styles/objects/page-archive.css";
import "~/styles/objects/page-about.css";
import "~/styles/objects/page-pub.css";
import "~/styles/objects/page-404.css";
import "~/styles/objects/pagination.css";
import "~/styles/objects/modal.css";
import "~/styles/objects/mobile.css";
import "~/styles/objects/big-size.css";
import "~/styles/objects/page-positions.css";
import "~/styles/objects/data-landing-page.css";
import "~/styles/objects/global-alert.css";
import "~/styles/objects/banner.css";
import "~/styles/objects/hopscotch-override.css";
import "~/styles/objects/make-it-default.css";
import "~/styles/objects/print.css";


/* scripts */
import "~/scripts/index"

It will be ok.

Do you have any idea why?

tl;dr: Order isn't kept when importing from css files, contrary to js files.

[maykefreitas]

I'm having the same problem :/

[eversadia]

+1

[kud]

I'm not sure, I've got to try but maybe this version could fix that. https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v0.4.1

CSS ordering with multiple entry points

[alexander-akait]

@kud feel free to feedback

[kud]

Yep, I'll certainly do, thanks. ;)

[fsateler]

I can confirm the issue with current git master. Please find a test case attached. Nested imports are not output in the correct order.

css-import.tar.gz

[kud]

Work around : importing them via JS, not CSS. But it shouldn't be like that, yeah.

[TatsuUkraine]

Same thing here. Plugin version 0.4.3. But I have css imports along side with scss imports. As the result all css after export appears at the end of file, even if the was imported at start of main.scss

[x-ji]

Same here. It seems that another workaround is to just rename all the CSS files into SCSS files, e.g. from index.css to index.scss, and write e.g. @import ./page/index without the .css suffix. This works but it just feels very unintuitive and this bug should not happen.

[dtothefp]

@kud it seems that issue was introduced for me with v0.4.1 release not fixed with it

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/202#issuecomment-403122075

Not sure if it's been addressed in subsequent releases. I had to revert to pre v0.4.1 and haven't had time to upgrade to subsequent releases

[sokra]

I tried to reproduce your issue, but was unable to find any issue.

Note that @import in the middle of a file is technical invalid according to the spec:

https://drafts.csswg.org/css-cascade-3/#at-ruledef-import

Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid.

But we still allow it and hoist it to the top of the file.

So in cases like:

// 1.css
.b {}

@import "./2.css";

.c {}

// 2.css
.a {}

This results in:

.a {}
.b {}
.c {}

[TatsuUkraine]

@sokra issue happening not because of import in the middle of css or scss files. In my case I have single entry scss file, that imports all styles. It looks similar to this

@import "some_css.css";
@import "some_scss";

And there is no styles in this entry, except imports

After export source from css file will be added at the end of exported file, even if it was imported first

[nilsglow]

Why was this closed? The problem is still there in version 0.5.0..

The order seems to be honored inside one file type, but is sometimes different over several file types. To illustrate (simplified extract from my project):

/* in main.less */
@import "~bootstrap/less/bootstrap.less";
@import "../custom.css";

With this setup my output has the content of custom.css before that of bootstrap. A workaround, as mentioned by @x-ji, is to rename the .css file to .less. So the following generates output with correct order:

/* in main.less */
@import "~bootstrap/less/bootstrap.less";
@import "../custom.less";

So obviously the order does not get honored over file type boundaries...

[landsman]

Same problem here.

@import "~hamburgers";

log:

css 350 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

    ERROR in ./front/sass/screen.scss (./node_modules/css-loader??ref--7-1!./node_modules/sass-loader/lib/loader.js!./front/sass/screen.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    var path = require("path");
    ^
          Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
          in /home/landsman/projects/xy/web/drupal/public/themes/custom/xy/node_modules/hamburgers/index.js (line 1, column 1)

[tlginn]

Having this issue as well in v0.7.0.

Given the stylesheet:

@import 'resets.scss';
@import 'icons.scss';
@import 'fonts.css';
@import 'links.css';
@import 'forms.css';
@import 'dropdown.scss';
@import '../dialogs/dialogs.scss';
@import '../templates/templates.scss';
@import 'bootstrap-tabs-left-polyfill.css';
@import 'bootstrap-dropdown-submenu-polyfill.css';
@import '../views/views.scss';
@import '../templates/elements/elements.scss';
@import '../sass/src/layout.scss';
@import '../js/bindings/bindings.scss';
@import 'handsontable.css';
@import 'fullscreen.css';
@import 'select2.css';
@import 'printPreview.css';
@import 'highcharts.css';
@import '../sass/src/responsive-utilities.scss';
@import '../fluffy-train/dist/style.css';

All contents of .css files are included first, then .scss in the single extracted file. I would expect the contents to be included in the order of the @imports.

[alexander-akait]

@nilsglow sorry for delay, can you open issue with reproducible test repo, thanks!