From b47bc5e96acbcee24bd0f3677ab0a451e7734338 Mon Sep 17 00:00:00 2001
From: Bart Langelaan <langelaanbart@gmail.com>
Date: Sun, 19 Jul 2020 21:47:41 +0200
Subject: [PATCH 1/2] Add support for vue-emotion

---
 extract.js      |  7 +++++++
 test/emotion.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/extract.js b/extract.js
index 042580e..fb1911c 100644
--- a/extract.js
+++ b/extract.js
@@ -43,6 +43,13 @@ const supports = {
 	// import styled from "react-emotion";
 	'react-emotion': true,
 
+	// import styled from 'vue-emotion';
+	// Also see:
+	// - https://github.com/stylelint/stylelint/issues/4247
+	// - https://github.com/gucong3000/postcss-jsx/issues/63
+	// - https://github.com/stylelint/postcss-css-in-js/issues/22
+	'vue-emotion': true,
+
 	// import styled from 'preact-emotion'
 	'preact-emotion': true,
 
diff --git a/test/emotion.js b/test/emotion.js
index 4afc110..70a5b26 100644
--- a/test/emotion.js
+++ b/test/emotion.js
@@ -67,4 +67,35 @@ describe('javascript tests', () => {
 			});
 		});
 	});
+
+	it('works with vue-emotion', () => {
+		// Related issues:
+		// - https://github.com/stylelint/stylelint/issues/4247
+		// - https://github.com/gucong3000/postcss-jsx/issues/63
+		// - https://github.com/stylelint/postcss-css-in-js/issues/22
+		const parsed = syntax.parse(`
+			import styled from 'vue-emotion';
+			
+			const Wrapper = styled('div')\`
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+			\`;
+		`);
+
+		expect(parsed.nodes).toHaveLength(1);
+	});
+
+	it('works with @emotion/styled', () => {
+		const parsed = syntax.parse(`
+			import styled from '@emotion/styled';
+			
+			const Wrapper = styled.div\`
+				left: 0;
+			\`;
+		`);
+
+		expect(parsed.nodes).toHaveLength(1);
+	});
 });

From 48203765d5febb3ae3f9a8a775201be376858050 Mon Sep 17 00:00:00 2001
From: Bart Langelaan <langelaanbart@gmail.com>
Date: Sun, 19 Jul 2020 22:33:07 +0200
Subject: [PATCH 2/2] Add support for emotion-theming

---
 extract.js      | 10 ++++++++
 test/emotion.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+)

diff --git a/extract.js b/extract.js
index fb1911c..d14012e 100644
--- a/extract.js
+++ b/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) {
diff --git a/test/emotion.js b/test/emotion.js
index 70a5b26..532aac9 100644
--- a/test/emotion.js
+++ b/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);
+	});
 });