Load alternate css if desired css is missing

Question

I am using Mindscape Workbench to minimize my scss files. My pages are set to use the *.min.css files. At random times, the min file is not published with the rest of the system.

I have many css files and don't want to manually check each one after every publication.

UPDATE:

I would like this to be a run-time fix. Meaning, if the browser doesn't find the desired css, it fails to the full css.
The issue never happens when I modify and publish the file. However, we have numerous people working on the solution and updating the git repository. Somehow, a few of the users are inadvertently removing the *.min.css files. It is definitely not on purpose and should not be happening.

Is there a way to specify that I want the *.min.css file, but if it is missing load the *.css instead?

I realize that it is best to prevent the issue, but my question is specifically related to the possibility of a fail-safe. My application is published by my users on their own servers so I don't have control over what they do and having an option like this would allow me a bit more control and safety.

UPDATE2:

Another option is an automated tool to ensure all *.min.css files were included in the latest publication. Ideally, it would find all *.scss files and verify that the *.min.css exists and raise a flag if any are missing.

Are you wanting to do this on the client side? in the browser? — Tim B James, Oct 17 '14 at 14:22
Sounds like you should fix the publishing problem rather than bodging the code. — DavidG, Oct 17 '14 at 14:23
@DavidG, I am working with the developers to help remove the problem, but it would still be nice to have a fail safe if such a thing is possible. — davids, Oct 17 '14 at 14:48
At most you can add a first file with the basic css, then add a reset file below it. Make sure those don't actually change. Then include your newly minted file. — somethinghere, Oct 17 '14 at 15:20

score 2 · Accepted Answer · edited May 23 '17 at 11:58

Listen to @DavidG's comment, solve the publishing problem. If that really really isn't an option I guess the next best thing is to have your devs change the bundling/minification system so it has a proper fallback to the unminified files. I guess.

However, if you must hack around the problem, i.e. if you just want for example to have a bookmarklet to work around the problem for the time being, you can use a spin-off from this answer. Something like this:

var links = document.querySelectorAll('head link[href*=".min.css"]');

for (var i = 0; i < links.length; i++) {
    var newLink = document.createElement("link");
    newLink.href = links[0].href.replace(".min.css", ".css");
    newLink.type = "text/css";
    newLink.rel = "stylesheet";
    newLink.media = "screen,print";
    var head = document.getElementsByTagName("head")[0];
    head.insertBefore(newLink, head.firstChild);
}

Do not consider using that in a production scenario though. If you do, the space-time continuum will be torn apart and all the remaining unicorns of this world will be sucked into the abyss, and possibly anyone who used this code in production with it. And we don't want that, of course.

Load alternate css if desired css is missing

1 Answers1