Add the 'jsCustomTags' option

scripts/generate-schema.js

@@ -106,6 +106,8 @@ function optionTypeToSchemaType(optionType) {
       );
     case "path":
       return "string";
+    case "any":
+      return "object";
     default:
       throw new Error(`Unexpected optionType '${optionType}'`);
   }

src/language-js/embed.js

@@ -28,7 +28,7 @@ function embed(path, print, textToDoc, options) {
         isStyledComponents,
         isCssProp,
         isAngularComponentStyles
-      ].some(isIt => isIt(path));
+      ].some(isIt => isIt(path, options));
 
       if (isCss) {
         // Get full template literal with expressions replaced by placeholders
@@ -431,7 +431,7 @@ function getAngularComponentObjectExpressionPredicates() {
 /**
  * styled-components template literals
  */
-function isStyledComponents(path) {
+function isStyledComponents(path, options) {
   const parent = path.getParentNode();
 
   if (!parent || parent.type !== "TaggedTemplateExpression") {
@@ -440,13 +440,20 @@ function isStyledComponents(path) {
 
   const tag = parent.tag;
 
+  const customTags = options.jsCustomTags["styled-components"] || [];
+
+  function isCustomIdentifier(node) {
+    return node.type === "Identifier" && customTags.includes(node.name);
+  }
+
   switch (tag.type) {
     case "MemberExpression":
       return (
         // styled.foo``
         isStyledIdentifier(tag.object) ||
         // Component.extend``
-        isStyledExtend(tag)
+        isStyledExtend(tag) ||
+        isCustomIdentifier(tag.object)
       );
 
     case "CallExpression":
@@ -466,7 +473,7 @@ function isStyledComponents(path) {
 
     case "Identifier":
       // css``
-      return tag.name === "css";
+      return tag.name === "css" || customTags.includes(tag.name);
 
     default:
       return false;

src/language-js/options.js

@@ -24,6 +24,14 @@ module.exports = {
     ]
   },
   bracketSpacing: commonOptions.bracketSpacing,
+  jsCustomTags: {
+    since: "1.18.2",
+    category: CATEGORY_JAVASCRIPT,
+    type: "any",
+    default: {},
+    description:
+      "A map of languages and custom template literal tag names. Example: { 'styled-components': ['media'] }"
+  },
   jsxBracketSameLine: {
     since: "0.17.0",
     category: CATEGORY_JAVASCRIPT,

src/main/options-normalizer.js

@@ -148,6 +148,9 @@ function optionInfoToSchema(optionInfo, { isCLI, optionInfos }) {
     case "path":
       SchemaConstructor = vnopts.StringSchema;
       break;
+    case "any":
+      SchemaConstructor = vnopts.AnySchema;
+      break;
     default:
       throw new Error(`Unexpected type ${optionInfo.type}`);
   }

tests/template_literals/styled-components-with-custom-tags/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom-tags.js 1`] = `
+====================================options=====================================
+jsCustomTags: {"styled-components":["myCustomTag","media"]}
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const Button = styled.a\`
+/* Comment */
+	display: \${props=>props.display};
+\`;
+
+styled.div\`
+	display: \${props=>props.display};
+	border: \${props=>props.border}px;
+	margin: 10px \${props=>props.border}px ;
+\`;
+
+const EqualDivider = styled.div\`
+margin: 0.5rem;
+		padding: 1rem;
+	background: papayawhip    ;
+
+	> * {
+	flex: 1;
+
+	&:not(:first-child) {
+			\${props => props.vertical ? 'margin-top' : 'margin-left'}: 1rem;
+		}
+	}
+\`;
+
+const header = css\`
+.top-bar {background:black;
+margin: 0;
+    position: fixed;
+	top: 0;left:0;
+	width: 100%;
+    text-align: center     ;
+	padding: 15px  0  0  1em;
+		z-index: 9999;
+}
+
+.top-bar .logo {
+  height: 30px;
+  margin: auto; 
+    position: absolute;
+	left: 0;right: 0;
+
+	\${myCustomTag\`
+background-color:red;
+
+                 :after { color:red;
+
+         }
+	\`};
+
+								\${media.phone\`
+background-color:red;
+
+                 :after { color:red;
+
+         }
+	\`};
+}
+\`;
+
+=====================================output=====================================
+const Button = styled.a\`
+  /* Comment */
+  display: \${props => props.display};
+\`;
+
+styled.div\`
+  display: \${props => props.display};
+  border: \${props => props.border}px;
+  margin: 10px \${props => props.border}px;
+\`;
+
+const EqualDivider = styled.div\`
+  margin: 0.5rem;
+  padding: 1rem;
+  background: papayawhip;
+
+  > * {
+    flex: 1;
+
+    &:not(:first-child) {
+      \${props => (props.vertical ? "margin-top" : "margin-left")}: 1rem;
+    }
+  }
+\`;
+
+const header = css\`
+  .top-bar {
+    background: black;
+    margin: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    padding: 15px 0 0 1em;
+    z-index: 9999;
+  }
+
+  .top-bar .logo {
+    height: 30px;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    \${myCustomTag\`
+      background-color: red;
+
+      :after {
+        color: red;
+      }
+    \`};
+
+    \${media.phone\`
+      background-color: red;
+
+      :after {
+        color: red;
+      }
+    \`};
+  }
+\`;
+
+================================================================================
+`;

tests/template_literals/styled-components-with-custom-tags/custom-tags.js

@@ -0,0 +1,59 @@
+const Button = styled.a`
+/* Comment */
+	display: ${props=>props.display};
+`;
+
+styled.div`
+	display: ${props=>props.display};
+	border: ${props=>props.border}px;
+	margin: 10px ${props=>props.border}px ;
+`;
+
+const EqualDivider = styled.div`
+margin: 0.5rem;
+		padding: 1rem;
+	background: papayawhip    ;
+
+	> * {
+	flex: 1;
+
+	&:not(:first-child) {
+			${props => props.vertical ? 'margin-top' : 'margin-left'}: 1rem;
+		}
+	}
+`;
+
+const header = css`
+.top-bar {background:black;
+margin: 0;
+    position: fixed;
+	top: 0;left:0;
+	width: 100%;
+    text-align: center     ;
+	padding: 15px  0  0  1em;
+		z-index: 9999;
+}
+
+.top-bar .logo {
+  height: 30px;
+  margin: auto; 
+    position: absolute;
+	left: 0;right: 0;
+
+	${myCustomTag`
+background-color:red;
+
+                 :after { color:red;
+
+         }
+	`};
+
+								${media.phone`
+background-color:red;
+
+                 :after { color:red;
+
+         }
+	`};
+}
+`;

tests/template_literals/styled-components-with-custom-tags/jsfmt.spec.js

@@ -0,0 +1,5 @@
+run_spec(__dirname, ["babel", "flow", "typescript"], {
+  jsCustomTags: {
+    "styled-components": ["myCustomTag", "media"]
+  }
+});