Modulizing CSS les feuilles de style avec RequireJS

J'ai créé un modèle comme suit:

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

et un peu de CSS:

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

Enfin, c'est un allégée 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);
});

Ce qui est essentiellement se passe, est le modèle est en cours de chargement et de mettre dans le #sample_div. Peu de temps après que le fichier CSS est chargé en tant que texte, puis chaque élément est préfixé avec l'ID de la vue.

Une fois que le CSS est préfixé, le style de la balise est créé et placé à l'intérieur de la vue.

Maintenant, cela fonctionne parfaitement, OK il n'est pas assez, ni ne laisse guère de marge pour l'erreur. Cependant j'ai écrit ce code pour aider à démontrer ce dont j'ai besoin.

J'ai besoin d'être en mesure de charger des modèles avec vue spécifique des feuilles de style, où les styles dans la feuille ne jamais appliquer de la vue et de ne remplacer les styles globaux.

Le problème avec l'exemple ci-dessus, c'est que c'est un hack, un regex contre le CSS, et la construction d'une nouvelle étiquette de style, ce n'est pas la façon dont je veux faire. J'ai été à la recherche en javascript CSS analyseurs pour une solution plus propre, et bien que JSCSSP attiré mon œil, il a mis de nombreuses fonctions dans l'espace de noms global, et jquery.parsecss semble seulement de travailler avec des styles déjà dans le document.

Quelqu'un a une expérience avec ce que je suis en train de réaliser?

OriginalL'auteur Flosculus | 2013-02-19