Feature Request: add a "priority" option to allow defining the order of style blocks

[forivall]

This would simplify the process of overwriting certain styles defined in external css blocks (eg. overriding bootstrap). Right now, styling will differ by the order in which you require styles if they have conflicting rules.

[sokra]

I hope I can avoid this. You can enforce the order with the @import statement.

If you want to override bootstrap styles, @import "bootstrap" at the top of your file. This way the correct order is enforced.

[Ciantic]

Umm, If I add multiple @import statements to each component, it only includes it several times. I need to have my global styles as top, other orders I don't care.

[elektronik2k5]

@forivall @Ciantic Personally, I think relying on order is a poor and fragile practice - which thus should be avoided. What if you shuffle styles during refactoring? What if you use optimizations such as https://github.com/ben-eb/postcss-merge-idents, https://github.com/ben-eb/postcss-merge-rules and https://github.com/hail2u/node-css-mqpacker ? What if you need to append stylesheets lazily to the dom?
I advice using CSS specificity to override rules instead of relying on a fragile convention. CSS preprocessors (Sass/Less/PostCSS) make it trivial.

[Ciantic]

Yes, I had an error, I did my importing in wrong place!

E.g.

import * as React from "react";
import * as ReactDom from "react-dom";
import { Provider } from "react-redux";
import { store, history } from "./State";
// ...
import "./GlobalStyles.scss";

when it should be:

import "./GlobalStyles.scss";
import * as React from "react";
import * as ReactDom from "react-dom";
import { Provider } from "react-redux";
import { store, history } from "./State";
// ...

So my problem was simply fixed by moving the importing of scss in top.

[SpaceK33z]

Closing because it's possible to do this yourself by changing the import order.

[pastelsky]

Changing the import order wouldn't help in the case where modules are lazy loaded. A module which is loaded later will insert the style tag below the last one, and override all the styles.

This is more of a problem in development, since in production one usually uses ExtractTextPlugin to concatenate css files in proper order. Using ExtractTextPlugin isn't an option in development mode without losing out on a lot of good stuff.

[jgornick]

@pastelsky I was curious if you found a solution to specify an order for imports. I would essentially like to have certain 3rd party imports be placed at the top, then followed by my application specific imports.

[pastelsky]

I'm afraid not @jgornick . In my case, it was just a couple of rules that were not playing well, and I added a !important rule to force them to apply.

This is obviously not a viable solution if you have more rules, plus such workarounds also go into production.

[forivall]

@pastelsky you can also repeat selectors to increase specificity, i.e. .selector.selector.selector