fix(layer): Combine p tags with the same classes

morrislaptop · May 18, 2018 · 368e0f2 · 368e0f2
1 parent cfdc28c
commit 368e0f2
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 2 deletions.
diff --git a/src/lib.js b/src/lib.js
@@ -144,8 +144,26 @@ function shapeLayerToCode(tailwind, context, layer) {
     return classesToCode(tailwind.screens, 'div', classes.filter(n => n))
 }
 
-function textLayerToCode(tailwind, context, layer) {
-    let tags = layer.textStyles.map(style => textStyleToCode(tailwind, context, layer, style))
+function combineTextLayersWithTheSameClasses(tailwind, context, textStyles)
+{
+    return Object.values(textStyles.reduce((obj, style) => {
+        let classes = fontAndTextClasses(tailwind, context, style.textStyle).join(' ')
+
+        if (obj[classes]) {
+            obj[classes].range.end = style.range.end
+        }
+        else {
+            obj[classes] = style
+        }
+
+        return obj
+    }, {}))
+}
+
+function textLayerToCode(tailwind, context, layer) {    
+    let textStyles = combineTextLayersWithTheSameClasses(tailwind, context, layer.textStyles)
+
+    let tags = textStyles.map(style => textStyleToCode(tailwind, context, layer, style))
 
     return tags.join("\n")
 }

diff --git a/test/layer.test.js b/test/layer.test.js
@@ -24,6 +24,12 @@ let tests = {
 <p class="sample-text-style-with-color uppercase">RED</p>`)
   },
 
+  TextLayerWithMultipleStylesThatAreTheSame(context, layer) {
+    let css = ext.layer(context, layer)
+
+    expect(css.code).toBe(`<p class="text-xl font-medium">Type something RED</p>`)
+  },
+
   TextLayer(context, layer) {
     let css = ext.layer(context, layer)
 

diff --git a/test/sample-data/layers.json b/test/sample-data/layers.json
@@ -106,6 +106,94 @@
         ],
         "assets": []
     },
+    {
+        "type": "text",
+        "name": "Text layer with multiple styles that are the same",
+        "exportable": false,
+        "rotation": 0,
+        "opacity": 1,
+        "blendMode": "normal",
+        "borderRadius": 0,
+        "rect": {
+            "y": 44,
+            "x": 0,
+            "width": 220,
+            "height": 24
+        },
+        "content": "Type something RED",
+        "borders": [],
+        "fills": [],
+        "shadows": [],
+        "textStyles": [
+            {
+                "range": {
+                    "location": 0,
+                    "length": 4
+                },
+                "style": {
+                    "fontFace": "SFProText-Medium",
+                    "fontSize": 20,
+                    "fontWeight": 500,
+                    "fontStyle": "normal",
+                    "fontFamily": "SFProText",
+                    "fontStretch": "normal",
+                    "textAlign": "left",
+                    "weightText": "medium",
+                    "color": {
+                        "r": 0,
+                        "g": 0,
+                        "b": 0,
+                        "a": 1
+                    }
+                }
+            },
+            {
+                "range": {
+                    "location": 5,
+                    "length": 9
+                },
+                "style": {
+                    "fontFace": "SFProText-Medium",
+                    "fontSize": 20,
+                    "fontWeight": 500,
+                    "fontStyle": "normal",
+                    "fontFamily": "SFProText",
+                    "fontStretch": "normal",
+                    "textAlign": "left",
+                    "weightText": "medium",
+                    "color": {
+                        "r": 0,
+                        "g": 0,
+                        "b": 0,
+                        "a": 1
+                    }
+                }
+            },
+            {
+                "range": {
+                    "location": 15,
+                    "length": 3
+                },
+                "style": {
+                    "fontFace": "SFProText-Medium",
+                    "fontSize": 20,
+                    "fontWeight": 500,
+                    "fontStyle": "normal",
+                    "fontFamily": "SFProText",
+                    "fontStretch": "normal",
+                    "textAlign": "left",
+                    "weightText": "medium",
+                    "color": {
+                        "r": 0,
+                        "g": 0,
+                        "b": 0,
+                        "a": 1
+                    }
+                }
+            }
+        ],
+        "assets": []
+    },
     {
         "type": "text",
         "name": "Text layer",