feat: Supoort prop values as variables

component-driven · Jul 30, 2020 · 16651c9 · 16651c9
1 parent 666c404
commit 16651c9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/src/util/__tests__/parseJavascript.spec.js b/src/util/__tests__/parseJavascript.spec.js
@@ -69,6 +69,33 @@ const BoldParagraph = styled(Text)({
 	`);
 });
 
+test('HTML element, object notation, variable', () => {
+	const result = parseJavaScript(
+		`
+import styled from 'styled-components';
+const SIZE = '1rem';
+const PrimaryHeading = styled.h1({
+	width: SIZE
+})
+	`,
+		'test.js'
+	);
+	expect(result).toMatchInlineSnapshot(`
+		Array [
+		  Object {
+		    "component": "h1",
+		    "filename": "test.js",
+		    "styles": Array [
+		      Object {
+		        "name": "width",
+		        "value": "SIZE",
+		      },
+		    ],
+		  },
+		]
+	`);
+});
+
 test('HTML element, object notation, value from theme', () => {
 	const result = parseJavaScript(
 		`

diff --git a/src/util/parseJavascript.js b/src/util/parseJavascript.js
@@ -46,6 +46,11 @@ function getValue(node, code, propsObjectName) {
 		return node.value;
 	}
 
+	// { width: SIZE }
+	if (node.type === 'Identifier') {
+		return node.name;
+	}
+
 	// { color: props => props.theme.colors.primary }
 	if (node.type === 'ArrowFunctionExpression' && node.params.length === 1) {
 		return getThemeToken(node.body, code, node.params[0].name);