Add support for emotion-theming

Author: bartlangelaan

extract.js

@@ -205,6 +205,16 @@ function literalParser(source, opts, styles) {
 
 			return path;
 		}
+		// If this is not an object but a function returning an object, we want to parse the
+		// object that is in the body of the function. We will only parse it if the body only
+		// consist of an object and nothing else.
+		else if (path.isArrowFunctionExpression()) {
+			const body = path.get('body');
+
+			if (body) {
+				addObjectExpression(body);
+			}
+		}
 	}
 
 	function setSpecifier(id, nameSpace) {

test/emotion.js

@@ -98,4 +98,72 @@ describe('javascript tests', () => {
 
 		expect(parsed.nodes).toHaveLength(1);
 	});
+
+	it('works with css objects', () => {
+		// It should parse:
+		// - Inline objects (inside of the JSX)
+		// - Variables that are referenced inside of the JSX
+		// - Variables that are referenced as spread
+		const parsed = syntax.parse(`
+			import React from 'react';
+
+			const spreaded = {
+				width: 100,
+				padding: 40,
+			};
+			
+			const notInline = {
+				...spreaded,
+				margin: 60,
+			};
+			
+			const Component = () => (
+				<div css={{
+					...spreaded,
+					margin: 60,
+				}}>
+					some other text
+					<span css={notInline}>Hello</span>
+				</div>
+			);
+		`);
+
+		expect(parsed.nodes).toHaveLength(3);
+	});
+
+	it('works with css object functions', () => {
+		// Just like the previous test, both inline and variable styles should be parsed. It should
+		// also parse objects if they are defined in a arrow function, which is for example what is
+		// used by emotion-theming.
+		// See also:
+		// - https://github.com/gucong3000/postcss-jsx/issues/69
+		// - https://github.com/stylelint/postcss-css-in-js/issues/22
+		const parsed = syntax.parse(`
+			import React from 'react';
+
+			const spreaded = {
+				width: 100,
+				padding: 40,
+			}
+			
+			const notInline = theme => ({
+				...spreaded,
+				margin: 60,
+				color: theme.color.primary,
+			});
+			
+			const Component = () => (
+				<div css={theme => ({
+					...spreaded,
+					margin: 60,
+					color: theme.color.primary,
+				})}>
+					some other text
+					<span css={notInline}>Hello</span>
+				</div>
+			);
+		`);
+
+		expect(parsed.nodes).toHaveLength(3);
+	});
 });