Sprockets, jQuery, and asset management, oh my!

So you have a jQuery, or other JavaScript file, that uses the name jquery.css.cleaner.js. This is fine, because jQuery suggests using this format of dot delimited names.

You include it in your Rails setup, by adding the Sprocket directive require jquery.css.cleaner in app/assets/javascript/application.js. This is fine, because by including it in thejavaScript directory assumes it's JavaScript (you don't have to specify bootstrap.min.js, bootstrap.min works just fine)

You run your Rails app. It fails.

Sprockets::ContentTypeMismatch at jquery.css.cleaner is 'text/css', not 'application/javascript'

Huh?

Here's the reason why this fails. Sprockets assumes a naming scheme that allows multiple language processing based on the filename, using dot delimited file extensions. Those that are understood, e.g. .coffee and .css, are used as directives for engine work. Since we used a specific substring of .css in our file, even though the actual file type is .js, Sprockets got really confused, and said "This is a css file, and you put it in my JavaScript list. You're doing it wrong".

There are multiple solutions for this: either rename the file in a way that removes the .css substring, OR explicitly declare it as a JavaScript file by using //= require jquery.css.cleaner.js

After making this small change, Sprockets is happy, and you can JavaScript away.

The script jquery.css.cleaner.js referenced in this post is a really nice tool for checking orphaned css elements. The version I used was improved by Joaquín Núñez.