From b56a97b16e5dc5f6b9c71484aa50d9b6ea172b67 Mon Sep 17 00:00:00 2001 From: wujohns Date: Tue, 10 Jan 2017 18:59:33 +0800 Subject: [PATCH 1/2] inline-style support --- README.md | 1 + index.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/README.md b/README.md index c5c8954..08e79be 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ b.on('css stream', function (css) { - `generateScopedName`: (API only) a function to override the default behaviour of creating locally scoped classnames. - `global`: optional boolean. Set to `true` if you want `css-modulesify` to apply to `node_modules` as well as local files. You can read more about it in the [browserify docs](https://github.com/substack/node-browserify/#btransformtr-opts). - `filePattern`: optional regular expression string to specify css file names. (default: `\.css$`) +- `inline`: auto create style tag and insert it into head tag.(default: `false`, need output to be `false`) ### Events - `b.on('css stream', callback)` The callback is called with a readable stream containing the compiled CSS. You can write this to a file. diff --git a/index.js b/index.js index ddf48c8..14b9f08 100644 --- a/index.js +++ b/index.js @@ -100,6 +100,7 @@ module.exports = function (browserify, options) { var cssOutFilename = options.output || options.o; var jsonOutFilename = options.json || options.jsonOutput; + var inlineStyle = options.inline && !cssOutFilename; transformOpts.cssOutFilename = cssOutFilename; transformOpts.cssFilePattern = options.filePattern; @@ -190,6 +191,11 @@ module.exports = function (browserify, options) { assign(tokensByFile, loader.tokensByFile); self.push(output.join('\n')); + if (inlineStyle) { + var func_start = ";(function() { var head = document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css';", + func_end = "if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);}())"; + self.push(func_start + "var css = " + JSON.stringify(loadersByFile[cssOutFilename].finalSource) + ";" + func_end); + } return callback(); }).catch(function (err) { self.push('console.error("' + err + '");'); From 6f0eae211528cf5fbf882d1679104e4f9af1185b Mon Sep 17 00:00:00 2001 From: wujohns Date: Thu, 12 Jan 2017 11:42:59 +0800 Subject: [PATCH 2/2] create the style tag only once --- index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 14b9f08..35103b2 100644 --- a/index.js +++ b/index.js @@ -191,11 +191,6 @@ module.exports = function (browserify, options) { assign(tokensByFile, loader.tokensByFile); self.push(output.join('\n')); - if (inlineStyle) { - var func_start = ";(function() { var head = document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css';", - func_end = "if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);}())"; - self.push(func_start + "var css = " + JSON.stringify(loadersByFile[cssOutFilename].finalSource) + ";" + func_end); - } return callback(); }).catch(function (err) { self.push('console.error("' + err + '");'); @@ -234,6 +229,13 @@ module.exports = function (browserify, options) { writes.push(writeFile(cssOutFilename, css)); } + // write the css into page style tag + if (inlineStyle) { + var func_start = ";(function() { var head = document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css';", + func_end = "if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);}())"; + self.push(func_start + "var css = " + JSON.stringify(loadersByFile[cssOutFilename].finalSource) + ";" + func_end); + } + // write the classname manifest if (jsonOutFilename) { writes.push(writeFile(jsonOutFilename, JSON.stringify(normalizeManifestPaths(tokensByFile, rootDir))));