Improve styled components build

related docs:
- jaredpalmer/tsdx#543
- jaredpalmer/tsdx#383
- https://styled-components.com/docs/tooling#babel-macro

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "10"
+        }
+      }
+    ]
+  ],
+  "plugins": [["macros"]]
+}

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  globals: {
+    'ts-jest': {
+      babelConfig: '.babelrc',
+    },
+  },
+};

package.json

@@ -80,6 +80,7 @@
     "@types/styled-components": "^5.1.4",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
+    "babel-plugin-macros": "^3.0.1",
     "chromatic": "^5.6.3",
     "cross-var": "^1.1.0",
     "dotenv-cli": "^4.0.0",
@@ -99,6 +100,7 @@
     "registry": "https://npm.pkg.github.com/"
   },
   "dependencies": {
+    "jest-styled-components": "^7.0.3",
     "polished": "^4.1.1",
     "styled-components": "^5.2.1"
   }

src/atoms/avatar/__tests__/__snapshots__/avatar.test.tsx.snap

@@ -2,9 +2,18 @@
 
 exports[`Avatar renders 1`] = `
 <DocumentFragment>
-  <img
+  .c0 {
+  border: 1px solid hsl(0,0%,16%);
+  border-radius: 999px;
+  width: 1.875rem;
+  height: 1.875rem;
+  object-fit: cover;
+  overflow: hidden;
+}
+
+<img
     alt="avatar alt"
-    class="sc-bdfBwQ eWkXDZ tk-avatar"
+    class="c0 tk-avatar"
     src="/dummy.png"
   />
 </DocumentFragment>

src/atoms/avatar/__tests__/avatar.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
 import { Avatar } from '../../..';
 
 describe('Avatar', () => {

src/atoms/avatar/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { colors } from '../../ions/variables';
 import { rem } from 'polished';
 

src/atoms/button-link/__tests__/__snapshots__/button-link.test.tsx.snap

@@ -2,8 +2,79 @@
 
 exports[`Button Link renders 1`] = `
 <DocumentFragment>
-  <a
-    class="sc-dlfnbm XqwaY button button-link"
+  .c0 {
+  --button: hsl(186,62%,59%);
+  --txt: hsl(0,0%,100%);
+  --hover: #2ba8b6;
+  --button: hsl(186,62%,59%);
+  --hover: #2798a5;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--button);
+  border-radius: 999px;
+  background-color: var(--button);
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0;
+  text-transform: uppercase;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  cursor: pointer;
+}
+
+.c0:hover {
+  background-color: var(--hover);
+}
+
+.c0 > *:not(:last-child) {
+  margin-right: 5px;
+}
+
+.c0 span {
+  position: relative;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--txt);
+  pointer-events: none;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+
+.c0 svg {
+  width: auto;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  fill: var(--txt);
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+@media (min-width:1280px) {
+  .c0 {
+    min-width: 2.25rem;
+  }
+}
+
+<a
+    class="c0 button button-link"
     color="primary"
     data-event=""
     data-testid=""

src/atoms/button-link/__tests__/button-link.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ButtonLink } from '../../..';
 import userEvent from '@testing-library/user-event';
