Support full customization (#43)

build.js

@@ -25,87 +25,129 @@ const getStyles = rule => {
 	return cssToReactNative(styles);
 };
 
-const supportedUtilities = [
-	// Flexbox
-	/^flex/,
-	/^items-/,
-	/^content-/,
-	/^justify-/,
-	/^self-/,
-	// Display
-	'hidden',
-	'overflow-hidden',
-	'overflow-visible',
-	'overflow-scroll',
-	// Position
-	'absolute',
-	'relative',
-	// Top, right, bottom, left
-	/^(inset-0|inset-x-0|inset-y-0)/,
-	/^(top|bottom|left|right)-0$/,
-	// Z Index
-	/^z-\d+$/,
-	// Padding
-	/^(p.?-\d+|p.?-px)/,
-	// Margin
-	/^-?(m.?-\d+|m.?-px)/,
-	// Width
-	/^w-(\d|\/)+|^w-px|^w-full/,
-	// Height
-	/^(h-\d+|h-px|h-full)/,
-	// Min/Max width/height
-	/^(min-w-|max-w-|min-h-|max-h-)/,
-	// Font size
-	/^text-/,
-	// Font style
-	/^(not-)?italic$/,
-	// Font weight
-	/^font-(hairline|thin|light|normal|medium|semibold|bold|extrabold|black)/,
-	// Letter spacing
-	/^tracking-/,
-	// Line height
-	/^leading-\d+/,
-	// Text align, color, opacity
-	/^text-/,
-	// Text transform
-	'uppercase',
-	'lowercase',
-	'capitalize',
-	'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, opacity
-	/^(border|rounded)/,
-	// Opacity
-	/^opacity-/,
-	// Pointer events
-	/^pointer-events-/
-];
-
-const isUtilitySupported = utility => {
-	// Skip utilities with `currentColor` values
-	// Skip utilities with vh units
+const unsupportedProperties = new Set([
+	'box-sizing',
+	'float',
+	'clear',
+	'object-fit',
+	'object-position',
+	'overflow-x',
+	'overflow-y',
+	'-webkit-overflow-scrolling',
+	'overscroll-behavior',
+	'overscroll-behavior-x',
+	'overscroll-behavior-y',
+	'visibility',
+	'order',
+	'grid-template-columns',
+	'grid-column',
+	'grid-column-start',
+	'grid-column-end',
+	'grid-template-rows',
+	'grid-row',
+	'grid-row-start',
+	'grid-row-end',
+	'grid-auto-flow',
+	'grid-auto-columns',
+	'grid-auto-rows',
+	'gap',
+	'column-gap',
+	'row-gap',
+	'justify-items',
+	'justify-self',
+	'place-content',
+	'place-items',
+	'place-self',
+	'font-family',
+	'list-style-type',
+	'list-style-position',
+	'text-decoration',
+	'vertical-align',
+	'white-space',
+	'word-break',
+	'background-attachment',
+	'background-clip',
+	'background-position',
+	'background-repeat',
+	'background-size',
+	'background-image',
+	'border-collapse',
+	'table-layout',
+	'box-shadow',
+	'transition-property',
+	'transition-duration',
+	'transition-timing-function',
+	'transition-delay',
+	'animation',
+	'transform',
+	'transform-origin',
+	'appearance',
+	'cursor',
+	'outline',
+	'resize',
+	'user-select',
+	'fill',
+	'stroke',
+	'stroke-width'
+]);
+
+const isUtilitySupported = (utility, rule) => {
+	// Skip utilities with pseudo-selectors
+	if (utility.includes(':')) {
+		return false;
+	}
+
+	// Skip unsupported utilities
 	if (
-		['border-current', 'text-current', 'max-h-screen', 'min-h-screen'].includes(
-			utility
-		)
+		[
+			'clearfix',
+			'antialiased',
+			'subpixel-antialiased',
+			'sr-only',
+			'not-sr-only'
+		].includes(utility) ||
+		/^(space|placeholder|from|via|to|divide)-/.test(utility) ||
+		/^-?(scale|rotate|translate|skew)-/.test(utility)
 	) {
 		return false;
 	}
 
-	for (const supportedUtility of supportedUtilities) {
-		if (typeof supportedUtility === 'string' && supportedUtility === utility) {
-			return true;
+	// Skip utilities with unsupported properties
+	for (const {property, value} of rule.declarations) {
+		if (unsupportedProperties.has(property)) {
+			return false;
 		}
 
-		if (supportedUtility instanceof RegExp && supportedUtility.test(utility)) {
-			return true;
+		if (property === 'display' && !['flex', 'none'].includes(value)) {
+			return false;
+		}
+
+		if (
+			property === 'overflow' &&
+			!['visible', 'hidden', 'scroll'].includes(value)
+		) {
+			return false;
+		}
+
+		if (property === 'position' && !['absolute', 'relative'].includes(value)) {
+			return false;
+		}
+
+		if (property === 'line-height' && !value.endsWith('rem')) {
+			return false;
+		}
+
+		if (
+			value === 'auto' ||
+			value.endsWith('vw') ||
+			value.endsWith('vh') ||
+			value === 'currentColor'
+		) {
+			return false;
 		}
 	}
 
-	return false;
+	return true;
 };
 
 module.exports = source => {
@@ -119,7 +161,7 @@ module.exports = source => {
 			for (const selector of rule.selectors) {
 				const utility = selector.replace(/^\./, '').replace('\\/', '/');
 
-				if (isUtilitySupported(utility)) {
+				if (isUtilitySupported(utility, rule)) {
 					styles[utility] = getStyles(rule);
 				}
 			}

cli.js

@@ -12,7 +12,6 @@ meow(`
 `);
 
 const source = `
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 `;