fix: border opacity for rgba values

rajasegar · Jun 6, 2021 · 15dcb9a · 15dcb9a
1 parent f67aacf
commit 15dcb9a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/src/border-utils.js b/src/border-utils.js
@@ -2,19 +2,44 @@
 
 const TAILWIND_CLASSES = require('./constants');
 
+const chroma = require('chroma-js');
 const getColorUtils = require('./color-utils');
 
+// Get the nearest matching Tailwind value
+function getProximateKey(valueHash, value) {
+  const values = Object.keys(valueHash);
+
+  let distance = Math.abs(values[0] - value);
+  let idx = 0;
+  for (let c = 1; c < values.length; c++) {
+    const cdistance = Math.abs(values[c] - value);
+    if (cdistance < distance) {
+      idx = c;
+      distance = cdistance;
+    }
+  }
+  return values[idx];
+}
+
 function getBorderUtils(decl) {
   const [width, style, color] = decl.value.split(' ');
 
   const borderWidth = TAILWIND_CLASSES['border-width'];
   const borderStyle = TAILWIND_CLASSES['border-style'];
   const borderColor = TAILWIND_CLASSES['border-color'];
+  const borderOpacity = TAILWIND_CLASSES['border-opacity'];
 
   const _width = borderWidth[width] || 'border';
   const _style = borderStyle[style] || '';
-  const _color = borderColor[color] || getColorUtils(decl, 'border');
-  return _width + ' ' + _style + ' ' + _color;
+  const _color = borderColor[color] || getColorUtils(decl);
+  let result = _width + ' ' + _style + ' ' + _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;
diff --git a/src/constants.js b/src/constants.js
@@ -1014,6 +1014,24 @@ const TAILWIND_CLASSES = {
     '6rem': 'text-8xl',
     '8rem': 'text-9xl',
   },
+
+  'border-opacity': {
+    0: 'border-opacity-0',
+    0.05: 'border-opacity-5',
+    0.1: 'border-opacity-10',
+    0.2: 'border-opacity-20',
+    0.25: 'border-opacity-25',
+    0.3: 'border-opacity-30',
+    0.4: 'border-opacity-40',
+    0.5: 'border-opacity-50',
+    0.6: 'border-opacity-60',
+    0.7: 'border-opacity-70',
+    0.75: 'border-opacity-75',
+    0.8: 'border-opacity-80',
+    0.9: 'border-opacity-90',
+    0.95: 'border-opacity-95',
+    1: 'border-opacity-100',
+  },
 };
 
 module.exports = TAILWIND_CLASSES;
diff --git a/test/test.js b/test/test.js
@@ -158,6 +158,15 @@ describe('Border utils', () => {
     const output = getBorderUtils(decl);
     assert.equal(output, 'border  border-black');
   });
+
+  it('should return nearest tailwind class for rgba', () => {
+    const decl = { prop: 'border', value: '1px solid rgba(0,0,0,.125)' };
+    const output = getBorderUtils(decl);
+    assert.equal(
+      output,
+      'border border-solid border-gray-900 border-opacity-10'
+    );
+  });
 });
 
 describe('Color utils', () => {