Merge pull request #28 from Treri/master

支持 vueify 和 vue-loader 形式的自动 scopeId, 不需要占位符

Author: ccqgithub

README.md

@@ -33,8 +33,9 @@ fis.match('src/**.vue', {
       // styleNameJoin
       styleNameJoin: '',          // 样式文件命名连接符 `component-xx-a.css`
 
+      extractCSS: true,           // 是否将css生成新的文件, 如果为false, 则会内联到js中
+
       // css scoped
-      ccssScopedFlag: '__vuec__', // 组件scoped占位符
       cssScopedIdPrefix: '_v-',   // hash前缀：_v-23j232jj
       cssScopedHashType: 'sum',   // hash生成模式，num：使用`hash-sum`, md5: 使用`fis.util.md5`
       cssScopedHashLength: 8,     // hash 长度，cssScopedHashType为md5时有效
@@ -116,7 +117,7 @@ fis.match('src/(component/**.css)', {
 
 参考[vue-loader](https://github.com/vuejs/vue-loader)源码，结合fis3的编译特性而编写,下面是parser阶段的主要过程：
 
-1. 解析vue文件，找到其中的`style`,'template','script'标签。
+1. 解析vue文件，找到其中的`style`,`template`,`script`标签。
 
 2. 每一个`style`标签创建一个对应的虚拟文件，后缀为`lang`属性指定，默认`css`，你可以指定`less`或其它的后缀。对创建虚拟文件，一样会进行fis3的编译流程（属性`lang`的值决定该文件怎么编译），并加入当前文件的依赖。
 
@@ -126,42 +127,20 @@ fis.match('src/(component/**.css)', {
 
 ## 组件编写规范
 
-`style`标签可以有多个，`template`和`script`标签只能有一个，具体请参考[vue 单文件组件](http://vuejs.org.cn/guide/application.html)。
+`style`标签可以有多个，`template`和`script`标签只能有一个，具体请参考[vue 单文件组件](https://vuejs.org/v2/guide/single-file-components.html)。
 
 ## css scoped支持
 
 > 为了保证每一个组件样式的独立性，是当前组件定义的样式只在当前的组件内生效，引入css scoped机制。
 
-- 在模板的元素上（一般是根节点）加上scoped标志(class,attr,id)，默认为`__vuec__`， 你可以通过`cssScopedFlag`自定义。可以加在class，或者属性，或者id。
-
-```html
-<template>
-  <div class="test" __vuec__></div>
-  <div class="test __vuec__"></div>
-</template>
-```
-
-- 在样式中使用scoped标志。
-
-```css
-.test[__vuec__] {
-  //
-}
-// or
-.other.__vuec__ {
-
-}
-// or
-.__vuec__ {
-  .a {
-
-  }
-}
-```
+- 在style标签中使用scoped标志。
 
-- scoped标志会根据文件路径生成唯一的hash字符串（如：`_v-23j232jj` ）;
+    ```css
+    <style scoped></style>
+    <style lang="scss" scoped></style>
+    ```
 
-- 配置：scoped标志默认为`__vuec__`，你可以自定义。
+- scoped标志会根据文件路径生成唯一的hash字符串（如：`_v-23j232jj` ）
 
 ## 测试demo
 

index.js

@@ -3,18 +3,19 @@ var objectAssign = require('object-assign');
 var hashSum = require('hash-sum');
 var compiler = require('vue-template-compiler');
 
+var genId = require('./lib/gen-id');
+var rewriteStyle = require('./lib/style-rewriter');
 var compileTemplate = require('./lib/template-compiler');
 var insertCSS = require('./lib/insert-css');
 
 // exports
 module.exports = function(content, file, conf) {
   var scriptStr = '';
-  var output, configs, vuecId, jsLang;
+  var output, configs, jsLang;
 
   // configs
   configs = objectAssign({
     extractCSS: true,
-    cssScopedFlag: '__vuec__',
     cssScopedIdPrefix: '_v-',
     cssScopedHashType: 'sum',
     cssScopedHashLength: 8,
@@ -23,29 +24,19 @@ module.exports = function(content, file, conf) {
     runtimeOnly: false,
   }, conf);
 
-  // replace scoped flag
-  function replaceScopedFlag(str) {
-    var reg = new RegExp('([^a-zA-Z0-9\-_])('+ configs.cssScopedFlag +')([^a-zA-Z0-9\-_])', 'g');
-    str = str.replace(reg, function($0, $1, $2, $3) {
-      return $1 + vuecId + $3;
-    });
-    return str;
-  }
-
   // 兼容content为buffer的情况
   content = content.toString();
 
-  // scope replace
-  if (configs.cssScopedType == 'sum') {
-    vuecId = configs.cssScopedIdPrefix + hashSum(file.subpath);
-  } else {
-    vuecId = configs.cssScopedIdPrefix + fis.util.md5(file.subpath, configs.cssScopedHashLength);
-  }
-  content = replaceScopedFlag(content);
-
+  // generate css scope id
+  var id = configs.cssScopedIdPrefix + genId(file, configs);
   // parse
   var output = compiler.parseComponent(content.toString(), { pad: true });
 
+  // check for scoped style nodes
+  var hasScopedStyle = output.styles.some(function (style) {
+    return style.scoped
+  });
+
   // script
   if (output.script) {
     scriptStr = output.script.content;
@@ -65,6 +56,13 @@ module.exports = function(content, file, conf) {
     isJsLike: true
   });
 
+  scriptStr += '\nvar __vue__options__;\n';
+  scriptStr += 'if(module.exports.__esModule && module.exports.default){\n';
+  scriptStr += '  __vue__options__ = module.exports.default;\n';
+  scriptStr += '}else{\n';
+  scriptStr += '  __vue__options__ = module.exports;\n';
+  scriptStr += '}\n';
+
   if(output.template){
     var templateContent = fis.compile.partial(output.template.content, file, {
       ext: output.template.lang || 'html',
@@ -74,22 +72,22 @@ module.exports = function(content, file, conf) {
     if(configs.runtimeOnly){
       var result = compileTemplate(templateContent);
       if(result){
-        scriptStr += '\n;\n(function(renderFun, staticRenderFns){\n'
-        scriptStr += '\nif(module && module.exports){ module.exports.render=renderFun; module.exports.staticRenderFns=staticRenderFns;}\n';
-        scriptStr += '\nif(exports && exports.default){ exports.default.render=renderFun; exports.default.staticRenderFns=staticRenderFns;}\n';
-        scriptStr += '\n})(' + result.render + ',' + result.staticRenderFns + ');\n';
+        scriptStr += '__vue__options__.render =' + result.render + '\n';
+        scriptStr += '__vue__options__.staticRenderFns =' + result.staticRenderFns + '\n';
       }
     }else{
       // template
-      scriptStr += '\n;\n(function(template){\n'
-      scriptStr += '\nmodule && module.exports && (module.exports.template = template);\n';
-      scriptStr += '\nexports && exports.default && (exports.default.template = template);\n';
-      scriptStr += '\n})(' + JSON.stringify(templateContent) + ');\n';
+      scriptStr += '__vue__options__.template = ' + JSON.stringify(templateContent) + '\n';
     }
   }
 
+  if(hasScopedStyle){
+    // template
+    scriptStr += '__vue__options__._scopeId = ' + JSON.stringify(id) + '\n';
+  }
+
   // style
-  output['styles'].forEach(function(item, index) {
+  output.styles.forEach(function(item, index) {
     if(!item.content){
       return;
     }
@@ -105,6 +103,8 @@ module.exports = function(content, file, conf) {
       isCssLike: true
     });
 
+    styleContent = rewriteStyle(id, styleContent, item.scoped, {})
+
     if(!configs.extractCSS){
       scriptStr += '\n;(' + insertCSS + ')(' + JSON.stringify(styleContent) + ');\n';
       return;
@@ -131,8 +131,5 @@ module.exports = function(content, file, conf) {
     file.addRequire(styleFile.getId());
   });
 
-  // 处理一遍scoped css
-  scriptStr = replaceScopedFlag(scriptStr);
-
   return scriptStr;
 };

lib/gen-id.js

@@ -0,0 +1,25 @@
+// utility for generating a uid for each component file
+// used in scoped CSS rewriting
+var hash = require('hash-sum')
+var cache = Object.create(null)
+
+// module.exports = function genId (file) {
+//   return cache[file] || (cache[file] = hash(file))
+// }
+
+module.exports = function genId(file, configs){
+  if(cache[file.subpath]){
+    return cache[file.subpath];
+  }
+
+  var scopeId;
+
+  // scope replace
+  if (configs.cssScopedType == 'sum') {
+    scopeId = hash(file.subpath);
+  } else {
+    scopeId = fis.util.md5(file.subpath, configs.cssScopedHashLength);
+  }
+
+  return cache[file.subpath] = scopeId;
+};

lib/style-rewriter.js

@@ -0,0 +1,89 @@
+var postcss = require('postcss')
+var selectorParser = require('postcss-selector-parser')
+var cache = require('lru-cache')(100)
+var assign = require('object-assign')
+
+var deasync = require('deasync')
+
+var currentId
+var addId = postcss.plugin('add-id', function () {
+  return function (root) {
+    root.each(function rewriteSelector (node) {
+      if (!node.selector) {
+        // handle media queries
+        if (node.type === 'atrule' && node.name === 'media') {
+          node.each(rewriteSelector)
+        }
+        return
+      }
+      node.selector = selectorParser(function (selectors) {
+        selectors.each(function (selector) {
+          var node = null
+          selector.each(function (n) {
+            if (n.type !== 'pseudo') node = n
+          })
+          selector.insertAfter(node, selectorParser.attribute({
+            attribute: currentId
+          }))
+        })
+      }).process(node.selector).result
+    })
+  }
+})
+
+/**
+ * Add attribute selector to css
+ *
+ * @param {String} id
+ * @param {String} css
+ * @param {Boolean} scoped
+ * @param {Object} options
+ * @return {Promise}
+ */
+
+module.exports = deasync(function (id, css, scoped, options, cbk) {
+  var key = id + '!!' + scoped + '!!' + css
+  var val = cache.get(key)
+  if (val) {
+    cbk(null, val)
+  } else {
+    var plugins = []
+    var opts = {}
+
+    // // do not support post plugins here, use fis3 style plugins
+    // if (options.postcss instanceof Array) {
+    //   plugins = options.postcss.slice()
+    // } else if (options.postcss instanceof Object) {
+    //   plugins = options.postcss.plugins || []
+    //   opts = options.postcss.options
+    // }
+
+    // scoped css rewrite
+    // make sure the addId plugin is only pushed once
+    if (scoped && plugins.indexOf(addId) === -1) {
+      plugins.push(addId)
+    }
+
+    // remove the addId plugin if the style block is not scoped
+    if (!scoped && plugins.indexOf(addId) !== -1) {
+      plugins.splice(plugins.indexOf(addId), 1)
+    }
+
+    // // do not support cssnano minification here, use fis3 style plugins
+    // // minification
+    // if (process.env.NODE_ENV === 'production') {
+    //   plugins.push(require('cssnano')(assign({
+    //     safe: true
+    //   }, options.cssnano)))
+    // }
+    currentId = id
+
+    postcss(plugins)
+      .process(css, opts)
+      .then(function (res) {
+        cache.set(key, res.css)
+        cbk(null, res.css)
+      })
+  }
+})
+

package.json

@@ -12,8 +12,12 @@
   "main": "index.js",
   "dependencies": {
     "chalk": "^1.1.3",
+    "deasync": "^0.1.9",
     "hash-sum": "^1.0.2",
+    "lru-cache": "^4.0.2",
     "object-assign": "^4.1.0",
+    "postcss": "^5.2.16",
+    "postcss-selector-parser": "^2.2.3",
     "uglify-js": "^2.8.14",
     "vue-template-compiler": "^2.1.6",
     "vue-template-es2015-compiler": "^1.4.0"

test/src/component/a.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="component-a" __vuec__>
+  <div class="component-a">
     Component A
   </div>
 </template>
@@ -15,13 +15,13 @@
   }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 body {
   a {
     color: inherit;
   }
 }
-.component-a[__vuec__] {
+.component-a {
   line-height: 50px;
   text-align: center;
   color: #fff;

test/src/component/index.vue

@@ -1,7 +1,7 @@
 
-<style lang="less">
+<style lang="less" scoped>
 @import "../less/other.less";
-.index.__vuec__ {
+.index {
   > p {
     line-height: 50px;
     text-align: center;
@@ -23,7 +23,7 @@ $blue : #1875e7;　
 </style>
 
 <template>
-  <div class="index __vuec__" >
+  <div class="index" >
     <p>fis3-parser-vue-component demo runing ~</p>
     <component-a></component-a>
     <component-b></component-b>

test2/src/component/a.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="component-a" __vuec__>
+  <div class="component-a">
     Component A
   </div>
 </template>
@@ -15,13 +15,13 @@
   }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 body {
   a {
     color: inherit;
   }
 }
-.component-a[__vuec__] {
+.component-a {
   line-height: 50px;
   text-align: center;
   color: #fff;