Modulating CSS Styles with RequireJS

I created a template like this:

// template.tpl
<div>
    <input id="an_input"></input>
</div>

and some CSS:

// stylesheet.css
input {
    background: #000000;
}

Finally, this is the reduced module:

define([
    'jquery',
    'text!template.tpl',
    'text!styleshet.css'
], function($, html, css){      
    var view = $('#sample_div');
    view.append($(html));

    var regex = /^([^\s\}])/gm;

    var styles = css.replace(regex, '#'+view.attr('id')+' $1');
    var style = $('<style>\n'+styles+'\n</style>');
    view.prepend(style);
});

What actually happens is the template is loaded and placed into #sample_div. Shortly after the CSS file is loaded as text, each element has a view identifier prefix.

As soon as the CSS prefix, a style tag is created and placed inside the view.

Now it works fine, it’s good that it is ugly, and does not leave much room for error. However, I wrote this code to demonstrate what I need.

I need to be able to load templates with a list of specific styles, where the styles on the sheet will only apply to the view and will only override global styles.

, , CSS , , . JavaScript- JavaScript , , , jquery.parsecss .

- , ?