Fix false negatives for isStandardSyntaxDeclaration

lib/rules/property-no-unknown/__tests__/index.js

@@ -226,6 +226,9 @@ testRule(rule, {
     {
       code:
         "import styled from 'styled-components';\nexport default styled.div` margin-${/* sc-custom 'left' */ rtlSwitch}: 12.5px; `;"
+    },
+    {
+      code: "const Component = styled.a`\n\t${rule}: 1;\n`"
     }
   ],
 
@@ -236,6 +239,44 @@ testRule(rule, {
       message: messages.rejected("colr"),
       line: 2,
       column: 35
+    },
+    {
+      code: "const Component = styled.a`\n\trule: 1;\n`",
+      message: messages.rejected("rule"),
+      line: 2,
+      column: 2
+    },
+    {
+      code: "const Component = styled.a`\n\trule: ${1};\n`",
+      message: messages.rejected("rule"),
+      line: 2,
+      column: 2
+    }
+  ]
+});
+
+testRule(rule, {
+  ruleName,
+  config: [true],
+  syntax: "html",
+  accept: [
+    {
+      code: '<a style="{{rule}}: 1">'
+    }
+  ],
+
+  reject: [
+    {
+      code: '<a style="rule: 1">',
+      message: messages.rejected("rule"),
+      line: 1,
+      column: 11
+    },
+    {
+      code: '<a style="rule: {{1}}">',
+      message: messages.rejected("rule"),
+      line: 1,
+      column: 11
     }
   ]
 });

lib/utils/__tests__/isStandardSyntaxUrl.test.js

@@ -107,16 +107,16 @@ describe("isStandardSyntaxUrl", () => {
     expect(isStandardSyntaxUrl("some/@url")).toBeTruthy();
   });
   it("url with less interpolation without quotes", () => {
-    expect(isStandardSyntaxUrl("@{less-variable}")).toBeTruthy();
+    expect(isStandardSyntaxUrl("@{less-variable}")).toBeFalsy();
   });
   it("url with less interpolation at the start without quotes", () => {
-    expect(isStandardSyntaxUrl("@{less-variable}/path")).toBeTruthy();
+    expect(isStandardSyntaxUrl("@{less-variable}/path")).toBeFalsy();
   });
   it("url with less interpolation in the middle without quotes", () => {
-    expect(isStandardSyntaxUrl("some/@{less-variable}/path")).toBeTruthy();
+    expect(isStandardSyntaxUrl("some/@{less-variable}/path")).toBeFalsy();
   });
   it("url with less interpolation at the end without quotes", () => {
-    expect(isStandardSyntaxUrl("some/@{less-variable}")).toBeTruthy();
+    expect(isStandardSyntaxUrl("some/@{less-variable}")).toBeFalsy();
   });
 
   it("sass interpolation at the start", () => {

lib/utils/hasTplInterpolation.js

@@ -2,11 +2,11 @@
 "use strict";
 
 /**
- * Check whether a string has template literal interpolation
+ * Check whether a string has JS template literal interpolation or HTML-like template
  *
  * @param {string} string
  * @return {boolean} If `true`, a string has template literal interpolation
  */
 module.exports = function(string /*: string*/) /*: boolean*/ {
-  return /\${.+?}/.test(string);
+  return /{.+?}/.test(string);
 };

lib/utils/isStandardSyntaxDeclaration.js

@@ -1,16 +1,24 @@
 /* @flow */
 "use strict";
 
+function isStandardSyntaxLang(lang) {
+  return (
+    lang &&
+    (lang === "css" ||
+      lang === "custom-template" ||
+      lang === "template-literal")
+  );
+}
+
 /**
  * Check whether a declaration is standard
  */
 module.exports = function(decl /*: Object*/) /*: boolean*/ {
   const prop = decl.prop;
   const parent = decl.parent;
 
-  // Declarations belong in a declaration block
-
-  if (parent.type === "root") {
+  // Declarations belong in a declaration block or standard CSS source
+  if (parent.type === "root" && !isStandardSyntaxLang(parent.source.lang)) {
     return false;
   }