Ability to control point of stylesheet injection

[pags]

It'd be great if, instead of just dumping stylesheets in the head tag, a specific element could be specified as the point of stylesheet insertion.

This is useful for cases where there are also static sheets included in the page, and the order of sheet import matters re: specificity. I'm currently getting around this with a slight hack to your code and a dummy meta tag.

[guybedford]

Do you mean effectively a weight argument or something like that? I'm not sure how keen I am on the idea.

It sounds like you want the injected RequireCSS styles to have a lower preference than the existing page styles? I'm not sure how common this use case is though?

[pags]

Right, I want the injected styles to have less preference than existing styles - for example, I have a global css file that is statically included across all of my pages, and I'd prefer it have higher preference.

As far as the best way to implement this functionality, I'll offer no suggestions. I'll admit my solution of using a dummy meta tag as a "placeholder" to tell your code where the injected css should go is a bit crufty.

[guybedford]

The easier route ends up being to add an extra class for specificity to ensure the correct order. But yes I know it is not ideal. I'm weary of complicating this implementation though. I accept that this modular CSS solution has its limitations, but it is simple and stable for what it is, I wouldn't want to hack it to try and make things like this work in more complicated ways. If you do have any good ideas certainly feel free to share though.

[pags]

Right, I was just saying in the event of selector specificity being equal, I like to have a clear stylesheet ordering for robustness - but I totally understand not wanting to complicate your implementation. I'll let you know if I think of something elegant.

[AdamHess]

I'm with guybedford on this. It would be easier to add class specificity or inline your required CSS in your template. (I actually think it comes out cleaner that way)

[davecarlile]

I stumbled upon this old issue while trying to figure out why my stylesheets were being injected in a different order when optimized vs. not optimized. It turns out the optimizer writes the bundle in the order that it encounters them. Here's my example:

submodule.js: define(function (require, exports, module) { var override = require('css!override.css') }

entry.js: requirejs.config({...}) requirejs([ 'submodule', 'vendor.css'])

Unoptimized, the require inside submodule will be called after vendor.css is loaded. Optimized, the opposite, because the optimizer crawls the dependency tree in order.

If you change the requirejs call in entry to this: requirejs([ 'vendor.css', 'submodule']), everything will load in the order you expect.