feat: styled now accept strings too

z0al · Jan 1, 2021 · aeccddb · aeccddb
1 parent 3b1c9f0
commit aeccddb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/src/__tests__/__fixtures__/simple/code.js b/src/__tests__/__fixtures__/simple/code.js
@@ -1,3 +1,5 @@
 import styled from '../../../../build/module/macro';
 
 console.log(styled(['bg-white', 'selectable']));
+
+console.log(styled(`bg-white   selectable  `));
diff --git a/src/__tests__/__fixtures__/simple/output.js b/src/__tests__/__fixtures__/simple/output.js
@@ -4,9 +4,16 @@ const _styles = _StyleSheet.create({
 	_default: {
 		backgroundColor: 'white',
 	},
+	_default2: {
+		backgroundColor: 'white',
+	},
 });
 
 console.log({
 	selectable: true,
 	style: [_styles._default],
 });
+console.log({
+	selectable: true,
+	style: [_styles._default2],
+});
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -42,6 +42,6 @@ type ComputedStyle<T extends Token> = UnionToIntersection<
 >;
 
 export type Macro = <T extends TokenWithVariant>(
-	tokens: T[],
+	tokens: T[] | string,
 	variants?: VariantFlags
 ) => ComputedStyle<ExtractToken<T>>;
diff --git a/src/macro.ts b/src/macro.ts
@@ -29,7 +29,7 @@ const styledMacro: MacroHandler = ({ references, state }) => {
 		const callExpr = refPath.parent;
 
 		// Parse token argument
-		const { confident, value: tokens, deopt } = evalNode(
+		let { confident, value: tokens, deopt } = evalNode(
 			refPath.parentPath,
 			callExpr.arguments[0]
 		);
@@ -40,6 +40,10 @@ const styledMacro: MacroHandler = ({ references, state }) => {
 			);
 		}
 
+		if (typeof tokens === 'string') {
+			tokens = tokens.trim().replace(/\s+/g, ' ').split(' ');
+		}
+
 		if (!Array.isArray(tokens)) {
 			throw deopt?.buildCodeFrameError(
 				'style names must be an array of strings'