Can external dependencies do url replacement in css

[keshin]

Hi Here are my case, I have a css resolved from bower, which have an import for some external resource like below:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
/*!
 * bootswatch v3.3.6
 * Homepage: http://bootswatch.com
 * Copyright 2012-2015 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

What I want is manage the fonts resource in first line. I can add it in browser.json with external:false, while I'm not sure if lasso will be the url replacement in the css file above?

[patrick-steele-idem]

Hey @keshin, currently, the external URL will remain external. You probably don't want the @import either, correct? Ideally, I think the @import would be removed and the referenced resource would just be treated as another dependency that goes through the Lasso.js asset pipeline. It's possible to make those changes without breaking existing functionality.

[ianvonholt]

@keshin Unfortunately, doing a dynamic replace from a CSS file isn't going to be possible unless you use a css-preprocessor, like SASS or LESS, that have the variables defined. Additionally, you would need to use the controlled source and not resolve to a compiled bower asset.

Another solution for fonts is to load them in a asynchronous fashion using lasso-loader and have all imports removed, as @patrick-steele-idem mentioned.

On some of our projects we use WebFont Loader.

Here is a quick example:

async.js:

require('lasso-loader').async(function(err){
    WebFontConfig = {
        google: {
            families: ['Roboto:300,400,500,700']
        }
    };
    (function(d) {
        var wf = d.createElement('script'), s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
        s.parentNode.insertBefore(wf, s);
    })(document);
});

browser.json:

{
    "dependencies": [
        "require-run: ./async.js",
        "./your-css-file.css"
    ]
}

Hope this helps a bit more.