Skip to content

Instantly share code, notes, and snippets.

@wordijp
Last active December 29, 2016 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wordijp/840e5afcd7fe05083ea489bb9ab04882 to your computer and use it in GitHub Desktop.
Save wordijp/840e5afcd7fe05083ea489bb9ab04882 to your computer and use it in GitHub Desktop.
Browserifyでのpostcss対応について
browserify-postcssのindex.jsを下記のように修正すればいける
※この方法はcssifyと同じ方法、ただしsassifyではhashを埋め込んでいない、理由は1ファイルへのバンドルをするためか?
しかしpostcssではpostcss-importとプラグインになっているため、必ずsassifyに準じる必要はないはず、
よって下記の方法は有効なはず。
しかし確信を持っていないため、gistという形でメモに残す。
```index.patch
--- index.js 2016-12-29 05:52:58.000000000 +0900
+++ index_hmr.js 2016-12-29 22:04:22.187971400 +0900
@@ -4,6 +4,8 @@
var postcss = require('postcss')
var path = require('path')
+var stringHash = require('string-hash')
+
module.exports = function (file, opts) {
opts = opts || {}
var extensions = ['.css', '.scss', '.sass'].concat(opts.extensions).filter(Boolean)
@@ -23,7 +25,7 @@
var self = this
processor.process(body, postCssOptions)
.then(function (result) {
- self.push(moduleify(result.css, opts.inject))
+ self.push(moduleify(result.opts.to, result.css, opts.inject))
done()
}, function (err) {
self.emit('error', err)
@@ -36,16 +38,25 @@
return 'data:text/css;base64,' + css
}
-function moduleify(css, inject) {
+function hash (str) {
+ return '_' + stringHash(str).toString(36)
+}
+
+function moduleify(toName, css, inject) {
var exp
if (inject === 'base64') {
- exp = 'require("' + path.basename(path.dirname(__dirname)) + '").byUrl("' + base64(css) + '")'
+ exp = 'module.exports = require("' + path.basename(path.dirname(__dirname)) + '").byUrl("' + base64(css) + '")'
} else if (inject) {
- exp = "require('browserify-postcss')('" + css.replace(/'/gm, "\\'").replace(/\n/gm, ' ') + "')"
+ exp = [
+ "var inject = require('browserify-postcss');",
+ "var css = '" + css.replace(/'/gm, "\\'").replace(/\n/gm, ' ') + "';",
+ "inject(css, undefined, '" + hash(toName) + "');",
+ "module.exports = css;",
+ ].join('\n');
} else {
- exp = JSON.stringify(css)
+ exp = 'module.exports = ' + JSON.stringify(css)
}
- return 'module.exports = ' + exp
+ return exp
}
function createProcessor(opts) {
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment