feat(layer): Support properties from #1

src/lib.js

@@ -96,7 +96,37 @@ function borderClass(tailwind, borders) {
     if (!borders[0]) return null
     let border = borders[0]
 
-    return colorToClass(context, fill.color, 'bg-')
+    let sizes = dropTheRem(tailwind.borderWidths)
+    let key = closestKey(sizes, border.thickness)
+
+    if (key === 'default') return null
+
+    return 'border-' + key
+}
+
+function borderColor(context, tailwind, borders) {
+    if (!borders[0] || !borders[0].fill.color) return null
+    let border = borders[0]
+
+    return colorToClass(context, border.fill.color, 'border-')
+}
+
+function maxWidthClass(tailwind, { width }) {
+    let ratio = width / REM
+    let widths = dropTheRem(tailwind.maxWidth)
+    let key = closestKey(widths, ratio)
+
+    return 'max-w-' + key
+}
+
+function minHeightClass(tailwind, { height }) {
+    let ratio = height / REM
+    let heights = dropTheRem(tailwind.minHeight)
+    let key = closestKey(heights, ratio)
+
+    if (key === '0') return null
+
+    return 'min-h-' + key
 }
 
 function shapeLayerToCode(tailwind, context, layer) {
@@ -105,7 +135,10 @@ function shapeLayerToCode(tailwind, context, layer) {
         opacityToClass(tailwind, layer.opacity),
         shadowsToClass(tailwind, layer.shadows),
         backgroundClass(context, tailwind, layer.fills),
-        borderClass(tailwind, layer.borders)
+        borderClass(tailwind, layer.borders),
+        borderColor(context, tailwind, layer.borders),
+        maxWidthClass(tailwind, layer.rect),
+        minHeightClass(tailwind, layer.rect),
     ]
 
     return classesToCode(tailwind.screens, 'div', classes.filter(n => n))
@@ -117,10 +150,28 @@ function textLayerToCode(tailwind, context, layer) {
     return tags.join("\n")
 }
 
+function contentToTransformClass(content) {
+    if (content !== content.toUpperCase()) return null
+
+    return 'uppercase'
+}
+
+function contentToTruncateClass(content) {
+    if (!content.includes('...') && !content.includes('…')) return null
+
+    return 'truncate'
+}
+
 function textStyleToCode(tailwind, context, layer, style) {
     let projectStyle = context.project.findTextStyleEqual(style.textStyle)
     let classes = projectStyle ? [s(projectStyle.name).slugify().s] : fontAndTextClasses(tailwind, context, style.textStyle)
     let content = layer.content.substring(style.range.start, style.range.end)
+
+    // Add some extra classes based on the content
+    classes = classes.concat([
+        contentToTransformClass(content),
+        contentToTruncateClass(content)
+    ]).filter(n => n)
 
     return classesToCode({}, 'p', classes, content)
 }

src/tailwind-config.json

@@ -449,6 +449,15 @@
   },
   "minHeight": {
     "0": "0",
+    "xs": "20rem",
+    "sm": "30rem",
+    "md": "40rem",
+    "lg": "50rem",
+    "xl": "60rem",
+    "2xl": "70rem",
+    "3xl": "80rem",
+    "4xl": "90rem",
+    "5xl": "100rem",
     "full": "100%",
     "screen": "100vh"
   },

test/layer.test.js

@@ -10,68 +10,84 @@ function ExpectEmptyTest(context, layer) {
 }
 
 let tests = {
-  SampleScreen: ExpectEmptyTest,
+  SampleScreen(context, layer) {
+    let css = ext.layer(context, layer)
+
+    expect(css.code).toBe('<div class="max-w-xs min-h-lg"></div>')
+  },
 
   TextLayerWithMultipleStyles(context, layer) {
     let css = ext.layer(context, layer)
 
     expect(css.code).toBe(`<p class="text-xl font-medium">Type</p>
 <p class="text-xl text-green">something</p>
-<p class="sample-text-style-with-color">red</p>`)
+<p class="sample-text-style-with-color uppercase">RED</p>`)
   },
 
   TextLayer(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<p class="sample-text-style">Type something</p>`)
+    expect(css.code).toBe(`<p class="sample-text-style truncate">Type something...</p>`)
   },
 
