add theme import tests

ben-rogerson · Jul 22, 2020 · 2a068ff · 2a068ff
1 parent 0278cbf
commit 2a068ff
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 2 deletions.
diff --git a/__fixtures__/!imports.js b/__fixtures__/!imports.js
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react/react-in-jsx-scope */
-import tw, { styled, css } from './macro'
+import tw, { theme, styled, css } from './macro'
 
 const twPropertyTest = <div tw="text-purple-500" />
 
@@ -21,3 +21,27 @@ const styledFunctionTest = styled.div`
     background-color: purple;
   `}
 `
+
+const themeObjectPurple = (
+  <input css={css({ color: theme`colors.purple.500` })} />
+)
+
+const themeStringFont = (
+  <input
+    css={css`
+      fontfamily: ${theme`fontFamily.sans`};
+    `}
+  />
+)
+
+const themeFunctionObjectPurple = (
+  <input css={css({ color: theme('colors.black') })} />
+)
+
+const themeFunctionStringHeight = (
+  <input
+    css={css`
+      height: ${theme('height.24')};
+    `}
+  />
+)
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -363,7 +363,7 @@ exports[`twin.macro !imports.js: !imports.js 1`] = `
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react/react-in-jsx-scope */
-import tw, { styled, css } from './macro'
+import tw, { theme, styled, css } from './macro'
 
 const twPropertyTest = <div tw="text-purple-500" />
 
@@ -385,6 +385,30 @@ const styledFunctionTest = styled.div\`
   \`}
 \`
 
+const themeObjectPurple = (
+  <input css={css({ color: theme\`colors.purple.500\` })} />
+)
+
+const themeStringFont = (
+  <input
+    css={css\`
+      fontfamily: \${theme\`fontFamily.sans\`};
+    \`}
+  />
+)
+
+const themeFunctionObjectPurple = (
+  <input css={css({ color: theme('colors.black') })} />
+)
+
+const themeFunctionStringHeight = (
+  <input
+    css={css\`
+      height: \${theme('height.24')};
+    \`}
+  />
+)
+
       ↓ ↓ ↓ ↓ ↓ ↓
 
 import _styled from '@emotion/styled'
@@ -423,6 +447,34 @@ const styledFunctionTest = _styled.div\`
     background-color: purple;
   \`}
 \`
+const themeObjectPurple = (
+  <input
+    css={_css({
+      color: '#9f7aea',
+    })}
+  />
+)
+const themeStringFont = (
+  <input
+    css={_css\`
+      fontfamily: \${'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'};
+    \`}
+  />
+)
+const themeFunctionObjectPurple = (
+  <input
+    css={_css({
+      color: '#000',
+    })}
+  />
+)
+const themeFunctionStringHeight = (
+  <input
+    css={_css\`
+      height: \${'6rem'};
+    \`}
+  />
+)
 
 
 `;