fix(mp): 修复 修改class编译导致部分小程序（如：百度）无法使用externalClasses

packages/uni-template-compiler/__tests__/compiler-extra.spec.js

@@ -64,14 +64,14 @@ describe('mp:compiler-extra', () => {
     )
     assertCodegen(
       '<view class="static" :class="[{ active: isActive }, errorClass]"></view>',
-      '<view class="{{[\'static data-v-4\',[(isActive)?\'active\':\'\'],errorClass]}}"></view>',
+      '<view class="{{[\'static\',\'data-v-4\',[(isActive)?\'active\':\'\'],errorClass]}}"></view>',
       undefined, {
         scopeId: 'data-v-4'
       }
     )
     assertCodegen(
       '<view ref="ref" :class="[{ active: isActive }, errorClass]"></view>',
-      '<view data-ref="ref" class="{{[\'data-v-5 vue-ref\',[(isActive)?\'active\':\'\'],errorClass]}}"></view>',
+      '<view data-ref="ref" class="{{[\'data-v-5\',\'vue-ref\',[(isActive)?\'active\':\'\'],errorClass]}}"></view>',
       undefined, {
         scopeId: 'data-v-5'
       }
@@ -92,7 +92,7 @@ describe('mp:compiler-extra', () => {
     //     )
     assertCodegen(
       '<view :class="view" class="view"></view>',
-      '<view class="{{[\'view data-v-7\',view]}}"></view>',
+      '<view class="{{[\'view\',\'data-v-7\',view]}}"></view>',
       undefined, {
         scopeId: 'data-v-7'
       }
@@ -378,23 +378,23 @@ describe('mp:compiler-extra', () => {
     )
     assertCodegen(
       '<p class="static" :class="{ active: isActive, \'text-danger\': hasError }">2</p>',
-      '<view class="{{[\'static _p\',(isActive)?\'active\':\'\',(hasError)?\'text-danger\':\'\']}}">2</view>'
+      '<view class="{{[\'static\',\'_p\',(isActive)?\'active\':\'\',(hasError)?\'text-danger\':\'\']}}">2</view>'
     )
     assertCodegen(
       '<p class="static" :class="[activeClass, errorClass]">3</p>',
-      '<view class="{{[\'static _p\',activeClass,errorClass]}}">3</view>'
+      '<view class="{{[\'static\',\'_p\',activeClass,errorClass]}}">3</view>'
     )
     assertCodegen(
       '<p class="static" :class="[isActive ? activeClass : \'\', errorClass]">4</p>',
-      '<view class="{{[\'static _p\',isActive?activeClass:\'\',errorClass]}}">4</view>'
+      '<view class="{{[\'static\',\'_p\',isActive?activeClass:\'\',errorClass]}}">4</view>'
     )
     assertCodegen(
       '<p class="static" :class="[{ active: isActive }, errorClass]">5</p>',
-      '<view class="{{[\'static _p\',[(isActive)?\'active\':\'\'],errorClass]}}">5</view>'
+      '<view class="{{[\'static\',\'_p\',[(isActive)?\'active\':\'\'],errorClass]}}">5</view>'
     )
     assertCodegen(
       '<div class="container" :class="computedClassObject">6</div>',
-      '<view class="{{[\'container _div\',computedClassObject]}}">6</view>'
+      '<view class="{{[\'container\',\'_div\',computedClassObject]}}">6</view>'
     )
     //         assertCodegen(
     //             `<div class="container" :class="computedClassObject">6</div>`,
@@ -411,7 +411,7 @@ describe('mp:compiler-extra', () => {
     )
     assertCodegen(
       '<p :class="classStr1 || classStr2" class="bg">9</p>',
-      '<view class="{{[\'bg _p\',classStr1||classStr2]}}">9</view>'
+      '<view class="{{[\'bg\',\'_p\',classStr1||classStr2]}}">9</view>'
     )
   })
 

packages/uni-template-compiler/__tests__/compiler-mp-alipay.spec.js

@@ -137,27 +137,27 @@ describe('mp:compiler-mp-alipay', () => {
     )
     assertCodegen(
       '<p class="static" :class="{ active: isActive, \'text-danger\': hasError }">2</p>',
-      '<view class="{{(((\'static _p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+((hasError)?\'text-danger\':\'\'))}}">2</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+((hasError)?\'text-danger\':\'\'))}}">2</view>'
     )
     assertCodegen(
       '<p class="static" :class="[activeClass, errorClass]">3</p>',
-      '<view class="{{(((\'static _p\')+\' \'+activeClass)+\' \'+errorClass)}}">3</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+activeClass)+\' \'+errorClass)}}">3</view>'
     )
     assertCodegen(
       '<p class="static" :class="[isActive ? activeClass : \'\', errorClass]">4</p>',
-      '<view class="{{(((\'static _p\')+\' \'+(isActive?activeClass:\'\'))+\' \'+errorClass)}}">4</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+(isActive?activeClass:\'\'))+\' \'+errorClass)}}">4</view>'
     )
     assertCodegen(
       '<p class="static" :class="[{ active: isActive }, errorClass]">5</p>',
-      '<view class="{{(((\'static _p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)}}">5</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)}}">5</view>'
     )
     assertCodegen(
       '<p class="static" :class="[{ active: isActive, disabled: isDisabled }, errorClass]">52</p>',
-      '<view class="{{(((\'static _p\')+\' \'+(((isActive)?\'active\':\'\')+\' \'+((isDisabled)?\'disabled\':\'\')))+\' \'+errorClass)}}">52</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+(((isActive)?\'active\':\'\')+\' \'+((isDisabled)?\'disabled\':\'\')))+\' \'+errorClass)}}">52</view>'
     )
     assertCodegen(
       '<div class="container" :class="computedClassObject">6</div>',
-      '<view class="{{((\'container _div\')+\' \'+computedClassObject)}}">6</view>'
+      '<view class="{{(((\'container\')+\' \'+\'_div\')+\' \'+computedClassObject)}}">6</view>'
     )
     //     assertCodegen(
     //       `<div class="container" :class="computedClassObject">6</div>`,
@@ -174,11 +174,15 @@ describe('mp:compiler-mp-alipay', () => {
     )
     assertCodegen(
       '<p :class="classStr1 || classStr2" class="bg">9</p>',
-      '<view class="{{((\'bg _p\')+\' \'+(classStr1||classStr2))}}">9</view>'
+      '<view class="{{(((\'bg\')+\' \'+\'_p\')+\' \'+(classStr1||classStr2))}}">9</view>'
     )
     assertCodegen(
       '<p class="static" :class="[{ active: isActive }, errorClass, [flex, \'flex-row\']]">10</p>',
-      '<view class="{{((((\'static _p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)+\' \'+((flex)+\' \'+\'flex-row\'))}}">10</view>'
+      '<view class="{{(((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)+\' \'+((flex)+\' \'+\'flex-row\'))}}">10</view>'
+    )
+    assertCodegen(
+      '<p class="a external-class c" :class="class1">hello world</p>',
+      '<view class="{{(((((\'a\')+\' \'+\'external-class\')+\' \'+\'c\')+\' \'+\'_p\')+\' \'+class1)}}">hello world</view>'
     )
   })
 

packages/uni-template-compiler/__tests__/compiler-mp-baidu.spec.js

@@ -15,6 +15,12 @@ function assertCodegen (template, templateCode, renderCode = 'with(this){}', opt
 }
 
 describe('mp:compiler-mp-baidu', () => {
+  it('generate class', () => {
+    assertCodegen(
+      '<view class="a external-class c" :class="class1">hello world</view>',
+      '<view class="{{[\'a\',\'external-class\',\'c\',class1]}}">hello world</view>'
+    )
+  })
   it('generate v-for directive', () => {
     assertCodegen(
       '<view><view v-for="(item,index) in items" :key="index"></view></view>',

packages/uni-template-compiler/__tests__/compiler-mp-kuaishou.spec.js

@@ -20,6 +20,12 @@ function assertCodegen (template, templateCode, renderCode = 'with(this){}', opt
 }
 
 describe('mp:compiler-mp-kuaishou', () => {
+  it('generate class', () => {
+    assertCodegen(
+      '<view class="a external-class c" :class="class1">hello world</view>',
+      '<view class="{{[\'a\',\'external-class\',\'c\',class1]}}">hello world</view>'
+    )
+  })
   it('generate scoped slot', () => {
     assertCodegen(
       '<foo><template slot-scope="{bar}">{{ bar.foo }}</template></foo>',

packages/uni-template-compiler/__tests__/compiler-mp-qq.spec.js

-const compiler = require('../lib')
-
-function assertCodegen (template, templateCode, renderCode = 'with(this){}', options = {}) {
+const compiler = require('../lib')
+
+function assertCodegen (template, templateCode, renderCode = 'with(this){}', options = {}) {
   const res = compiler.compile(template, {
-    resourcePath: 'test.wxml',
-    mp: Object.assign({
-      minified: true,
-      isTest: true,
-      platform: 'mp-qq'
-    }, options)
-  })
-
-  expect(res.template).toBe(templateCode)
-  expect(res.render).toBe(renderCode)
-}
-
+    resourcePath: 'test.wxml',
+    mp: Object.assign({
+      minified: true,
+      isTest: true,
+      platform: 'mp-qq'
+    }, options)
+  })
+
+  expect(res.template).toBe(templateCode)
+  expect(res.render).toBe(renderCode)
+}
+
 describe('mp:compiler-mp-qq', () => {
+  it('generate class', () => {
+    assertCodegen(
+      '<view class="a external-class c" :class="class1">hello world</view>',
+      '<view class="{{[\'a\',\'external-class\',\'c\',class1]}}">hello world</view>'
+    )
+  })
   it('generate text trim', () => {
     assertCodegen(
       '<text>\nN: {{title}}\n′</text>',
@@ -33,5 +39,5 @@ describe('mp:compiler-mp-qq', () => {
     我的第二行2{{title}}</text>`,
       '<text>{{"我是第一行3\\\\n    我的第二行2"+title}}</text>'
     )
-  })
+  })
 })

packages/uni-template-compiler/__tests__/compiler-mp-toutiao.spec.js

@@ -36,27 +36,27 @@ describe('mp:compiler-mp-toutiao', () => {
     )
     assertCodegen(
       '<p class="static" :class="{ active: isActive, \'text-danger\': hasError }">2</p>',
-      '<view class="{{(((\'static _p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+((hasError)?\'text-danger\':\'\'))}}">2</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+((hasError)?\'text-danger\':\'\'))}}">2</view>'
     )
     assertCodegen(
       '<p class="static" :class="[activeClass, errorClass]">3</p>',
-      '<view class="{{(((\'static _p\')+\' \'+activeClass)+\' \'+errorClass)}}">3</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+activeClass)+\' \'+errorClass)}}">3</view>'
     )
     assertCodegen(
       '<p class="static" :class="[isActive ? activeClass : \'\', errorClass]">4</p>',
-      '<view class="{{(((\'static _p\')+\' \'+(isActive?activeClass:\'\'))+\' \'+errorClass)}}">4</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+(isActive?activeClass:\'\'))+\' \'+errorClass)}}">4</view>'
     )
     assertCodegen(
       '<p class="static" :class="[{ active: isActive }, errorClass]">5</p>',
-      '<view class="{{(((\'static _p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)}}">5</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)}}">5</view>'
     )
     assertCodegen(
       '<p class="static" :class="[{ active: isActive, disabled: isDisabled }, errorClass]">52</p>',
-      '<view class="{{(((\'static _p\')+\' \'+(((isActive)?\'active\':\'\')+\' \'+((isDisabled)?\'disabled\':\'\')))+\' \'+errorClass)}}">52</view>'
+      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+(((isActive)?\'active\':\'\')+\' \'+((isDisabled)?\'disabled\':\'\')))+\' \'+errorClass)}}">52</view>'
     )
     assertCodegen(
       '<div class="container" :class="computedClassObject">6</div>',
-      '<view class="{{((\'container _div\')+\' \'+computedClassObject)}}">6</view>'
+      '<view class="{{(((\'container\')+\' \'+\'_div\')+\' \'+computedClassObject)}}">6</view>'
     )
     //     assertCodegen(
     //       `<div class="container" :class="computedClassObject">6</div>`,
@@ -73,11 +73,15 @@ describe('mp:compiler-mp-toutiao', () => {
     )
     assertCodegen(
       '<p :class="classStr1 || classStr2" class="bg">9</p>',
-      '<view class="{{((\'bg _p\')+\' \'+(classStr1||classStr2))}}">9</view>'
+      '<view class="{{(((\'bg\')+\' \'+\'_p\')+\' \'+(classStr1||classStr2))}}">9</view>'
     )
     assertCodegen(
       '<p class="static" :class="[{ active: isActive }, errorClass, [flex, \'flex-row\']]">10</p>',
-      '<view class="{{((((\'static _p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)+\' \'+((flex)+\' \'+\'flex-row\'))}}">10</view>'
+      '<view class="{{(((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)+\' \'+((flex)+\' \'+\'flex-row\'))}}">10</view>'
+    )
+    assertCodegen(
+      '<p class="a external-class c" :class="class1">hello world</p>',
+      '<view class="{{(((((\'a\')+\' \'+\'external-class\')+\' \'+\'c\')+\' \'+\'_p\')+\' \'+class1)}}">hello world</view>'
     )
   })
 

packages/uni-template-compiler/__tests__/compiler-mp-weixin.spec.js

@@ -20,6 +20,12 @@ function assertCodegen (template, templateCode, renderCode = 'with(this){}', opt
 }
 
 describe('mp:compiler-mp-weixin', () => {
+  it('generate class', () => {
+    assertCodegen(
+      '<view class="a external-class c" :class="class1">hello world</view>',
+      '<view class="{{[\'a\',\'external-class\',\'c\',class1]}}">hello world</view>'
+    )
+  })
   it('generate scoped slot', () => {
     assertCodegen(
       '<foo><template slot-scope="{bar}">{{ bar.foo }}</template></foo>',

packages/uni-template-compiler/lib/script/traverse/data/class.js

@@ -8,9 +8,9 @@ function processClassArrayExpressionElements (classArrayExpression) {
   let binaryExpression
 
   classArrayExpression.elements.forEach(expr => {
-    if (t.isArrayExpression(expr)) {
-      expr = processClassArrayExpressionElements(expr)
-    }
+    if (t.isArrayExpression(expr)) {
+      expr = processClassArrayExpressionElements(expr)
+    }
     if (!binaryExpression) {
       binaryExpression = t.parenthesizedExpression(expr)
     } else {
@@ -31,9 +31,10 @@ function processClassArrayExpressionElements (classArrayExpression) {
 
 function processStaticClass (classArrayExpression, staticClassPath, state) {
   if (staticClassPath) {
-    classArrayExpression.elements.unshift(
-      t.stringLiteral(staticClassPath.node.value.value)
-    )
+    const staticClassPathArr = staticClassPath.node.value.value.split(' ')
+    for (let len = staticClassPathArr.length, index = len - 1; index >= 0; index--) {
+      classArrayExpression.elements.unshift(t.stringLiteral(staticClassPathArr[index]))
+    }
     staticClassPath.remove()
   }
   if (
@@ -135,4 +136,4 @@ module.exports = function processClass (paths, path, state) {
     }
   }
   return []
-}
+}