Modulizing CSS Stylesheets with RequireJS

Question

I have created a template like so:

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

and some CSS:

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

Finally this is a slimmed down 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 is essentially happening, is the template is being loaded and put into the #sample_div. Shortly after the CSS file is being loaded as text, then every item is prefixed with the ID of the view.

Once the CSS is prefixed, the style tag is created and placed inside the view.

Now, this works perfectly, OK it isn't pretty, nor does it leave much margin for error. However I wrote this code to help demonstrate what I need.

I need to be able to load templates with view specific stylesheets, where the styles in the sheet will only ever apply to the view and will only override global styles.

The problem with the above example is that it is a hack, a regex against the CSS, and the building of a new style tag, this is not how I want to do it. I have been looking into javascript CSS parsers for a cleaner solution, and although JSCSSP caught my eye, it put to many functions into the global namespace, and jquery.parsecss only seems to work with styles already within the document.

Does anyone have any experience with what I am trying to achieve?

ddotsenko · Accepted Answer · 2013-02-20 06:37:53Z

3

Most loaders out there have CSS plugins that handle the insertion for you:

RequireJS CSS plugin https://github.com/tyt2y3/requirejs-css-plugin

CurlJS CSS plugin is bundled with the main distribution: https://github.com/cujojs/curl/tree/master/dist

answered Feb 20, 2013 at 6:37

ddotsenko

5,0261 gold badge27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Flosculus Over a year ago

its not the insertion i have a problem with, i have tried using requirejs-css, however it does not provide means to limit scope of the css to a specific template.

ddotsenko Over a year ago

@Flosculus I don't get what "limit it to specific template" means. You mean you have some rules for div in there and you want those rules to apply only to fraction of the DOM - the fraction you inject using a given template? If so, i only have two options for you: iframe or "use only class selectors in the module CSS and namespace them such that they match class namespaces in template"

Flosculus Over a year ago

on your second point that is technically what i have done now. i have created a setup script to run before all the JS compilers are triggered to order everything to be modular. i am using SCSS to assist with modularization. It doesn't look like there is a definitive solution, however if you want to modify your answer to expand on your second point of class selectors i can accept that.

SimplGy Over a year ago

You might be able to extend one of the css! plugins to prepend the stylesheet with a classname, based on a standard like the filename, so if you have lightbox.css it would start every rule in the file with .lightbox. That could be an interesting approach.

f1lt3r Over a year ago

@Flosculus, I was looking into something similar to you re: limiting style to a specific view/template. My solution was to put state in the html element Eg: <html state={{ state }}> <div ui-view="page">, then I could do <style>[state="user.login"] [ui-view="page"] div#login {/* etc */}.

|

Collectives™ on Stack Overflow

Modulizing CSS Stylesheets with RequireJS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related