Add bundled support for styles in object literals

lib/getPostcssResult.js

@@ -16,7 +16,7 @@ const syntaxes /*: {
     stringify: postcss.stringify
   }
 };
-["less", "sass", "scss", "markdown", "html", "styled"].forEach(mod => {
+["less", "sass", "scss", "markdown", "html", "styled", "jsx"].forEach(mod => {
   syntaxes[mod] = importLazy("postcss-" + mod);
 });
 

lib/rules/function-whitespace-after/__tests__/index.js

@@ -61,6 +61,9 @@ testRule(rule, {
     {
       code: "a { color: color(rgb(0,0,0)\r\nlightness(50%)) };"
     },
+    {
+      code: "@import url(example.css) screen;"
+    },
     {
       code: "$list: (value, value2);$thingTwo: 0px",
       description: "Sass list ignored"
@@ -91,6 +94,12 @@ testRule(rule, {
       message: messages.expected,
       line: 1,
       column: 28
+    },
+    {
+      code: "@import url(example.css)screen;",
+      message: messages.expected,
+      line: 1,
+      column: 25
     }
   ]
 });
@@ -225,3 +234,26 @@ testRule(rule, {
     }
   ]
 });
+
+testRule(rule, {
+  ruleName,
+  config: ["always"],
+  skipBasicChecks: true,
+  syntax: "jsx",
+
+  accept: [
+    {
+      code: "export default <img style={{ transform: 'translate(1, 1)' }} />;"
+    }
+  ],
+
+  reject: [
+    {
+      code:
+        "export default <img style={{ ['transform']: 'translate(1, 1)scale(3)' }} />;",
+      message: messages.expected,
+      line: 1,
+      column: 60
+    }
+  ]
+});

lib/rules/function-whitespace-after/index.js

@@ -1,5 +1,8 @@
 "use strict";
 
+const _ = require("lodash");
+const atRuleParamIndex = require("../../utils/atRuleParamIndex");
+const declarationValueIndex = require("../../utils/declarationValueIndex");
 const isWhitespace = require("../../utils/isWhitespace");
 const report = require("../../utils/report");
 const ruleMessages = require("../../utils/ruleMessages");
@@ -32,23 +35,21 @@ const rule = function(expectation) {
       return;
     }
 
-    root.walkDecls(decl => {
-      const declString = decl.toString();
-
+    function check(node, value, getIndex) {
       styleSearch(
         {
-          source: declString,
+          source: value,
           target: ")",
           functionArguments: "only"
         },
         match => {
-          checkClosingParen(declString, match.startIndex, decl);
+          checkClosingParen(value, match.startIndex + 1, node, getIndex);
         }
       );
-    });
+    }
 
-    function checkClosingParen(source, index, node) {
-      const nextChar = source[index + 1];
+    function checkClosingParen(source, index, node, getIndex) {
+      const nextChar = source[index];
       if (expectation === "always") {
         // Allow for the next character to be a single empty space,
         // another closing parenthesis, a comma, or the end of the value
@@ -58,7 +59,7 @@ const rule = function(expectation) {
         if (nextChar === "\n") {
           return;
         }
-        if (source.substr(index + 1, 2) === "\r\n") {
+        if (source.substr(index, 2) === "\r\n") {
           return;
         }
         if (ACCEPTABLE_AFTER_CLOSING_PAREN.has(nextChar)) {
@@ -67,7 +68,7 @@ const rule = function(expectation) {
         report({
           message: messages.expected,
           node,
-          index: index + 1,
+          index: getIndex(node) + index,
           result,
           ruleName
         });
@@ -76,13 +77,24 @@ const rule = function(expectation) {
           report({
             message: messages.rejected,
             node,
-            index: index + 1,
+            index: getIndex(node) + index,
             result,
             ruleName
           });
         }
       }
     }
+
+    root.walkAtRules(/^import$/i, atRule =>
+      check(atRule, atRule.params, atRuleParamIndex)
+    );
+    root.walkDecls(decl =>
+      check(
+        decl,
+        _.get(decl, "raws.value.raw", decl.value),
+        declarationValueIndex
+      )
+    );
   };
 };
 

lib/rules/no-missing-end-of-source-newline/__tests__/index.js

@@ -106,6 +106,24 @@ a {
   ]
 });
 
+testRule(rule, {
+  ruleName,
+  config: [true],
+  skipBasicChecks: true,
+  syntax: "jsx",
+
+  accept: [
+    {
+      code: `export default (
+        <button
+          style={{ color: "#fff" }}
+        >
+        </button>
+      );`
+    }
+  ]
+});
+
 testRule(rule, {
   ruleName,
   config: [true],

lib/rules/no-missing-end-of-source-newline/index.js

@@ -21,7 +21,7 @@ const rule = function(primary, _, context) {
     eachRoot(root, checkRoot);
 
     function checkRoot(root) {
-      if (root.source.inline) {
+      if (root.source.inline || root.source.lang === "object-literal") {
         return;
       }
       const rootString = root.source.input.css;

lib/utils/declarationValueIndex.js

@@ -1,12 +1,16 @@
 /* @flow */
 "use strict";
+const _ = require("lodash");
 
 /**
  * Get the index of a declaration's value
  */
 module.exports = function(decl /*: Object*/) /*: number*/ {
-  const beforeColon = decl.toString().indexOf(":");
-  const afterColon =
-    decl.raw("between").length - decl.raw("between").indexOf(":");
-  return beforeColon + afterColon;
+  return [
+    _.get(decl, "raws.prop.prefix"),
+    _.get(decl, "raws.prop.raw", decl.prop),
+    _.get(decl, "raws.prop.suffix"),
+    _.get(decl, "raws.between", ":"),
+    _.get(decl, "raws.value.prefix")
+  ].reduce((count, str) => (str ? count + str.length : count), 0);
 };

package.json

@@ -62,18 +62,19 @@
     "normalize-selector": "^0.2.0",
     "pify": "^3.0.0",
     "postcss": "^7.0.0",
-    "postcss-html": "^0.31.0",
+    "postcss-jsx": "^0.32.0",
+    "postcss-html": "^0.32.0",
     "postcss-less": "^2.0.0",
-    "postcss-markdown": "^0.31.0",
+    "postcss-markdown": "^0.32.0",
     "postcss-media-query-parser": "^0.2.3",
     "postcss-reporter": "^5.0.0",
     "postcss-resolve-nested-selector": "^0.1.1",
     "postcss-safe-parser": "^4.0.0",
     "postcss-sass": "^0.3.0",
     "postcss-scss": "^2.0.0",
     "postcss-selector-parser": "^3.1.0",
-    "postcss-styled": "^0.31.0",
-    "postcss-syntax": "^0.31.0",
+    "postcss-styled": "^0.32.0",
+    "postcss-syntax": "^0.32.0",
     "postcss-value-parser": "^3.3.0",
     "resolve-from": "^4.0.0",
     "signal-exit": "^3.0.2",