require-css =========== RequireJS CSS requiring and optimization, with almond support. Useful for writing modular CSS dependencies alongside scripts. For an example of widget rendering see [ZestJS](http://zestjs.org). For LESS inclusion, use [require-less](https://github.com/guybedford/require-less), which behaves and builds the css exactly like this module apart from the preprocessing step. Overview -------- Allows the construction of scripts that can require CSS, using the simple RequireJS syntax: ```javascript define(['css!styles/main'], function() { //code that requires the stylesheet: styles/main.css }); ``` Fully compatible in IE 6+, Chrome 3+, Firefox 3.5+, Opera 10+, iOS. * **CSS builds** When run as part of a build with the RequireJS optimizer, `css!` dependencies are automatically inlined into the built layer within the JavaScript, fully compatible with layering. CSS injection is performed as soon as the layer is loaded. * **Option to build separate layer CSS files** A `separateCSS` build parameter allows for built layers to output their css files separately, instead of inline with the JavaScript, for manual inclusion. * **CSS compression** CSS redundancy compression is supported through the external library, [csso](https://github.com/css/csso). Installation and Setup ---------------------- Download the require-css folder manually or use Bower: ```bash bower install require-css ``` To allow the direct `css!` usage, add the following [map configuration](http://requirejs.org/docs/api.html#config-map) in RequireJS: ```javascript map: { '*': { 'css': 'require-css/css' // or whatever the path to require-css is } } ``` Use Cases and Benefits ---------------------- ### Motivation The use case for RequireCSS came out of a need to manage templates and their CSS together. The idea being that a CSS require can be a dependency of the code that dynamically renders a template. When writing a large dynamic application, with templates being rendered on the client-side, it can be beneficial to inject the CSS as templates are required instead of dumping all the CSS together separately. The added benefit of this is then being able to build the CSS naturally with the RequireJS optimizer, which also supports [separate build layers](http://requirejs.org/docs/1.0/docs/faq-optimization.html#priority) as needed. ### Script-inlined CSS Benefits By default, during the build CSS is compressed and inlined as a string within the layer that injects the CSS when run. If the layer is included as a `