fix(content): merge class and style attribute (#905)

Author: nozomuikuta

packages/content/templates/nuxt-content.js

@@ -1,6 +1,6 @@
 import info from 'property-information'
 
-const rootKeys = ['class-name', 'class', 'style']
+const rootKeys = ['class-name', 'class', 'className', 'style']
 
 const rxOn = /^@|^v-on:/
 const rxBind = /^:|^v-bind:/

packages/content/test/component.test.js

@@ -43,7 +43,17 @@ describe('component', () => {
 
       expect(html).toMatch(
         // eslint-disable-next-line prefer-regex-literals
-        new RegExp(/<div>\s*<h1><\/h1>\s*<div class="nuxt-content">\s*<div>\s*<header>Header content<\/header>\s*<main>\s*Main content\s*<\/main>\s*<footer>Footer content<\/footer><\/div><\/div><\/div>/)
+        new RegExp(/<div>\s*<h1><\/h1>\s*<div class="nuxt-content">\s*<div class="app-layout dark" style="background-color:blue;color:red;">\s*<header>Header content<\/header>\s*<main>\s*Main content\s*<\/main>\s*<footer>Footer content<\/footer><\/div><\/div><\/div>/)
+      )
+    })
+
+    test('has rendered a Vue.js functional component', async () => {
+      page = await browser.page(url('/vue-component'))
+      const html = await page.getHtml()
+
+      expect(html).toMatch(
+        // eslint-disable-next-line prefer-regex-literals
+        new RegExp(/<div>\s*<h1><\/h1>\s*<div class="nuxt-content">\s*<div class="app-layout dark" style="background-color:blue;color:red;">\s*<header>Header content<\/header>\s*<main>\s*Main content\s*<\/main>\s*<footer>Footer content<\/footer><\/div><\/div><\/div>/)
       )
     })
 

packages/content/test/fixture/components/AppLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="app-layout" style="background-color: blue;">
     <header><slot name="header" /></header>
     <main><slot>Default content</slot></main>
     <footer><slot name="footer" /></footer>

packages/content/test/fixture/components/FnComponent.vue

@@ -0,0 +1,14 @@
+<script>
+export default {
+  functional: true,
+  render (h, { data }) {
+    return h('AppLayout', {
+      ...data,
+      scopedSlots: {
+        header: () => h('Header content'),
+        footer: () => h('Footer content')
+      }
+    }, [])
+  }
+}
+</script>

packages/content/test/fixture/content/vue-component.md

@@ -1,5 +1,5 @@
-<app-layout>
+<app-layout class="dark" style="color: red;">
   <template #header>Header content</template>
   Main content
   <template #footer>Footer content</template>
-</app-layout>
+</app-layout>

packages/content/test/fixture/content/vue-fn-component.md

@@ -0,0 +1,5 @@
+<app-layout class="dark" style="color: red;">
+  <template #header>Header content</template>
+  Main content
+  <template #footer>Footer content</template>
+</app-layout>