diff --git a/src/lib.js b/src/lib.js index c899793..4a42e86 100644 --- 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 index 4c82ceb..d187aaf 100644 --- a/test/layer.test.js +++ b/test/layer.test.js @@ -24,6 +24,12 @@ let tests = {
RED
`) }, + TextLayerWithMultipleStylesThatAreTheSame(context, layer) { + let css = ext.layer(context, layer) + + expect(css.code).toBe(`Type something RED
`) + }, + TextLayer(context, layer) { let css = ext.layer(context, layer) diff --git a/test/sample-data/layers.json b/test/sample-data/layers.json index 5db2446..f9faf26 100644 --- 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",