chore: integrate styled components macro for easy debugging (#57)

byCedric · Oct 17, 2018 · 765c927 · 765c927
1 parent f72a007
commit 765c927
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,11 @@
 		"not ie <= 11",
 		"not op_mini all"
 	],
+	"babelMacros": {
+		"styledComponents": {
+			"fileName": false
+		}
+	},
 	"commitlint": {
 		"extends": [
 			"@peakfijn/config-commitlint"

diff --git a/src/atoms/avatar/elements.js b/src/atoms/avatar/elements.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 /**
  * The avatar container "masks" the underlying image and makes it circular.

diff --git a/src/atoms/highlight/elements.js b/src/atoms/highlight/elements.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 /**
  * The highlight container groups the content using a paragraph.

diff --git a/src/molecules/user/elements.js b/src/molecules/user/elements.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 /**
  * The user container creates a vertical-directed flexbox.

diff --git a/src/pages/app/elements.js b/src/pages/app/elements.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 /**
  * The app container wraps the content and centers it both horizontally and vertically.