feat: add border-color util

package.json

@@ -7,7 +7,8 @@
     "test": "mocha",
     "coverage": "nyc --reporter=lcov --reporter=text-summary npm run test",
     "lint": "eslint .",
-    "deploy": "git push && git push --tags && npm publish"
+    "deploy": "git push && git push --tags && npm publish",
+    "debug": "node --inspect-brk ./node_modules/mocha/bin/mocha"
   },
   "repository": {
     "type": "git",

src/border-utils.js

@@ -26,7 +26,6 @@ function getBorderUtils(decl) {
   if (decl.value === 'transparent') return '';
   if (decl.value === '0') return 'border-0';
   const borderValues = decl.value.split(' ');
-  debugger;
   if (borderValues.length > 2) {
     const [width, style, ...colorValue] = borderValues;
     const color = colorValue.join('');
@@ -50,4 +49,26 @@ function getBorderUtils(decl) {
   } else return '';
 }
 
-module.exports = getBorderUtils;
+function getBorderColorUtils(decl) {
+  if (decl.value === 'currentColor') return 'border-current';
+  if (decl.value === 'transparent') return 'border-transparent';
+
+  const borderColor = TAILWIND_CLASSES['border-color'];
+  const borderOpacity = TAILWIND_CLASSES['border-opacity'];
+
+  const color = decl.value;
+  const _color = borderColor[color] || getColorUtils(decl);
+  let result = _color;
+  if (color.includes('rgba')) {
+    const [, , , opacity] = chroma(color)._rgb;
+    const proximateKey = getProximateKey(borderOpacity, opacity);
+    const _opacity = borderOpacity[opacity] || borderOpacity[proximateKey];
+    result += ' ' + _opacity;
+  }
+  return result;
+}
+
+module.exports = {
+  getBorderUtils,
+  getBorderColorUtils,
+};

src/color-utils.js

@@ -51,6 +51,7 @@ function getColorUtils(decl) {
           'background-color': `bg-${_c}-${s}`,
           color: `text-${_c}-${s}`,
           border: `border-${_c}-${s}`,
+          'border-color': `border-${_c}-${s}`,
           hex: shades[s],
         };
       });

src/tailwind-utils.js

@@ -3,7 +3,7 @@
 const TAILWIND_CLASSES = require('./constants');
 const { getSpacingUtils, getBorderRadiusUtils } = require('./spacing-utils');
 
-const getBorderUtils = require('./border-utils');
+const { getBorderUtils, getBorderColorUtils } = require('./border-utils');
 const getColorUtils = require('./color-utils');
 
 const spacingProps = [
@@ -37,6 +37,8 @@ function getTailwindUtils(decl) {
     if (decl.value !== 'inherit' && !decl.value.includes('var')) {
       return getColorUtils(decl);
     } else return '';
+  } else if (decl.prop === 'border-color') {
+    return getBorderColorUtils(decl);
   } else {
     // remove !important from values
     let val = decl.value.replace(' !important', '');

test/test.js

@@ -6,7 +6,7 @@ const {
   getBorderRadiusUtils,
 } = require('../src/spacing-utils');
 
-const getBorderUtils = require('../src/border-utils');
+const { getBorderUtils } = require('../src/border-utils');
 const getColorUtils = require('../src/color-utils');
 const getTailwindUtils = require('../src/tailwind-utils');
 
@@ -306,4 +306,34 @@ describe('Tailwind utils', () => {
     const output = getTailwindUtils(decl);
     assert.equal(output, '');
   });
+
+  it('should return nearest value for border-color', () => {
+    const decl = { prop: 'border-color', value: '#12344d' };
+    const output = getTailwindUtils(decl);
+    assert.equal(output, 'border-gray-800');
+  });
+
+  it('should return nearest value for border-color rgb', () => {
+    const decl = { prop: 'border-color', value: 'rgb(255, 0, 0)' };
+    const output = getTailwindUtils(decl);
+    assert.equal(output, 'border-red-600');
+  });
+
+  it('should return nearest value for border-color rgba', () => {
+    const decl = { prop: 'border-color', value: 'rgba(0, 0, 0, 0.125)' };
+    const output = getTailwindUtils(decl);
+    assert.equal(output, 'border-gray-900 border-opacity-10');
+  });
+
+  it('should return tailwind class for border-color currentColor', () => {
+    const decl = { prop: 'border-color', value: 'currentColor' };
+    const output = getTailwindUtils(decl);
+    assert.equal(output, 'border-current');
+  });
+
+  it('should return tailwind class for border-color transparent', () => {
+    const decl = { prop: 'border-color', value: 'transparent' };
+    const output = getTailwindUtils(decl);
+    assert.equal(output, 'border-transparent');
+  });
 });