Add support for text and background opacity

vadimdemedes · May 17, 2020 · 210951b · 210951b
1 parent b078b80
commit 210951b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 7 deletions.
diff --git a/build.js b/build.js
@@ -72,7 +72,7 @@ const supportedUtilities = [
 	/^tracking-/,
 	// Line height
 	/^leading-\d+/,
-	// Text align, color
+	// Text align, color, opacity
 	/^text-/,
 	// Text transform
 	'uppercase',
@@ -81,6 +81,8 @@ const supportedUtilities = [
 	'normal-case',
 	// Background color
 	/^bg-(transparent|black|white|gray|red|orange|yellow|green|teal|blue|indigo|purple|pink)/,
+	// Background opacity
+	/^bg-opacity-/,
 	// Border color, style, width, radius
 	/^(border|rounded)/,
 	// Opacity

diff --git a/index.js b/index.js
@@ -1,6 +1,22 @@
 'use strict';
 const styles = require('./styles.json');
 
+// Tailwind started using CSS variables for color opacity since v1.4.0,
+// this helper adds a primitive support for these
+const useVariables = object => {
+	const newObject = {};
+
+	for (const [key, value] of Object.entries(object)) {
+		if (!key.startsWith('--')) {
+			newObject[key] = value.replace(/var\(([a-zA-Z-]+)\)/, (_, name) => {
+				return object[name];
+			});
+		}
+	}
+
+	return newObject;
+};
+
 // Pass a list of class names separated by a space, for example:
 // "bg-green-100 text-green-800 font-semibold")
 // and receive a styles object for use in React Native views
@@ -19,7 +35,7 @@ const tailwind = classNames => {
 		}
 	}
 
-	return object;
+	return useVariables(object);
 };
 
 // Pass the name of a color (e.g. "blue-500") and receive a color value (e.g. "#4399e1")

diff --git a/readme.md b/readme.md
@@ -90,12 +90,14 @@ tailwind('pt-12 items-center');
 - [Line Height](https://tailwindcss.com/docs/line-height) (only fixed line-heights)
 - [Text Align](https://tailwindcss.com/docs/text-align)
 - [Text Color](https://tailwindcss.com/docs/text-color) (all except `text-current`)
+- [Text Opacity](https://tailwindcss.com/docs/text-opacity)
 - [Text Decoration](https://tailwindcss.com/docs/text-decoration)
 - [Text Transform](https://tailwindcss.com/docs/text-transform)
 
 ### Backgrounds
 
 - [Background Color](https://tailwindcss.com/docs/background-color)
+- [Background Opacity](https://tailwindcss.com/docs/background-opacity)
 
 ### Borders
 

diff --git a/test.js b/test.js
@@ -2,22 +2,34 @@ import test from 'ava';
 import tailwind, {getColor} from '.';
 
 test('get styles for one class', t => {
-	t.deepEqual(tailwind('text-blue-500'), {color: '#4299e1'});
+	t.deepEqual(tailwind('text-blue-500'), {color: 'rgba(66, 153, 225, 1)'});
 });
 
 test('get styles for multiple classes', t => {
 	t.deepEqual(tailwind('text-blue-500 bg-blue-100'), {
-		color: '#4299e1',
-		backgroundColor: '#ebf8ff'
+		color: 'rgba(66, 153, 225, 1)',
+		backgroundColor: 'rgba(235, 248, 255, 1)'
 	});
 });
 
 test('ignore unknown classes', t => {
-	t.deepEqual(tailwind('text-blue-500 unknown'), {color: '#4299e1'});
+	t.deepEqual(tailwind('text-blue-500 unknown'), {
+		color: 'rgba(66, 153, 225, 1)'
+	});
+});
+
+test('support color opacity', t => {
+	t.deepEqual(
+		tailwind('text-blue-500 text-opacity-50 bg-blue-100 bg-opacity-50'),
+		{
+			color: 'rgba(66, 153, 225, 0.5)',
+			backgroundColor: 'rgba(235, 248, 255, 0.5)'
+		}
+	);
 });
 
 test('get color value', t => {
-	t.is(getColor('blue-500'), '#4299e1');
+	t.is(getColor('blue-500'), 'rgba(66, 153, 225, 1)');
 });
 
 test('ignore no value param', t => {