Merge pull request #582 from ben-rogerson/bugfix/tweak-styled-import-…

…styled-components-preset
ben-rogerson · Dec 6, 2021 · 4d7e207 · 4d7e207
2 parents d1a7659 + df64f6f
commit 4d7e207
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 18 deletions.
diff --git a/__fixtures__/autoCssProp/config.json b/__fixtures__/autoCssProp/config.json
diff --git a/__fixtures__/cssPropEmotion/autoCssProp.js b/__fixtures__/cssPropEmotion/autoCssProp.js
@@ -0,0 +1,4 @@
+import './macro' // twinImport
+
+;<div css="" />
+;<div className="" />
diff --git a/__fixtures__/cssPropEmotion/autoCssPropWithStyled.js b/__fixtures__/cssPropEmotion/autoCssPropWithStyled.js
@@ -0,0 +1,8 @@
+import tw from './macro' // twinImport
+
+// Css prop isn't handled by twin
+tw.div`block`
+;<div tw="block" />
+
+const Test = tw.div``
+;<Test tw="block" />
diff --git a/__fixtures__/cssPropStyledComponents/autoCssProp.js b/__fixtures__/cssPropStyledComponents/autoCssProp.js
@@ -0,0 +1,4 @@
+import './macro' // twinImport
+
+;<div css="" />
+;<div className="" />
diff --git a/...es__/autoCssProp/autoCssPropWithStyled.js → ...StyledComponents/autoCssPropWithStyled.js b/...es__/autoCssProp/autoCssPropWithStyled.js → ...StyledComponents/autoCssPropWithStyled.js
@@ -2,3 +2,6 @@ import tw from './macro' // twinImport
 
 tw.div`block`
 ;<div tw="block" />
+
+const Test = tw.div``
+;<Test tw="block" />
diff --git a/__fixtures__/cssPropStyledComponents/config.json b/__fixtures__/cssPropStyledComponents/config.json
@@ -0,0 +1,4 @@
+{
+  "preset": "styled-components",
+  "autoCssProp": false
+}
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -3714,9 +3714,39 @@ exports[`twin.macro autoCssProp.js: autoCssProp.js 1`] = `
 
 import './macro' // twinImport
 
-    // Css prop isn't handled by twin
-    ; <div css="" />
-    ; <div className="" />
+// Css prop isn't handled by twin
+;<div css="" />
+;<div className="" />
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+;<div css="" />
+;<div className="" />
+
+
+`;
+
+exports[`twin.macro autoCssProp.js: autoCssProp.js 2`] = `
+
+import './macro' // twinImport
+
+;<div css="" />
+;<div className="" />
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+;<div css="" />
+;<div className="" />
+
+
+`;
+
+exports[`twin.macro autoCssProp.js: autoCssProp.js 3`] = `
+
+import './macro' // twinImport
+
+;<div css="" />
+;<div className="" />
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
@@ -3730,30 +3760,72 @@ exports[`twin.macro autoCssPropWithStyled.js: autoCssPropWithStyled.js 1`] = `
 
 import tw from './macro' // twinImport
 
+// Css prop isn't handled by twin
 tw.div\`block\`
 ;<div tw="block" />
 
+const Test = tw.div\`\`
+;<Test tw="block" />
+
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import _styled3 from 'styled-components'
-import _styled2 from 'styled-components'
+import _styled from '@emotion/styled'
 
 // twinImport
-_styled2.div.withConfig({
-  displayName: 'plugintest',
-  componentId: 'sc-16ats9e-0',
-})({
+// Css prop isn't handled by twin
+_styled.div({
   display: 'block',
 })
 
-var _StyledDiv = _styled2('div').withConfig({
-  displayName: 'plugintest___StyledDiv',
-  componentId: 'sc-16ats9e-1',
-})({
+;<div
+  css={{
+    display: 'block',
+  }}
+/>
+
+const Test = _styled.div({})
+
+;<Test
+  css={{
+    display: 'block',
+  }}
+/>
+
+
+`;
+
+exports[`twin.macro autoCssPropWithStyled.js: autoCssPropWithStyled.js 2`] = `
+
+import tw from './macro' // twinImport
+
+tw.div\`block\`
+;<div tw="block" />
+
+const Test = tw.div\`\`
+;<Test tw="block" />
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from 'styled-components'
+
+// twinImport
+_styled.div({
   display: 'block',
 })
 
-;<_StyledDiv />
+;<div
+  css={{
+    display: 'block',
+  }}
+/>
+
+const Test = _styled.div({})
+
+;<Test
+  css={{
+    display: 'block',
+  }}
+/>
 
 
 `;

diff --git a/src/config/userPresets.js b/src/config/userPresets.js
@@ -20,7 +20,7 @@ export default {
   'styled-components': {
     styled: {
       import: 'default',
-      from: 'styled-components/macro',
+      from: 'styled-components',
     },
     css: {
       import: 'css',