vitalif-js
/
newer-universal-style-loader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement ability to be used on server side - For universal apps

master
Istvan Jano 2016-07-24 17:20:42 +01:00
parent 50af215f06
commit 7ead6e8496
4 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -45,6 +45,22 @@ Styles are not added on `require`, but instead on call to `use`/`ref`. Styles ar
Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
### Server environment
On server side we can't load styles into the DOM but to collect them and use when assembling the layout.
Example with React:
``` javascript
<head>
<title>React Redux Starter Kit</title>
{ global.__styles__.map(style =>
<style key={style.id}
type="text/css">{style.parts.map(part => part.css + "\n")}</style>)
}
</head>
```
### Options
#### `insertAt`

22
addStylesServer.js Normal file
View File

@ -0,0 +1,22 @@
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Istvan Jano janoist1@gmail.com
*/
module.exports.addStylesServer = function(list, options) {
global.__styles__ = global.__styles__ || [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
global.__styles__.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
}

5
index.js
View File

@ -15,8 +15,11 @@ module.exports.pitch = function(remainingRequest) {
"var content = require(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ");",
"if(typeof content === 'string') content = [[module.id, content, '']];",
"// add the styles to the DOM",
"var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "addStyles.js")) + ")(content, " + JSON.stringify(query) + ");",
"if(content.locals) module.exports = content.locals;",
"if (typeof window === 'undefined') {",
" require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "addStylesServer.js")) + ")(content, " + JSON.stringify(query) + ");",
"} else {",
"var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "addStyles.js")) + ")(content, " + JSON.stringify(query) + ");",
"// Hot Module Replacement",
"if(module.hot) {",
" // When the styles change, update the <style> tags",

25
package.json
View File

@ -1,7 +1,7 @@
{
"name": "style-loader",
"version": "0.13.1",
"author": "Tobias Koppers @sokra",
"name": "simple-universal-style-loader",
"version": "0.14.0",
"author": "Tobias Koppers @sokra & Istvan Jano @janoist1",
"description": "style loader module for webpack",
"devDependencies": {
"css-loader": "~0.8.0"
@ -13,5 +13,22 @@
"license": "MIT",
"dependencies": {
"loader-utils": "^0.2.7"
}
},
"bugs": {
"url": "https://github.com/webpack/style-loader/issues"
},
"homepage": "https://github.com/webpack/style-loader",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"universal",
"isomorphic",
"client",
"server",
"style",
"loader",
"webpack"
]
}