fix(#34): styled(props => <Button {...props} />)

* Find the TemplateLiteral in the TaggedTemplateExpression * Add support for &.${antBtnClassName} {
jean343 · Nov 28, 2018 · d54461e · d54461e
1 parent dba5929
commit d54461e
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 22 deletions.
diff --git a/src/visitors/taggedTemplateExpressionVisitor.js b/src/visitors/taggedTemplateExpressionVisitor.js
@@ -2,33 +2,40 @@ import {isStyled, isHelper} from "../utils/detectors";
 import transpileLess from "./transpileLess";
 import generate from '@babel/generator';
 
-const regex = /([\s\S]*?`)([\s\S]*)(`[\s\S]*?)/;
+const regex = /`([\s\S]*)`/;
 
 export default (path, state, {types: t}) => {
     if (!(isStyled(t)(path.node.tag, state) || isHelper(t)(path.node.tag, state))) {
         return;
     }
-    if (path.isClean) return;
 
-    let rawSource = path.getSource();
-    if (!rawSource) {
-        const {code} = generate({
-            type: 'Program',
-            body: [path.node]
-        });
-        rawSource = code;
-    }
+    // Find the TemplateLiteral in the TaggedTemplateExpression
+    path.traverse({
+        TemplateLiteral(p) {
+            if (p.isClean) return;
+            p.stop(); // Only traverse the first TemplateLiteral of TaggedTemplateExpression
 
-    const [foo, prefix, source, suffix] = regex.exec(rawSource);
-    if (!source) return;
-    path.isClean = true;
+            let rawSource = p.getSource();
+            if (!rawSource) {
+                const {code} = generate({
+                    type: 'Program',
+                    body: [path.node]
+                });
+                rawSource = code;
+            }
 
-    try {
-        const raw = transpileLess(source, state.file.opts.filename, state.opts);
-        if (source !== raw) {
-            path.replaceWithSourceString(prefix + raw + suffix);
-        }
-    } catch (e) {
-        console.error("Error converting the less syntax for the file:", state.file.opts.filename, rawSource, e);
-    }
+            const [foo, source] = regex.exec(rawSource);
+            if (!source) return;
+            p.isClean = true;
+
+            try {
+                const raw = transpileLess(source, state.file.opts.filename, state.opts);
+                if (source !== raw) {
+                    p.replaceWithSourceString('`' + raw + '`');
+                }
+            } catch (e) {
+                console.error("Error converting the less syntax for the file:", state.file.opts.filename, rawSource, e);
+            }
+        },
+    });
 }
diff --git a/src/visitors/utils.js b/src/visitors/utils.js
@@ -95,14 +95,20 @@ export const nodeParse = less => ({
     get: () => lastSelf,
     set: self => {
         lastSelf = self;
+        const $re = (parserInput, tok) => {
+            parserInput.save();
+            const ret = parserInput.$re(tok);
+            parserInput.restore();
+            return ret;
+        };
         const parseJS = (orig, treeConstructor, isDeclaration) => {
             const val = orig();
             if (val)
                 return val;
 
             let name;
             self.parserInput.save();
-            if (self.parserInput.currentChar() === '$' && (name = consumeBrackets(self.parserInput))) {
+            if ($re(self.parserInput, /^\.?\$/) && (name = consumeBrackets(self.parserInput))) {
                 // Makes the assumption that all nested code blocks have css in them, or ends with a ;.
                 if (isDeclaration && !name.includes("css")) {
                     self.parserInput.save();

diff --git a/test/Component/Variable.test.js b/test/Component/Variable.test.js
@@ -55,4 +55,36 @@ test('Nested variables', () => {
 	`;
     expect(renderer.create(<Div/>).toJSON()).toMatchSnapshot();
     expect(renderer.create(<Div font-family3="Arial"/>).toJSON()).toMatchSnapshot();
+});
+
+test('#34', () => {
+    const Link = styled.div``;
+    const antBtnClassName = "ant-btn";
+    const size = {xlarge: "3.2rem"};
+    const AntButton = styled(Link)`
+      fluid: @fluid;
+      &.${antBtnClassName} {
+        font-size: ${size.xlarge};
+        font-weight: 700;
+        width: 40px;
+        text-decoration: none;
+        padding: @padding;
+
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+          background: none;
+          border-color: transparent;
+        }
+      }
+    `;
+    const Div = styled(({fluid, ...rest}) => <AntButton {...rest} />)`
+      && {
+        width: if(@fluid, 100%, auto);
+      }
+    `;
+    expect(renderer.create(<Div/>).toJSON()).toMatchSnapshot();
+    expect(renderer.create(<Div fluid padding="1rem"/>).toJSON()).toMatchSnapshot();
 });
diff --git a/test/Component/__snapshots__/Variable.test.js.snap b/test/Component/__snapshots__/Variable.test.js.snap
@@ -30,6 +30,61 @@ exports[`#32, Fail to escape variable with string and variable from import 2`] =
 />
 `;
 
+exports[`#34 1`] = `
+.c1.ant-btn {
+  font-size: 3.2rem;
+  font-weight: 700;
+  width: 40px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1.ant-btn,
+.c1.ant-btn:hover,
+.c1.ant-btn:focus,
+.c1.ant-btn:active,
+.c1.ant-btn.active {
+  background: none;
+  border-color: transparent;
+}
+
+.c0.c0 {
+  width: auto;
+}
+
+<div
+  className="c0 c1 "
+/>
+`;
+
+exports[`#34 2`] = `
+.c1.ant-btn {
+  font-size: 3.2rem;
+  font-weight: 700;
+  width: 40px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 1rem;
+}
+
+.c1.ant-btn,
+.c1.ant-btn:hover,
+.c1.ant-btn:focus,
+.c1.ant-btn:active,
+.c1.ant-btn.active {
+  background: none;
+  border-color: transparent;
+}
+
+.c0.c0 {
+  width: 100%;
+}
+
+<div
+  className="c0 c1 "
+/>
+`;
+
 exports[`Nested variables 1`] = `
 .c0 {
   font-family: "root","Monospaced","Number","Third";