support multiple script/style tags

yyx990803 · yyx990803 · commit c3a9c74b478c · 2015-02-23T21:53:57.000-05:00
diff --git a/index.js b/index.js
@@ -30,53 +30,57 @@ exports.compile = function (content, filePath, cb) {
     filePath = process.cwd()
   }
 
-  var script
-  var style
+  // only 1 template tag is allowed, while styles and
+  // scripts are concatenated.
   var template
+  var script = ''
+  var style = ''
   var output = ''
   var jobs = []
 
   var fragment = parser.parseFragment(content)
   fragment.childNodes.forEach(function (node) {
     switch (node.nodeName) {
-      case 'style':
-        style = checkSrc(node, filePath) || serializer.serialize(node)
+      case 'template':
+        template = checkSrc(node, filePath) || serializeTemplate(node)
         var lang = checkLang(node)
-        if (lang === 'scss') {
-          lang = 'sass'
-        }
-        if (styleLangs.indexOf(lang) < 0) {
+        if (templateLangs.indexOf(lang) < 0) {
           break
         }
         jobs.push(function (cb) {
-          require('./compilers/' + lang)(style, function (err, res) {
-            style = res
+          require('./compilers/' + lang)(template, function (err, res) {
+            template = res
             cb(err)
           })
         })
         break
-      case 'template':
-        template = checkSrc(node, filePath) || serializeTemplate(node)
+      case 'style':
+        var rawStyle = checkSrc(node, filePath) || serializer.serialize(node)
         var lang = checkLang(node)
-        if (templateLangs.indexOf(lang) < 0) {
+        if (lang === 'scss') {
+          lang = 'sass'
+        }
+        if (styleLangs.indexOf(lang) < 0) {
+          style += rawStyle
           break
         }
         jobs.push(function (cb) {
-          require('./compilers/' + lang)(template, function (err, res) {
-            template = res
+          require('./compilers/' + lang)(rawStyle, function (err, res) {
+            style += res
             cb(err)
           })
         })
         break
       case 'script':
-        script = checkSrc(node, filePath) || serializer.serialize(node).trim()
+        var rawScript = checkSrc(node, filePath) || serializer.serialize(node).trim()
         var lang = checkLang(node)
         if (scriptLangs.indexOf(lang) < 0) {
+          script += (script ? '\n' : '') + rawScript
           break
         }
         jobs.push(function (cb) {
-          require('./compilers/' + lang)(script, function (err, res) {
-            script = res
+          require('./compilers/' + lang)(rawScript, function (err, res) {
+            script += (script ? '\n' : '') + res
             cb(err)
           })
         })
diff --git a/test/compiler_spec.js b/test/compiler_spec.js
@@ -25,15 +25,8 @@ function test (name) {
 }
 
 describe('Vue component compiler', function () {
-
-  test('basic')
-  test('empty')
-  test('less')
-  test('sass')
-  test('myth')
-  test('jade')
-  test('multiple')
-  test('src')
-  test('es6')
-
+  fs.readdirSync(path.resolve(__dirname, 'expects'))
+    .forEach(function (file) {
+      test(path.basename(file, '.js'))
+    })
 })
diff --git a/test/expects/multiple-scripts.js b/test/expects/multiple-scripts.js
@@ -0,0 +1,12 @@
+var a = 1
+var b;
+
+b = x(function() {
+  return x || 5;
+});
+
+"use strict";
+
+var p = function (x) {
+  return x || 5;
+};
diff --git a/test/expects/multiple-styles.js b/test/expects/multiple-styles.js
@@ -0,0 +1 @@
+require("insert-css")("h1{font-size:20px}h2{font-size:14px}#test h1{font-size:18px}");
diff --git a/test/fixtures/multiple-scripts.vue b/test/fixtures/multiple-scripts.vue
@@ -0,0 +1,11 @@
+<script>
+var a = 1
+</script>
+
+<script lang="coffee">
+b = x -> x or 5
+</script>
+
+<script lang="es6">
+let p = x => x || 5
+</script>
diff --git a/test/fixtures/multiple-styles.vue b/test/fixtures/multiple-styles.vue
@@ -0,0 +1,18 @@
+<style>
+h1 {
+  font-size: 20px;
+}
+</style>
+
+<style lang="scss">
+#test {
+  h1 {
+    font-size: 18px;
+  }
+}
+</style>
+
+<style lang="stylus">
+h2
+  font-size 14px
+</style>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+require("insert-css")("h1{font-size:20px}h2{font-size:14px}#test h1{font-size:18px}");`