{"_id":"require-css","_rev":"14-f42dc4666f3af52d2aaa43a9f7a712ab","name":"require-css","description":"require-css ===========","dist-tags":{"latest":"0.1.10"},"versions":{"0.1.4":{"name":"require-css","version":"0.1.4","volo":{"type":"directory"},"gitHead":"624bc110377c5fda5bdc3030f76af796ef62027b","description":"require-css ===========","_id":"require-css@0.1.4","scripts":{},"_shasum":"e7787d403fd62fa5c755caa967f46ce06ac0e7f4","_from":".","_npmVersion":"1.4.13","_npmUser":{"name":"guybedford","email":"guybedford@gmail.com"},"maintainers":[{"name":"guybedford","email":"guybedford@gmail.com"}],"dist":{"shasum":"e7787d403fd62fa5c755caa967f46ce06ac0e7f4","tarball":"https://registry.npmjs.org/require-css/-/require-css-0.1.4.tgz","integrity":"sha512-NQwGZ79Zm2Vyrwt4EVOBTmJJolLk4HavTh11sMRrMgCXwhpg7HsOK+lZErjs6AkfQg7kODA+cPORjN/HQdeojA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUcG4TGjp4BBUBEfe4+Afu0AwlNHnUGGwoxH6RsD/9zQIgPmrDBbOj+i1xeWU+x9SOAXHmc5O9gcLeENeEAznUJRw="}]}},"0.1.5":{"name":"require-css","version":"0.1.5","volo":{"type":"directory"},"gitHead":"13e8ec3e90a3932b4cf8ac5762c8688cc61af846","description":"require-css ===========","_id":"require-css@0.1.5","scripts":{},"_shasum":"7040958fe10910fe225337da659f1a9bde588c5a","_from":".","_npmVersion":"1.4.13","_npmUser":{"name":"guybedford","email":"guybedford@gmail.com"},"maintainers":[{"name":"guybedford","email":"guybedford@gmail.com"}],"dist":{"shasum":"7040958fe10910fe225337da659f1a9bde588c5a","tarball":"https://registry.npmjs.org/require-css/-/require-css-0.1.5.tgz","integrity":"sha512-hMK4hK0FQF3yFO5B4ciJpUuZUm+/Xzt2a3sW0AkQTx9ug8jJ4Wj06lnLXv2dvbzUHLhtkAzT+4HAiHwGLFlevg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGC+ZT/poTfwR1Rc0koubsBFBDfW9sgcoQm3yuVgMKRdAiEAqMETrYUMynPHUcGd01gvU3bmpYSFXBWrhAS6PMjw+Ps="}]}},"0.1.8":{"name":"require-css","version":"0.1.8","volo":{"type":"directory"},"gitHead":"3b1d86858259762e5bb9db72c3df6ea808cd9d6d","description":"require-css ===========","_id":"require-css@0.1.8","scripts":{},"_shasum":"f2e867bb8f1f4da1b7fee71b819bfa3c26b904ef","_from":".","_npmVersion":"2.5.1","_nodeVersion":"0.12.0","_npmUser":{"name":"guybedford","email":"guybedford@gmail.com"},"dist":{"shasum":"f2e867bb8f1f4da1b7fee71b819bfa3c26b904ef","tarball":"https://registry.npmjs.org/require-css/-/require-css-0.1.8.tgz","integrity":"sha512-CcAxuKHvxyYWE3afQyo/ApQr2yiAMD4JUiYflueJ7C3JG4HeEfl9SDQk2f/Ms4vtN2jJLIgm66bAZGCP4Q98jg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU1UhwGcaalu7fwc2vkcyW/cbRHO28jbvBQRTqGIf9EAIgR/pmQBc2XGzVPXDZc9VzFQyREgK1IW68OmYftnhrZ84="}]},"maintainers":[{"name":"guybedford","email":"guybedford@gmail.com"}]},"0.1.9":{"name":"require-css","version":"0.1.9","volo":{"type":"directory"},"scripts":{"test":"node test/test.js"},"gitHead":"1778912a802b7e1c41070f47d4ae57026cdca255","description":"require-css ===========","_id":"require-css@0.1.9","_shasum":"461a0f9a05b7bd4913ade8b29ee67a24f4bdd1aa","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.5.0","_npmUser":{"name":"alundiak","email":"landike@gmail.com"},"dist":{"shasum":"461a0f9a05b7bd4913ade8b29ee67a24f4bdd1aa","tarball":"https://registry.npmjs.org/require-css/-/require-css-0.1.9.tgz","integrity":"sha512-8DUW5SMg9EwNaAeyD45gL3umadPfCDf2v4lmkTXJkV0Y8fp9SXYrE3KVc0k2XyRTgFdnUgYhcr+aJYsaxjRVBg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCStUBWRVBlhX4wWvXOES2FlP87DYlknp0yjMEMhhbcCgIgM+HZ4cWK6sshX8kpZkDroVBfqPnYctODXbzGjJ2Uj1c="}]},"maintainers":[{"name":"alundiak","email":"landike@gmail.com"},{"name":"guybedford","email":"guybedford@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/require-css-0.1.9.tgz_1487521476706_0.8415619069710374"}},"0.1.10":{"name":"require-css","version":"0.1.10","volo":{"type":"directory"},"scripts":{"test":"node test/test.js"},"gitHead":"c421807c3fed889e61a086c6442ae065ed0cb67a","description":"require-css ===========","_id":"require-css@0.1.10","_shasum":"f1db8c6cfb2ad2a3a7409166cc6cf99b0d3f4502","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.5.0","_npmUser":{"name":"alundiak","email":"landike@gmail.com"},"dist":{"shasum":"f1db8c6cfb2ad2a3a7409166cc6cf99b0d3f4502","tarball":"https://registry.npmjs.org/require-css/-/require-css-0.1.10.tgz","integrity":"sha512-v9XczgOfDKMkHdndAwuEDEasYNJPbL3aVDTM9tbRoAefjLm3kUZdt/Fg6Xi+0HJzliL21gGPWTXDV87XuOwCIQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlKJ5GPV0v50XvdX9xERfRoZWCn/VWZgQI5IBcTWXHvQIhAJYsFqfPxe3Rtww8DLBKRpW6FW6hkwnjyyXAlE3z98dc"}]},"maintainers":[{"name":"alundiak","email":"landike@gmail.com"},{"name":"guybedford","email":"guybedford@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/require-css-0.1.10.tgz_1487529467461_0.2638320738915354"}}},"readme":"require-css\n===========\n\nRequireJS CSS requiring and optimization, with almond support.\n\nUseful for writing modular CSS dependencies alongside scripts.\n\nFor 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.\n\n<a href=\"https://www.gittip.com/guybedford/\"><img src=\"http://img.shields.io/gittip/guybedford.svg\" /></a>\n\nOverview\n--------\n\nAllows the construction of scripts that can require CSS, using the simple RequireJS syntax:\n\n```javascript\ndefine(['css!styles/main'], function() {\n  //code that requires the stylesheet: styles/main.css\n});\n```\n\nFully compatible in IE 6+, Chrome 3+, Firefox 3.5+, Opera 10+, iOS.\n\n* **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.\n* **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.\n* **CSS compression** CSS redundancy compression is supported through the external library, [csso](https://github.com/css/csso).\n\nInstallation and Setup\n----------------------\n\nDownload the require-css folder manually or use Bower:\n\n```bash\nbower install require-css\n```\n\nTo allow the direct `css!` usage, add the following [map configuration](http://requirejs.org/docs/api.html#config-map) in RequireJS:\n\n```javascript\nmap: {\n  '*': {\n    'css': 'require-css/css' // or whatever the path to require-css is\n  }\n}\n```\n\nUse Cases and Benefits\n----------------------\n\n### Motivation\n\nThe use case for RequireCSS came out of a need to manage templates and their CSS together.\nThe idea being that a CSS require can be a dependency of the code that dynamically renders a template. \nWhen 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 \nof dumping all the CSS together separately. The added benefit of this is then being able to build the CSS naturally with the RequireJS optimizer, \nwhich also supports [separate build layers](http://requirejs.org/docs/1.0/docs/faq-optimization.html#priority) as needed.\n\n### Script-inlined CSS Benefits\n\nBy default, during the build CSS is compressed and inlined as a string within the layer that injects the CSS when run.\n\nIf the layer is included as a `<script>` tag, only one browser request is needed instead of many separate CSS requests with `<link>` tags.\n\nEven better than including a layer as a `<script>` tag is to include the layer dynamically with a non-blocking require. \nThen the page can be displayed while the layer is still loading asynchronously in the background. \nIn this case, the CSS that goes with a template being dynamically rendered is loaded with that same script asynchronously. \nNo longer does it need to sit in a `<link>` tag that blocks the page display unnecessarily.\n\nModular CSS\n-----------\n\nRequireCSS implies a CSS modularisation where styles can be scoped directly to the render code that they are bundled with.\n\nJust like JS requires, the order of CSS injection can't be guaranteed. The idea here is that whenever there are style overrides, they should\nbe based on using a more specific selector with an extra id or class at the base, and not assuming a CSS load order. Reset and global styles are a repeated dependency of all \nmodular styles that build on top of them.\n\nOptimizer Configuration\n-----------------------\n\n### Basic Usage\n\nOptimizer configuration:\n\n```javascript\n{\n  modules: [\n  {\n    name: 'mymodule',\n    exclude: ['css/normalize']\n  }\n  ]\n}\n```\n\nIf the contents of 'mymodule' are:\n\n```javascript\n  define(['css!style', 'css!page'], function(css) {\n    //...\n  });\n```\n\nThen the optimizer output would be:\n\n-mymodule.js containing:\n style.css and page.css which will be dynamically injected\n\nThe `css/normalize` exclude is needed due to [r.js issue #289](https://github.com/jrburke/r.js/issues/289)\n \n### Separate File Output\n\nTo output the CSS to a separate file, use the configuration:\n\n```javascript\n{\n  separateCSS: true,\n  modules: [\n  {\n    name: 'mymodule'\n  }\n  ]\n}\n```\n\nThis will then output all the css to the file `mymodule.css`. This configuration can also be placed on the module object itself for layer-specific settings.\n\nOptimization is fully compatible with exclude and include.\n\n### IE8 and 9 Selector Limit\n\nIn IE9 and below, there is a maximum limit of 4095 selectors per stylesheet.\n\nIn order to avoid this limit, CSS concatenation can be disabled entirely with the `IESelectorLimit` option.\n\n```javascript\n{\n  IESelectorLimit: true,\n  modules: [\n  {\n    name: 'mymodule'\n  }\n  ]\n}\n```\n\nIdeally build layers would avoid this limit entirely by naturally being designed to not reach it. This option is really only as a fix when nothing else\nis possible as it will degrade injection performance.\n\nThis option is also not compatible with the `separateCSS` option.\n\n### Excluding the CSS Module in Production\n\nWhen dynamic CSS requires are not going to be made in production, a minimal version of RequireCSS can be written by setting a pragma for the build:\n\n```javascript\n{\n  pragmasOnSave: {\n    excludeRequireCss: true\n  }\n}\n```\n\n### siteRoot Configuration\n\nWhen building the CSS, all URIs are renormalized relative to the site root.\n\nIt assumed that the siteRoot matches the build directory in this case.\n\nIf this is different, then specify the server path of the siteRoot relative to the baseURL in the configuration.\n\nFor example, if the site root is `www` and we are building the directory `www/lib`, we would use the configuration:\n\n```javascript\n{\n  appDir: 'lib',\n  dir: 'lib-built',\n  siteRoot: '../',\n  modules: [\n  {\n    name: 'mymodule'\n  }\n  ]\n}\n```\n\n### Almond Configuration\n\nAlmond doesn't support the `packages` configuration option. When using Almond, rather configuration RequireCSS with map configuration instead, by including the following configuration in the production app:\n\n```javascript\n  requirejs.config({\n    map: {\n      '*': {\n        css: 'require-css/css'\n      }\n    }\n  });\n```\n\n### Disabling the Build\n\nTo disable any CSS build entirely, use the configuration option `buildCSS`:\n\n```javascript\n{\n  buildCSS: false,\n  modules: [\n  {\n    name: 'mymodule'\n  }\n  ]\n}\n```\n\nCSS requires will then be left in the source \"as is\". This shouldn't be used with `stubModules`.\n\nCSS Compression\n---------------\n\nCSS compression is supported with [csso](https://github.com/css/csso).\n\nTo enable the CSS compression, install csso with npm:\n\n```\n  npm install csso -g\n```\n\nThe build log will display the compression results.\n\nWhen running the r.js optimizer through NodeJS, sometimes the global module isn't found. In this case install csso as a local node module so it can be found.\n\n\nInjection methods\n-----------------\n\nWhen loading a CSS file or external CSS file, a `<link>` tag is used. Cross-browser support comes through a number of careful browser conditions for this.\n\nIf CSS resources such as images are important to be loaded first, these can be added to the require through a loader plugin that can act as a preloader such as [image](https://github.com/millermedeiros/requirejs-plugins) or [font](https://github.com/millermedeiros/requirejs-plugins). Then a require can be written of the form:\n\n```javascript\nrequire(['css!my-css', 'image!preload-background-image.jpg', 'font!google,families:[Tangerine]']);\n```\n\nLicense\n---\n\nMIT\n\n","maintainers":[{"name":"alundiak","email":"landike@gmail.com"},{"name":"guybedford","email":"guybedford@gmail.com"}],"time":{"modified":"2022-06-26T11:36:24.497Z","created":"2014-07-03T19:43:20.506Z","0.1.4":"2014-07-03T19:43:20.506Z","0.1.5":"2014-07-10T18:42:46.256Z","0.1.8":"2015-06-06T13:50:14.785Z","0.1.9":"2017-02-19T16:24:38.866Z","0.1.10":"2017-02-19T18:37:49.778Z"},"readmeFilename":"README.md","users":{"alundiak":true,"princetoad":true}}