Repository: styled-components/babel-plugin-styled-components
Pull request #266 (2020-01-24 05:13:21)

emit styled('tag') instead of styled.tag for css prop
this handles if the given tag is not in the dom elements whitelist yet in styled-components proper

fixes https://github.com/styled-components/styled-components/pull/2965#issuecomment-574537642

probablyup: Going to merge this for the moment - I don't think we should touch the existing tag checking code since it seems to be working fine

Patch:
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
index b031456..fb6deb0 100644
--- a/src/visitors/transpileCssProp.js
+++ b/src/visitors/transpileCssProp.js
@@ -49,7 +49,7 @@ export default t => (path, state) => {
   let injector
 
   if (TAG_NAME_REGEXP.test(name)) {
-    styled = t.memberExpression(importName, t.identifier(name))
+    styled = t.callExpression(importName, [t.stringLiteral(name)])
   } else {
     styled = t.callExpression(importName, [t.identifier(name)])
 


Test patch:
diff --git a/test/fixtures/transpile-css-prop-add-import/output.js b/test/fixtures/transpile-css-prop-add-import/output.js
index c4655dd..96ed17d 100644
--- a/test/fixtures/transpile-css-prop-add-import/output.js
+++ b/test/fixtures/transpile-css-prop-add-import/output.js
@@ -27,7 +27,7 @@ function _templateObject() {
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _StyledDiv = _styledComponents["default"].div(_templateObject());
+var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject());
 
 var _default = function _default() {
   return <_StyledDiv>
diff --git a/test/fixtures/transpile-css-prop-add-require/output.js b/test/fixtures/transpile-css-prop-add-require/output.js
index e00d2bd..49480fc 100644
--- a/test/fixtures/transpile-css-prop-add-require/output.js
+++ b/test/fixtures/transpile-css-prop-add-require/output.js
@@ -23,7 +23,7 @@ function _templateObject() {
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _StyledDiv = _styledComponents["default"].div(_templateObject());
+var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject());
 
 var _default = function _default() {
   return <_StyledDiv />;
diff --git a/test/fixtures/transpile-css-prop-all-options-on/output.js b/test/fixtures/transpile-css-prop-all-options-on/output.js
index ae5645f..ff9eaa8 100644
--- a/test/fixtures/transpile-css-prop-all-options-on/output.js
+++ b/test/fixtures/transpile-css-prop-all-options-on/output.js
@@ -31,7 +31,7 @@ var Thing2 = (0, _styledComponents["default"])(Thing).withConfig({
  * Basic fixtures
  */
 
-var _StyledP = _styledComponents["default"].p.withConfig({
+var _StyledP = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP",
   componentId: "sc-7evkve-3"
 })(["flex:1;"]);
@@ -40,7 +40,7 @@ var StaticString = function StaticString(p) {
   return <_StyledP>A</_StyledP>;
 };
 
-var _StyledP2 = _styledComponents["default"].p.withConfig({
+var _StyledP2 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP2",
   componentId: "sc-7evkve-4"
 })(["flex:1;"]);
@@ -51,7 +51,7 @@ var StaticTemplate = function StaticTemplate(p) {
   </_StyledP2>;
 };
 
-var _StyledP3 = _styledComponents["default"].p.withConfig({
+var _StyledP3 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP3",
   componentId: "sc-7evkve-5"
 })({
@@ -62,7 +62,7 @@ var ObjectProp = function ObjectProp(p) {
   return <_StyledP3>A</_StyledP3>;
 };
 
-var _StyledP4 = _styledComponents["default"].p.withConfig({
+var _StyledP4 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP4",
   componentId: "sc-7evkve-6"
 })(["flex:1;"]);
@@ -71,7 +71,7 @@ var NoChildren = function NoChildren(p) {
   return <_StyledP4 />;
 };
 
-var _StyledP5 = _styledComponents["default"].p.withConfig({
+var _StyledP5 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP5",
   componentId: "sc-7evkve-7"
 })(["color:blue;"]);
@@ -95,7 +95,7 @@ var CustomComp = function CustomComp(p) {
   return <_StyledParagraph>H</_StyledParagraph>;
 };
 
-var _StyledP6 = _styledComponents["default"].p.withConfig({
+var _StyledP6 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP6",
   componentId: "sc-7evkve-9"
 })(["", ""], function (p) {
@@ -106,7 +106,7 @@ var DynamicProp = function DynamicProp(p) {
   return <_StyledP6 _css={props.cssText}>H</_StyledP6>;
 };
 
-var _StyledP7 = _styledComponents["default"].p.withConfig({
+var _StyledP7 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP7",
   componentId: "sc-7evkve-10"
 })(["background:", ";"], function (p) {
@@ -119,7 +119,7 @@ var LocalInterpolation = function LocalInterpolation(p) {
   </_StyledP7>;
 };
 
-var _StyledP8 = _styledComponents["default"].p.withConfig({
+var _StyledP8 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP8",
   componentId: "sc-7evkve-11"
 })(["color:", ";"], function (props) {
@@ -134,7 +134,7 @@ var FuncInterpolation = function FuncInterpolation(p) {
 
 var radius = 10;
 
-var _StyledP9 = _styledComponents["default"].p.withConfig({
+var _StyledP9 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP9",
   componentId: "sc-7evkve-12"
 })(["border-radius:", "px;"], radius);
@@ -145,7 +145,7 @@ var GlobalInterpolation = function GlobalInterpolation(p) {
   </_StyledP9>;
 };
 
-var _StyledP10 = _styledComponents["default"].p.withConfig({
+var _StyledP10 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP10",
   componentId: "sc-7evkve-13"
 })(["color:", ";"], function (p) {
@@ -158,7 +158,7 @@ var LocalCssHelperProp = function LocalCssHelperProp(p) {
   </_StyledP10>;
 };
 
-var _StyledP11 = _styledComponents["default"].p.withConfig({
+var _StyledP11 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP11",
   componentId: "sc-7evkve-14"
 })(["color:", ";"], function (props) {
@@ -198,7 +198,7 @@ var CustomCompWithDotLowerCase = function CustomCompWithDotLowerCase(p) {
   return <_StyledButtonGhost2>H</_StyledButtonGhost2>;
 };
 
-var _StyledButtonGhost3 = _styledComponents["default"]["button-ghost"].withConfig({
+var _StyledButtonGhost3 = (0, _styledComponents["default"])("button-ghost").withConfig({
   displayName: "code___StyledButtonGhost3",
   componentId: "sc-7evkve-18"
 })(["flex:1"]);
@@ -213,7 +213,7 @@ var getAfterValue = function getAfterValue() {
   return '"bar"';
 };
 
-var _StyledP12 = _styledComponents["default"].p.withConfig({
+var _StyledP12 = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP12",
   componentId: "sc-7evkve-19"
 })(function (p) {
diff --git a/test/fixtures/transpile-css-prop/output.js b/test/fixtures/transpile-css-prop/output.js
index 6fab70d..49a2741 100644
--- a/test/fixtures/transpile-css-prop/output.js
+++ b/test/fixtures/transpile-css-prop/output.js
@@ -176,7 +176,7 @@ function _templateObject() {
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _StyledP = _styledComponents["default"].p(_templateObject());
+var _StyledP = (0, _styledComponents["default"])("p")(_templateObject());
 
 /*
  * Basic fixtures
@@ -185,7 +185,7 @@ var StaticString = function StaticString(p) {
   return <_StyledP>A</_StyledP>;
 };
 
-var _StyledP2 = _styledComponents["default"].p(_templateObject2());
+var _StyledP2 = (0, _styledComponents["default"])("p")(_templateObject2());
 
 var StaticTemplate = function StaticTemplate(p) {
   return <_StyledP2>
@@ -193,7 +193,7 @@ var StaticTemplate = function StaticTemplate(p) {
   </_StyledP2>;
 };
 
-var _StyledP3 = _styledComponents["default"].p({
+var _StyledP3 = (0, _styledComponents["default"])("p")({
   color: 'blue'
 });
 
@@ -201,13 +201,13 @@ var ObjectProp = function ObjectProp(p) {
   return <_StyledP3>A</_StyledP3>;
 };
 
-var _StyledP4 = _styledComponents["default"].p(_templateObject3());
+var _StyledP4 = (0, _styledComponents["default"])("p")(_templateObject3());
 
 var NoChildren = function NoChildren(p) {
   return <_StyledP4 />;
 };
 
-var _StyledP5 = _styledComponents["default"].p(_templateObject4());
+var _StyledP5 = (0, _styledComponents["default"])("p")(_templateObject4());
 
 var CssHelperProp = function CssHelperProp(p) {
   return <_StyledP5>
@@ -225,7 +225,7 @@ var CustomComp = function CustomComp(p) {
   return <_StyledParagraph>H</_StyledParagraph>;
 };
 
-var _StyledP6 = _styledComponents["default"].p(_templateObject6(), function (p) {
+var _StyledP6 = (0, _styledComponents["default"])("p")(_templateObject6(), function (p) {
   return p._css;
 });
 
@@ -233,7 +233,7 @@ var DynamicProp = function DynamicProp(p) {
   return <_StyledP6 _css={props.cssText}>H</_StyledP6>;
 };
 
-var _StyledP7 = _styledComponents["default"].p(_templateObject7(), function (p) {
+var _StyledP7 = (0, _styledComponents["default"])("p")(_templateObject7(), function (p) {
   return p._css2;
 });
 
@@ -243,7 +243,7 @@ var LocalInterpolation = function LocalInterpolation(p) {
   </_StyledP7>;
 };
 
-var _StyledP8 = _styledComponents["default"].p(_templateObject8(), function (props) {
+var _StyledP8 = (0, _styledComponents["default"])("p")(_templateObject8(), function (props) {
   return props.theme.a;
 });
 
@@ -255,7 +255,7 @@ var FuncInterpolation = function FuncInterpolation(p) {
 
 var radius = 10;
 
-var _StyledP9 = _styledComponents["default"].p(_templateObject9(), radius);
+var _StyledP9 = (0, _styledComponents["default"])("p")(_templateObject9(), radius);
 
 var GlobalInterpolation = function GlobalInterpolation(p) {
   return <_StyledP9>
@@ -263,7 +263,7 @@ var GlobalInterpolation = function GlobalInterpolation(p) {
   </_StyledP9>;
 };
 
-var _StyledP10 = _styledComponents["default"].p(_templateObject10(), function (p) {
+var _StyledP10 = (0, _styledComponents["default"])("p")(_templateObject10(), function (p) {
   return p._css3;
 });
 
@@ -273,7 +273,7 @@ var LocalCssHelperProp = function LocalCssHelperProp(p) {
   </_StyledP10>;
 };
 
-var _StyledP11 = _styledComponents["default"].p(_templateObject11(), function (props) {
+var _StyledP11 = (0, _styledComponents["default"])("p")(_templateObject11(), function (props) {
   return props.theme.color;
 });
 
@@ -301,7 +301,7 @@ var CustomCompWithDotLowerCase = function CustomCompWithDotLowerCase(p) {
   return <_StyledButtonGhost2>H</_StyledButtonGhost2>;
 };
 
-var _StyledButtonGhost3 = _styledComponents["default"]["button-ghost"](_templateObject15());
+var _StyledButtonGhost3 = (0, _styledComponents["default"])("button-ghost")(_templateObject15());
 
 var CustomElement = function CustomElement(p) {
   return <_StyledButtonGhost3>H</_StyledButtonGhost3>;