XF 2.2 Understanding and changing the order of xf:css templates

[Ian Hitt]

Having trouble getting templates loaded via xf:css to load in the order I'm expecting. I have two .less templates being included one after the other, but they compile/get loaded in backwards. Is there any way to control what order those get included in at all?

 

[Mike]

Is there any way to control what order those get included in at all?

No. I'd need to double check, but for dynamically loaded CSS, it's included alphabetically. This is to create a more consistent behavior and to improve cacheability.

Instead of relying on a particular order, you may want to increase specificity of the selector you need.

 

[Ian Hitt]

@Mike Yeah I did notice it was alphabetical, with the exception of extra.less which gets loaded in after the rest. Is there a way to hook into what extra.less does? Increasing specificity is certainly one way around it, but it's a bad habit when you're doing it over and over because of (mostly) unpredictable source ordering. We oftentimes have 3-4 levels of child themes from the time we get from our main product (UI.X) to a sub product, and then to a client theme, and perhaps even a dark client theme alternative, and having to increase specificity each time we get further down the tree can become fairly messy by the end of a project.

 

[Mike]

extra.less is handled specifically, so there isn't any way to hook into that. Even relying on extra.less being last isn't 100% guaranteed to be correct due to situations where we may dynamically load CSS. Given that case, CSS order (across files) is roughly non-deterministic, though it won't come up often.

We would generally assume that a.less and b.less are independent. If there's a situation where they're not, I think I'd likely recommend that a.less simply includes the contents of b.less automatically, either by dropping b.less entirely or putting an include in a.less. Based on your description, that sound like it might be the best solution here and there are a couple approaches to organizing this, if code organization is a concern that has stopped you from going down this route. Given that we're talking in generic terms, it's hard to be specific, so if you want to give me a more concrete example that might help (you can send it privately if you prefer).

 

[Ian Hitt]

No worries, we've decided on moving forward with an add-on specific implementation for what we're trying to handle, thanks for the help understanding that though