+import 'jest-styled-components';
+import { ButtonLink } from '../../..';
 
 describe('Button Link', () => {
   it('renders', () => {

src/atoms/button-link/styles.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { device } from '../../ions/breakpoints';
 import { ButtonColor, ButtonVariant } from '../button/types';
 import { colors, fontWeigth } from '../../ions/variables';

src/atoms/button/styles.tsx

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components/macro';
 import { device } from '../../ions/breakpoints';
 import { ButtonColor, ButtonVariant } from './types';
 import { colors, fontWeigth } from '../../ions/variables';

src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap

@@ -2,23 +2,109 @@
 
 exports[`Checkbox renders 1`] = `
 <DocumentFragment>
-  <label
-    class="sc-hKgILt erWgsR checkbox"
+  .c0 {
+  display: inline-block;
+  position: relative;
+  height: 1.5rem;
+  padding-left: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c0:hover input:not(:disabled) ~ span {
+  border-color: hsl(0,0%,48%);
+}
+
+.c1 {
+  padding-left: 1.875rem;
+  line-height: 1.5rem;
+  vertical-align: middle;
+}
+
+.c2 {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c2:checked:not(:disabled) ~ span {
+  background-color: hsl(186,62%,59%);
+  border-color: #2ba8b6;
+}
+
+.c2:checked:not(:disabled) ~ span:after {
+  display: block;
+}
+
+.c2:checked:disabled ~ span {
+  background-color: #e0e0e0;
+  color: hsl(0,0%,48%);
+}
+
+.c2:checked:disabled ~ span:after {
+  display: block;
+}
+
+.c2:not(:checked):disabled ~ span {
+  background-color: hsl(0,0%,100%);
+}
+
+.c2:hover:not(:disabled):checked ~ span {
+  border-color: #2ba8b6;
+}
+
+.c3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 2px solid #e0e0e0;
+  border-radius: 100%;
+  width: 1.5rem;
+  height: 1.5rem;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+
+.c3:after {
+  content: '';
+  position: absolute;
+  display: none;
+  top: 3px;
+  left: 6px;
+  width: 5px;
+  height: 9px;
+  border: solid hsl(0,0%,100%);
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+<label
+    class="c0 checkbox"
   >
     <span
-      class="sc-eCssSg cnJCyc"
+      class="c1"
     >
       hello
     </span>
     <input
       aria-checked="true"
       checked=""
-      class="sc-jSgupP dJNPYs"
+      class="c2"
       name="check"
       type="checkbox"
     />
     <span
-      class="sc-gKsewC kuPfww"
+      class="c3"
     />
   </label>
 </DocumentFragment>

src/atoms/checkbox/__tests__/checkbox.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { Checkbox } from '../../..';
 import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+import { Checkbox } from '../../..';
 
 describe('Checkbox', () => {
   it('renders', () => {

src/atoms/checkbox/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { lighten, darken, rem } from 'polished';
 import { colors } from '../../ions/variables';
 

src/atoms/error-field/__tests__/__snapshots__/error-field.test.tsx.snap

@@ -2,8 +2,18 @@
 
 exports[`ErrorField renders 1`] = `
 <DocumentFragment>
-  <span
-    class="sc-fubCfw laRIMs error-field"
+  .c1 {
+  display: block;
+  font-size: 0.7rem;
+  color: hsl(354,83%,64%);
+}
+
+.styles__TextFieldInputStyle-sc-1jl38sp-0 + .c0 {
+  margin-top: 0.3125rem;
+}
+
+<span
+    class="c0 c1 error-field"
     color="danger"
   >
     operation failed.

src/atoms/error-field/__tests__/error-field.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
 import { ErrorField } from '../../..';
 
 describe('ErrorField', () => {

src/atoms/error-field/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { ErrorFieldColor } from './types';
 import { colors } from '../../ions/variables';
 import { rem } from 'polished';

src/atoms/icon/stories/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const List = styled.ul`
   padding: 0;

src/atoms/label/__tests__/__snapshots__/label.test.tsx.snap

@@ -2,8 +2,28 @@
 
 exports[`Label renders 1`] = `
 <DocumentFragment>
-  <label
-    class="sc-pFZIQ godpbM label"
+  .c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: hsl(0,0%,48%);
+  text-transform: uppercase;
+}
+
+.c0 svg {
+  width: auto;
+  height: 0.9375rem;
+}
+
+<label
+    class="c0 label"
   >
     Amount
   </label>

src/atoms/label/__tests__/label.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
 import { Label } from '../../..';
 
 describe('Label', () => {

src/atoms/label/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { rem } from 'polished';
 import { colors, fontWeigth } from '../../ions/variables';
 

src/atoms/spinner/styles.tsx

@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { keyframes } from 'styled-components/macro';
 import { rem } from 'polished';
 import { colors } from '../../ions/variables';