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.

[sudomf]

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

#202 (comment)

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