feat(compiler): transformStyle

packages/compiler/__tests__/transforms/transformStyle.spec.ts

@@ -0,0 +1,76 @@
+// todo: uncomment if/when vue-next#907 is merged/released
+// import {
+//   baseParse as parse,
+//   transform,
+//   CompilerOptions,
+//   ElementNode,
+//   NodeTypes,
+//   VNodeCall,
+//   transformBind,
+//   transformElement
+// } from '@vue/compiler-core'
+// import { transformStyle } from '../../src/transforms/transformStyle'
+//
+// function transformWithStyleTransform(
+//   template: string,
+//   options: CompilerOptions = {}
+// ) {
+//   const ast = parse(template)
+//   transform(ast, {
+//     nodeTransforms: [transformStyle],
+//     ...options
+//   })
+//   return {
+//     root: ast,
+//     node: ast.children[0] as ElementNode
+//   }
+// }
+//
+describe('compiler: style transform', () => {
+  test.todo('uncomment tests')
+  // test('should transform into directive node', () => {
+  //   const { node } = transformWithStyleTransform(`<Label style="color: red"/>`)
+  //   expect(node.props[0]).toMatchObject({
+  //     type: NodeTypes.DIRECTIVE,
+  //     name: `bind`,
+  //     arg: {
+  //       type: NodeTypes.SIMPLE_EXPRESSION,
+  //       content: `style`,
+  //       isStatic: true
+  //     },
+  //     exp: {
+  //       type: NodeTypes.SIMPLE_EXPRESSION,
+  //       content: `{"color":"red"}`,
+  //       isStatic: false
+  //     }
+  //   })
+  // })
+  //
+  // test('working with v-bind transform', () => {
+  //   const { node } = transformWithStyleTransform(`<Label style="color: red"/>`, {
+  //     nodeTransforms: [transformStyle, transformElement],
+  //     directiveTransforms: {
+  //       bind: transformBind
+  //     }
+  //   })
+  //   expect((node.codegenNode as VNodeCall).props).toMatchObject({
+  //     type: NodeTypes.JS_OBJECT_EXPRESSION,
+  //     properties: [
+  //       {
+  //         key: {
+  //           type: NodeTypes.SIMPLE_EXPRESSION,
+  //           content: `style`,
+  //           isStatic: true
+  //         },
+  //         value: {
+  //           type: NodeTypes.SIMPLE_EXPRESSION,
+  //           content: `{"color":"red"}`,
+  //           isStatic: false
+  //         }
+  //       }
+  //     ]
+  //   })
+  //   // should not cause the STYLE patchFlag to be attached
+  //   expect((node.codegenNode as VNodeCall).patchFlag).toBeUndefined()
+  // })
+})

packages/compiler/src/transforms/transformStyle.ts

@@ -0,0 +1,48 @@
+import {
+  NodeTransform,
+  NodeTypes,
+  createSimpleExpression,
+  SimpleExpressionNode,
+  SourceLocation
+} from '@vue/compiler-core'
+
+// Parse inline CSS strings for static style attributes into an object.
+// This is a NodeTransform since it works on the static `style` attribute and
+// converts it into a dynamic equivalent:
+// style="color: red" -> :style='{ "color": "red" }'
+// It is then processed by `transformElement` and included in the generated
+// props.
+export const transformStyle: NodeTransform = (node, context) => {
+  if (node.type === NodeTypes.ELEMENT) {
+    node.props.forEach((p, i) => {
+      if (p.type === NodeTypes.ATTRIBUTE && p.name === 'style' && p.value) {
+        // replace p with an expression node
+        node.props[i] = {
+          type: NodeTypes.DIRECTIVE,
+          name: `bind`,
+          arg: createSimpleExpression(`style`, true, p.loc),
+          exp: parseInlineCSS(p.value.content, p.loc),
+          modifiers: [],
+          loc: p.loc
+        }
+      }
+    })
+  }
+}
+
+const listDelimiterRE = /;(?![^(]*\))/g
+const propertyDelimiterRE = /:(.+)/
+
+function parseInlineCSS(
+  cssText: string,
+  loc: SourceLocation
+): SimpleExpressionNode {
+  const res: Record<string, string> = {}
+  cssText.split(listDelimiterRE).forEach(item => {
+    if (item) {
+      const tmp = item.split(propertyDelimiterRE)
+      tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
+    }
+  })
+  return createSimpleExpression(JSON.stringify(res), false, loc, true)
+}

packages/runtime/src/modules/style.ts

@@ -24,6 +24,7 @@ function declarationsFromAstNodes(astRules: any[]): any[] {
 
 export function patchStyle(el: INSVElement, prev: Style, next: Style) {
   if (prev) {
+    // todo: check if we can substitute cssTreeParse with parseInlineCSS from compiler/transforms/transformStyle (by extracting it to shared)
     // reset previous styles
     const localStyle = `local { ${prev} }`
     const ast: any = cssTreeParse(localStyle, undefined)

tests/registry.ts

@@ -1,10 +1,10 @@
 import {
   NSVViewMeta,
   registerElement,
-  defaultViewMeta
+  defaultViewMeta,
+  NSVViewFlags
 } from '@nativescript-vue/runtime'
 import { TNSViewBase } from 'tests/ns-mocks/base'
-import { NSVViewFlags } from '../packages/runtime/src/nodes'
 
 export function registerTestElement(
   elementName: string,