feat: Query and use lineHeight, textAlign and verticalAlign CSS properties

Author: Andrey Okonetchnikov

src/File.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "react"
 import { Query } from "react-apollo"
 import gql from "graphql-tag"
 
@@ -37,7 +37,9 @@ export const childrenFragment = gql`
 					fontFamily
 					fontWeight
 					letterSpacing
-					lineHeightPx
+					lineHeight
+					textAlign
+					verticalAlign
 				}
 				fill {
 					r
@@ -95,8 +97,8 @@ const FIGMA_FILE_SUBSCRIPTION = gql`
 `
 
 interface IFile {
-	fileId: string,
-	pageName: string,
+	fileId: string
+	pageName: string
 	children?: any
 }
 

src/Text.tsx

@@ -1,15 +1,15 @@
-import * as React from "react";
+import * as React from "react"
 import styled from "styled-components"
 import { rgba } from "polished"
 import GoogleFontLoader from "react-google-font-loader"
 import Query from "./Query"
-import { INode } from "./Frame";
+import { INode } from "./Frame"
 
 const NodeWrapper = styled("div")`
 	position: absolute;
 `
 
-export default function Text({ nodeName, children }:INode) {
+export default function Text({ nodeName, children }: INode) {
 	return (
 		<Query
 			variables={{
@@ -49,7 +49,6 @@ export default function Text({ nodeName, children }:INode) {
 							style={{
 								...style,
 								...size,
-								lineHeight: `${style.lineHeightPx}px`,
 								left: relativeX,
 								top: relativeY,
 								color