feat(layer): Find close colours in the project in case the designer i…

…s lazy

package.json

@@ -1,6 +1,7 @@
 {
   "name": "tailwind-zeplin-extension",
   "version": "0.0.0-development",
+  "license": "MIT",
   "description": "Utilities to generate Tailwind Config and classes for your components.",
   "repository": "https://github.com/morrislaptop/tailwind-zeplin-extension.git",
   "bin": "./cli.js",
@@ -35,13 +36,21 @@
         "type": "text",
         "id": "color",
         "default": ""
+      },
+      {
+        "name": "Max Color Distance",
+        "type": "text",
+        "id": "maxColorDistance",
+        "default": "50"
       }
     ]
   },
   "dependencies": {
     "css": "^2.2.1",
     "css-shorthand-expand": "^1.2.0",
     "lodash": "^4.17.5",
+    "nearest-color": "^0.4.2",
+    "rgb-hex": "^2.1.0",
     "string": "^3.3.3",
     "zem": "^0.1.2"
   },

src/lib.js

@@ -1,5 +1,7 @@
 const s = require('string')
 const _ = require('lodash')
+const rgbHex = require('rgb-hex')
+const nearestColor = require('nearest-color')
 const REM = 16
 
 function classesToElement(el, classes, content) {
@@ -311,13 +313,37 @@ function fontWeightTextToClass(weight) {
 }
 
 function colorToClass(context, color, prefix) {
-    let projectColor = color && context.project.findColorEqual(color)
+    let projectColor = findClosestColour(context, color)
 
     if (!projectColor || projectColor.name.toLowerCase() === context.getOption('color').toLowerCase()) return null
 
     return prefix + projectColor.name
 }
 
+function findClosestColour(context, color) {
+    if (! color) return
+    // return color && context.project.findColorEqual(color)
+
+    // Convert to object the nearestColor library understands
+    let colors = context.project.colors.reduce((obj, color) => {
+        obj[color.name] = '#' + rgbHex(color.r, color.g, color.b)
+        return obj
+    }, {})
+
+    // Find the closest
+    let closest = nearestColor.from(colors)('#' + rgbHex(color.r, color.g, color.b))
+
+    // Return if it's too far away...
+    let max = context.getOption('maxColorDistance') || 0
+    if (! closest || closest.distance > max) return
+
+    // Find the original project colour
+    let rgb = closest.rgb
+    let projectColour = context.project.colors.find(color => color.r == rgb.r && color.g == rgb.g && color.b == rgb.b)
+
+    return projectColour
+}
+
 function readTailwindConfig(context) 
 {
     let js = context.getOption('tailwind')

test/layer.test.js

@@ -101,6 +101,12 @@ let tests = {
 
     expect(css.code).toBe(`<div class="border-2 border-green max-w-xs"></div>`)
   },
+
+  LayerWithSlightlyDifferentColour(context, layer) {
+    let css = ext.layer(context, layer)
+
+    expect(css.code).toBe(`<div class="bg-yellow max-w-xs"></div>`)
+  }
 }
 
 describe('Sample Data Tests', () => {
@@ -110,7 +116,7 @@ describe('Sample Data Tests', () => {
   let tailwind = require('../src/tailwind-config.json')
   tailwind.screens = { }
   let project = new Project(data.project)
-  let context = new Context({ project, options: { font: 'SFProText', color: 'black', tailwind: JSON.stringify(tailwind) }})
+  let context = new Context({ project, options: { font: 'SFProText', color: 'black', maxColorDistance: "50", tailwind: JSON.stringify(tailwind) }})
 
   /**
    * Runs through each sample layer and calls the function to test it

test/sample-data/layers.json

@@ -764,5 +764,33 @@
         "shadows": [],
         "textStyles": [],
         "assets": []
+    },
+    {
+        "type": "shape",
+        "name": "Layer with slightly different colour",
+        "fills": [
+            {
+                "type": "color",
+                "blendMode": "normal",
+                "fill": {
+                    "r": 255,
+                    "g": 255,
+                    "b": 1,
+                    "a": 1
+                },
+                "color": {
+                    "r": 255,
+                    "g": 255,
+                    "b": 1,
+                    "a": 1
+                }
+            }
+        ],
+        "opacity": 1,
+        "rect": {},
+        "borders": [],
+        "shadows": [],
+        "textStyles": [],
+        "assets": []
     }
 ]

test/styleguideTextStyles.test.js

@@ -15,7 +15,8 @@ test('exports Tailwind components for text styles', () => {
     project,
     options: {
       font: 'Ubuntu',
-      color: 'black'
+      color: 'black',
+      maxColorDistance: "50",
     }
   })
 
@@ -52,6 +53,7 @@ test('reads the Tailwing config for things', () => {
     options: {
       font: 'Ubuntu',
       color: 'black',
+      maxColorDistance: "50",
       tailwind: JSON.stringify(tailwind)
     }
   })

yarn.lock

@@ -4349,6 +4349,10 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
+nearest-color@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/nearest-color/-/nearest-color-0.4.2.tgz#6ebd3a859969e76dd834e609beeecef73c3881e0"
+
 needle@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.0.tgz#f14efc69cee1024b72c8b21c7bdf94a731dc12fa"
@@ -5339,6 +5343,10 @@ retry@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
 
+rgb-hex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-2.1.0.tgz#c773c5fe2268a25578d92539a82a7a5ce53beda6"
+
 rgb-regex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"