JS still requesting CSS even after optimization

[cperryk]

I am attempting to r.js-optimize a single JS file, script.js, which includes a module definition that requires a CSS file via require-css. When I run the build, script.min.js does indeed include the CSS. But script.min.js runs on the page, it still issues a GET request to the CSS file, as well as a request to css.min.js.

My script:

require.config({
  map: {
     '*':{
        'css': 'require-css/css.min.js'
     }
  }
});
define('Test', ['css!styles.css'], function(){
    return function(){};
});
require(['Test'], function(Test){});

My build.js:

({
    name: "script",
    map: {
     '*':{
      'css': 'require-css/css.min'
     }
    },
    out: "script.min.js"
})

Pastebin of script.min.js, beautified: http://pastebin.com/F8WYA7vd — You can see the CSS at the end. It's just one style, body{color:red}

Can anyone help me figure out what I'm doing wrong here?

[Offirmo]

+1

[spoco2]

👍
I too am seeing this. I've just added this to my project, and it's working fine in my dev version. I can now have css includes via require, so that's cool.

But on optimization, it does insert the css into the final file, and my main application runs with the injected css working, even though it's also calling for a css file that doesn't exist. But this completely breaks my individually loaded modules, because they never properly resolve, because RequireJS tries to load their css and fails, breaking the code that waits for the sub application to load.

Basically I'm confused as to why it leaves the dependencies in at all?

[guybedford]

The module names in the bundle and in the production config have to match up for the bundle to be used. It's a common issue, troubleshooting involves looking at the names in the bundle and making sure they are of the right normalized form.

[Offirmo]

@guybedford could you please elaborate ? what do you mean by "name" and "production config" ? My app module looks like this :

define([
    'lodash',
    'css!client/apps/xyz/index.css'
], ...

and my bootstraping code looks like this :

<script src="require_build_result.js"></script>
<script>
    require(['my-app-module']);
</script>

Everything works well, but the css is requested (see it in network debug tab). Is something wrong ?

[spoco2]

OK, I think the problem is that this doesn't correctly the function stubs which are supposed to resolve the dependencies that the defines are asking for...

so:

define('bower_components/require-css/css!fbsCommon/src/inputs/styles/inputs',[],function(){});
define('fbsCommon/src/inputs/main',["./Input","./Checkbox","./Combobox","./IconButton","./Switch","css!./styles/inputs"],function(){

The original dependency is: "css!./styles/inputs" but what this plugin inserts into the file to resolve this is 'bower_components/require-css/css!fbsCommon/src/inputs/styles/inputs'

So... I think that's the problem, although when I change them in the optimized file to what they should be it still doesn't work. I'm not sure this plugin is really doing what I thought it should in an optimized world. (Still does work great in dev :) )

[cheahkhing]

+1
I am also having problem with this. After optimization, it still requesting for the css even though it's already embeded as part of the optimized file.

Anyone know how to workaround this at least?

[Offirmo]

Since I didn't want ugly require(["bower_components/require-css/css!my-css.css" in my code, I ended up writing a post-build script to fix this mess :

#! /bin/bash
echo "* starting post-build processes..."
sed -i 's/"css!/"bower_components\/require-css\/css!/g' client/all_js.concat+min.js

With adding the "css" config in map {} area, then it works, no more requests to the css files. But we shouldn't need that...