fix: styledTag not used in styled output correctly (#525)

astroturfcss · Dec 3, 2019 · c3c537e · c3c537e
1 parent bf116ea
commit c3c537e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/src/features/styled-component.js b/src/features/styled-component.js
@@ -20,7 +20,7 @@ const PURE_COMMENT = '/*#__PURE__*/';
 const buildImport = template('require(FILENAME);');
 
 const buildComponent = template(
-  `styled(ELEMENTTYPE, OPTIONS, {
+  `TAG(ELEMENTTYPE, OPTIONS, {
     displayName: DISPLAYNAME,
     styles: IMPORT,
     attrs: ATTRS,
@@ -59,6 +59,7 @@ function buildStyledComponent(path, elementType, opts) {
   style.value = imports + wrapInClass(text);
 
   const runtimeNode = buildComponent({
+    TAG: pluginOptions.styledTag,
     ELEMENTTYPE: elementType,
     ATTRS: normalizeAttrs(styledAttrs),
     OPTIONS: styledOptions || t.NullLiteral(),

diff --git a/test/__file_snapshots__/loader__styled-global.js b/test/__file_snapshots__/loader__styled-global.js
@@ -1,12 +1,12 @@
 // prettier-ignore
-const FancyBox = /*#__PURE__*/styled('div', null, {
+const FancyBox = /*#__PURE__*/s('div', null, {
   displayName: "FancyBox",
   styles: require("./styled-global-FancyBox.css"),
   attrs: null,
   vars: []
 });
 
-const FancierBox = /*#__PURE__*/ styled(FancyBox, null, {
+const FancierBox = /*#__PURE__*/ s(FancyBox, null, {
   displayName: "FancierBox",
   styles: require("./styled-global-FancierBox.css"),
   attrs: null,

diff --git a/test/__file_snapshots__/loader__styled-tag.js b/test/__file_snapshots__/loader__styled-tag.js
@@ -1,14 +1,14 @@
 import s from "astroturf";
 
 // prettier-ignore
-const FancyBox = /*#__PURE__*/styled('div', null, {
+const FancyBox = /*#__PURE__*/s('div', null, {
   displayName: "FancyBox",
   styles: require("./styled-tag-FancyBox.css"),
   attrs: null,
   vars: []
 });
 
-const FancierBox = /*#__PURE__*/ styled(FancyBox, null, {
+const FancierBox = /*#__PURE__*/ s(FancyBox, null, {
   displayName: "FancierBox",
   styles: require("./styled-tag-FancierBox.css"),
   attrs: null,

diff --git a/test/__file_snapshots__/plugin__styled-global.js b/test/__file_snapshots__/plugin__styled-global.js
@@ -1,15 +1,15 @@
 // prettier-ignore
 const FancyBox =
 /*#__PURE__*/
-styled('div', null, {
+s('div', null, {
   displayName: "FancyBox",
   styles: require("./styled-global-FancyBox.css"),
   attrs: null,
   vars: []
 });
 const FancierBox =
   /*#__PURE__*/
-  styled(FancyBox, null, {
+  s(FancyBox, null, {
     displayName: "FancierBox",
     styles: require("./styled-global-FancierBox.css"),
     attrs: null,

diff --git a/test/__file_snapshots__/plugin__styled-tag.js b/test/__file_snapshots__/plugin__styled-tag.js
@@ -2,15 +2,15 @@ import s from 'astroturf'; // prettier-ignore
 
 const FancyBox =
   /*#__PURE__*/
-  styled("div", null, {
+  s("div", null, {
     displayName: "FancyBox",
     styles: require("./styled-tag-FancyBox.css"),
     attrs: null,
     vars: []
   });
 const FancierBox =
   /*#__PURE__*/
-  styled(FancyBox, null, {
+  s(FancyBox, null, {
     displayName: "FancierBox",
     styles: require("./styled-tag-FancierBox.css"),
     attrs: null,