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
Vous devez vous connecter pour publier un commentaire.
La plupart des chargeurs ont CSS plugins qui gèrent l'insertion pour vous:
RequireJS CSS du plugin
https://github.com/tyt2y3/requirejs-css-plugin
CurlJS CSS du plugin est fourni avec la distribution principale:
https://github.com/cujojs/curl/tree/master/dist
Je ne comprends pas ce que "les limiter à un modèle spécifique" signifie. Vous voulez dire que vous avez quelques règles pour
div
et que vous voulez que ces règles s'appliquent uniquement à la fraction des DOM - de la fraction de vous injecter à l'aide d'un modèle donné? Si oui, je n'ai que deux options pour vous:iframe
ou "utiliser uniquement des sélecteurs de classe dans le module CSS et l'espace de telle sorte qu'ils correspondent à la classe des espaces de noms dans un modèle"sur votre deuxième point, c'est techniquement ce que j'ai fait maintenant. j'ai créé un script d'installation pour s'exécuter avant que tous les JS compilateurs sont déclenchées à tout ordre pour être modulaire. je suis à l'aide de SCSS pour aider à la modularisation. Il n'a pas l'air comme il y a une solution définitive, cependant, si vous souhaitez modifier votre réponse à développer votre deuxième point de sélecteurs de classe, je peux l'accepter.
Vous pourriez être en mesure d'étendre l'une des css! plugins pour ajouter la feuille de style avec un nom de classe, basée sur un standard comme le nom de fichier, donc si vous avez lightbox.css le début de chaque règle dans le fichier avec
.lightbox
. Que pourrait être une approche intéressante.Je regardais dans quelque chose de semblable à vous re: limitation du style à une vue spécifique ou un modèle. Ma solution a été de mettre de l'état dans l'élément html par exemple:
<html state={{ state }}> <div ui-view="page">
, puis je pouvais le faire<style>[state="user.login"] [ui-view="page"] div#login {/* etc */}
.OriginalL'auteur ddotsenko