-  LayerWithBlur: ExpectEmptyTest,
+  LayerWithBlur(context, layer) {
+    let css = ext.layer(context, layer)
+
+    expect(css.code).toBe(`<div class="max-w-xs"></div>`)
+  },
 
   ExportableLayer(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<div class="bg-yellow"></div>`)
+    expect(css.code).toBe(`<div class="bg-yellow max-w-xs"></div>`)
   },
 
   LayerWithBorderRadius(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<div class="rounded-lg bg-red"></div>`)
+    expect(css.code).toBe(`<div class="rounded-lg bg-red max-w-xs"></div>`)
   },
 
   RotatedLayer(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<div class="bg-green"></div>`)
+    expect(css.code).toBe(`<div class="bg-green max-w-xs"></div>`)
   },
 
   TransparentLayerWithBlendMode(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<div class="opacity-25 bg-green"></div>`)
+    expect(css.code).toBe(`<div class="opacity-25 bg-green max-w-xs"></div>`)
   },
 
   LayerWithShadow(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<div class="shadow"></div>`)
+    expect(css.code).toBe(`<div class="shadow max-w-xs"></div>`)
   },
 
-  LayerWithGradientFill: ExpectEmptyTest,
+  LayerWithGradientFill(context, layer) {
+    let css = ext.layer(context, layer)
+
+    expect(css.code).toBe(`<div class="max-w-xs"></div>`)
+  },
 
   LayerWithFill(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<div class="bg-blue"></div>`)
+    expect(css.code).toBe(`<div class="bg-blue max-w-xs"></div>`)
   },
 
-  LayerWithGradientBorder: ExpectEmptyTest,
+  LayerWithGradientBorder(context, layer) {
+    let css = ext.layer(context, layer)
+
+    expect(css.code).toBe(`<div class="border-4 max-w-xs"></div>`)
+  },
 
   LayerWithBorder(context, layer) {
     let css = ext.layer(context, layer)
 
-    expect(css.code).toBe(`<div class="border border-green"></div>`)
+    expect(css.code).toBe(`<div class="border-2 border-green max-w-xs"></div>`)
   },
 }
 
@@ -107,23 +123,4 @@ test('outputs responsive classes as well for shape elements', () => {
 
   // Assert.
   expect(css.code).toContain('sm:')
-})
-
-// test('outputs a p without widths for text layers', () => {
-//   // Arrange.
-//   let context = new Context({ project, options: { font: 'sfprotext', color: 'black' }})
-
-//   let layer = new Layer({ type: "text", content: "Type something red", borders: [], fills: [], shadows: [], textStyles: [
-//     { range: { location: 0, length: 4 }, style: { fontFace: "SFProText-Medium", "fontSize": 20, "color": {r: 0, g: 0, b: 0, a: 1 } }},
-//     { range: { location: 5, length: 9 }, style: { fontFace: "SFProText-Regular", "fontSize": 20, "color": {r: 0, g: 255, b: 0, a: 1 } }},
-//     { range: { location: 15, length: 3 }, style: { fontFace: "SFProText-Regular", "fontSize": 20, "color": {r: 255, g: 0, b: 0, a: 1 } }},
-//   ]})
-
-//   // Act.
-//   let css = ext.layer(context, layer)
-
-//   // Assert.
-//   expect(css.code).toBe(`<p class="text-xl font-medium">Type</p>
-// <p class="text-xl text-green">Something</p>
-// <p class=".sample-text-style-with-color">red</p>`)
-// })
+})

test/sample-data/layers.json

@@ -32,7 +32,7 @@
             "width": 220,
             "height": 24
         },
-        "content": "Type something red",
+        "content": "Type something RED",
         "borders": [],
         "fills": [],
         "shadows": [],
@@ -120,15 +120,15 @@
             "width": 220,
             "height": 24
         },
-        "content": "Type something",
+        "content": "Type something...",
         "borders": [],
         "fills": [],
         "shadows": [],
         "textStyles": [
             {
                 "range": {
                     "location": 0,
-                    "length": 14
+                    "length": 17
                 },
                 "style": {
                     "fontFace": "SFProText-Regular",