Merge pull request #7 from taskworld/fix-werid-things

Fix werid things

lib/rules/background-image.js

@@ -5,9 +5,23 @@ const extractStyle = require('../utils/extractStyle')
 const platforms = require('../config/platforms')
 const supportMatrix = require('../assets/supportMatrix.json')
 
-const _ = require('lodash')
+const kebabCase = require('lodash/kebabCase')
+const fromPairs = require('lodash/fromPairs')
+const map = require('lodash/map')
+const includes = require('lodash/includes')
+const pick = require('lodash/pick')
+const pickBy = require('lodash/pickBy')
+const isString = require('lodash/isString')
+const isEmpty = require('lodash/isEmpty')
+const keys = require('lodash/keys')
+const uniq = require('lodash/uniq')
+const values = require('lodash/values')
+const toLower = require('lodash/toLower')
+const concat = require('lodash/concat')
+const get = require('lodash/get')
 const elementType = require('jsx-ast-utils/elementType')
-const toTransformKebabCase = (value, style) => ([ _.kebabCase(style), value ])
+const getProp = require('jsx-ast-utils/getProp')
+const toTransformKebabCase = (value, style) => ([ kebabCase(style), value ])
 
 module.exports = {
   meta: {
@@ -20,34 +34,35 @@ module.exports = {
   create: (context) => ({
     JSXOpeningElement: (node) => {
       if (!hasPropStyle(node)) return
+      if (isString(extractStyle(node))) return
 
       const componentName = elementType(node)
-      const styles = _.fromPairs(_.map(extractStyle(node), toTransformKebabCase))
+      const styles = fromPairs(map(extractStyle(node), toTransformKebabCase))
       const configPlaforms = context.options[1] || platforms
       const hasUrlImage = detectBackgroundImageUrl(node)
 
       let unsupported = {}
       for (const style in styles) {
-        if (!_.includes(style, 'background')) continue
-        const platforms = _.pick(supportMatrix[style], configPlaforms)
+        if (!includes(style, 'background')) continue
+        const platforms = pick(supportMatrix[style], configPlaforms)
         if (hasUrlImage) {
-          unsupported = _.pickBy(platforms, _.isString)
+          unsupported = pickBy(platforms, isString)
         }
       }
 
-      if (!_.isEmpty(unsupported)) {
-        const platforms = _.keys(unsupported)
-        const msg = _.uniq(_.values(unsupported))
+      if (!isEmpty(unsupported)) {
+        const platforms = keys(unsupported)
+        const msg = uniq(values(unsupported))
         context.report({
-          node,
-          message: `\`background with image url\` supplied to \`${componentName}\`, in ${_.concat(platforms)}: ${_.toLower(_.concat(msg))}.`
+          node: get(getProp(node.attributes, 'style'), 'value', node),
+          message: `\`background with image url\` supplied to \`${componentName}\`, in ${concat(platforms)}: ${toLower(concat(msg))}.`
         })
       }
     }
   })
 }
 
 function detectBackgroundImageUrl (node) {
-  const backgroundCssValue = _.get(extractStyle(node), 'background', false)
-  return _.includes(backgroundCssValue, 'url(')
+  const backgroundCssValue = get(extractStyle(node), 'background', false)
+  return includes(backgroundCssValue, 'url(')
 }

lib/rules/unknown-css.js

@@ -12,7 +12,10 @@ const uniq = require('lodash/uniq')
 const compact = require('lodash/compact')
 const has = require('lodash/has')
 const isEmpty = require('lodash/isEmpty')
+const isString = require('lodash/isString')
+const get = require('lodash/get')
 const elementType = require('jsx-ast-utils/elementType')
+const getProp = require('jsx-ast-utils/getProp')
 
 const toTransformKebabCase = (value, style) => ([ kebabCase(style), value ])
 
@@ -27,18 +30,18 @@ module.exports = {
   create: (context) => ({
     JSXOpeningElement: (node) => {
       if (!hasPropStyle(node)) return
+      if (isString(extractStyle(node))) return
 
       const componentName = elementType(node)
       const styles = fromPairs(map(extractStyle(node), toTransformKebabCase))
       const keyStyles = keys(styles)
       const unknownCss = uniq(compact(map(keyStyles, (key) => !has(supportMatrix, key) ? key : null)))
-
       if (!isEmpty(unknownCss)) {
         context.report({
-          node,
+          node: get(getProp(node.attributes, 'style'), 'value', node),
           message: `Unknown style property \`${unknownCss.join(', ')}\` supplied to \`${componentName}\`.`
         })
       }
-    }
+    },
   })
 }

lib/rules/unsupported-css.js

@@ -1,6 +1,5 @@
 'use strict'
 
-const elementType = require('jsx-ast-utils/elementType')
 const kebabCase = require('lodash/kebabCase')
 const pick = require('lodash/pick')
 const isEmpty = require('lodash/isEmpty')
@@ -11,6 +10,9 @@ const get = require('lodash/get')
 const intersection = require('lodash/intersection')
 const uniq = require('lodash/uniq')
 const keys = require('lodash/keys')
+const isString = require('lodash/isString')
+const elementType = require('jsx-ast-utils/elementType')
+const getProp = require('jsx-ast-utils/getProp')
 
 const supportMatrix = require('../assets/supportMatrix.json')
 const extractStyle = require('../utils/extractStyle')
@@ -29,6 +31,7 @@ module.exports = {
   create: (context) => ({
     JSXOpeningElement: (node) => {
       if (!hasPropStyle(node)) return
+      if (isString(extractStyle(node))) return
 
       const componentName = elementType(node)
       const styles = extractStyle(node)
@@ -53,7 +56,7 @@ module.exports = {
         }
       }
       if (!isEmpty(unsupportedCSS)) {
-        report(unsupportedCSS, componentName, false, context, node)
+        report(unsupportedCSS, componentName, false, context, get(getProp(node.attributes, 'style'), 'value', node))
       }
     },
   })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-email-css-rules",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "linter rules",
   "main": "lib/index.js",
   "scripts": {

tests/lib/rules/background-image.spec.js

@@ -14,6 +14,7 @@ ruleTester.run('background css', rule, {
   valid: [
     { code: '<div style={{ background: "black", textAlign: "center" }}>foo</div>' },
     { code: '<table><tr style={{ background: "transparent" }}>foo</tr></table>' },
+    { code: '<table><tr style={style.foo}>foo</tr></table>' },
   ],
   invalid: [
     {

tests/lib/rules/unknown-css.spec.js

@@ -12,18 +12,22 @@ const ruleTester = new RuleTester({
 
 ruleTester.run('unknow css', rule, {
   valid: [
-    {
-      code: '<div style={{ borderRight: "20px" }}>foooo</div>',
-      options: [ 'strict' ],
-    }
+    { code: '<div style={{ borderRight: "20px" }}>foooo</div>' },
+    { code: '<UserRow style={{ borderRight: "20px" }}>foooo</UserRow>' },
+    { code: '<UserRow style={style.userRow}>foooo</UserRow>' },
   ],
   invalid: [
     {
       code: '<div style={{ unknowCSS: "black", barCss: "1px", borderRight: "20px" }}>foo</div>',
-      options: [ 'strict' ],
       errors: [
         { message: 'Unknown style property `unknow-css, bar-css` supplied to `div`.' },
       ],
     },
+    {
+      code: '<UserRow style={{ borderRight: "20px", kakaNana: "20px" }}>foooo</UserRow>',
+      errors: [
+        { message: 'Unknown style property `kaka-nana` supplied to `UserRow`.' },
+      ],
+    },
   ]
 })

tests/lib/rules/unsupported-css.spec.js

@@ -15,6 +15,7 @@ ruleTester.run('text overflow with outlook platform', rule, {
     { code: `<td style={{ textOverflow: 'clip' }}>OH BOOM!!</td>`,
       options: ['strict', [ 'gmail' ]]
     },
+    { code: '<UserRow style={style.userRow}>foooo</UserRow>' },
   ],
   invalid: [
     { code: `<td style={{ textOverflow: 'clip', width: '200px' }}>OH BOOM!!</td>`,