@atlaskit/eslint-plugin-design-system 4.8.2 → 4.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.9.0
+
+### Minor Changes
+
+- [`9701bf4a8b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9701bf4a8b3) - Fix false positives for variable names and object property keys
+
 ## 4.8.2
 
 ### Patch Changes

package/dist/cjs/rules/ensure-design-token-usage/index.js

@@ -74,17 +74,24 @@ var rule = {
         }
       },
       Identifier: function Identifier(node) {
-        if ((0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration')) {
+        if ((0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration') || (0, _isNode.isPropertyKey)(node) || (0, _isNode.isVariableName)(node)) {
           return;
         }
 
-        if ((0, _isColor.isLegacyColor)(node.name) || (0, _isColor.isHardCodedColor)(node.name)) {
+        var isNodeHardCodedColor = (0, _isColor.isHardCodedColor)(node.name);
+
+        if ((0, _isColor.isLegacyColor)(node.name) || isNodeHardCodedColor) {
           if (node.parent.type === 'MemberExpression' && node.parent.object.type === 'Identifier') {
-            context.report({
-              messageId: 'hardCodedColor',
-              node: node,
-              suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
-            });
+            // Object members as named colors, like obj.ivory, should be valid,
+            // and hexes and color functions cannot be property names anyway.
+            if (!isNodeHardCodedColor) {
+              context.report({
+                messageId: 'hardCodedColor',
+                node: node,
+                suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
+              });
+            }
+
             return;
           }
 

package/dist/cjs/rules/utils/is-node.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = void 0;
+exports.isVariableName = exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = void 0;
 
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 
@@ -37,6 +37,27 @@ var isDecendantOfType = function isDecendantOfType(node, type) {
 
 exports.isDecendantOfType = isDecendantOfType;
 
+var isPropertyKey = function isPropertyKey(node) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') && isDecendantOfType(node, 'Property')) {
+    var parent = node.parent;
+    return node === parent.key || parent.shorthand;
+  }
+
+  return false;
+};
+
+exports.isPropertyKey = isPropertyKey;
+
+var isVariableName = function isVariableName(node) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') && isDecendantOfType(node, 'VariableDeclarator')) {
+    return node === node.parent.id;
+  }
+
+  return false;
+};
+
+exports.isVariableName = isVariableName;
+
 var isDecendantOfStyleJsxAttribute = function isDecendantOfStyleJsxAttribute(node) {
   // @ts-ignore
   if (node.type === 'JSXAttribute') {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.8.2",
+	"version": "4.9.0",
 	"sideEffects": false
 }

package/dist/es2019/rules/ensure-design-token-usage/index.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
-import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType } from '../utils/is-node';
+import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType, isPropertyKey, isVariableName } from '../utils/is-node';
 const defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -66,17 +66,24 @@ token('color.background.blanket');
       },
 
       Identifier(node) {
-        if (isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration')) {
+        if (isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration') || isPropertyKey(node) || isVariableName(node)) {
           return;
         }
 
-        if (isLegacyColor(node.name) || isHardCodedColor(node.name)) {
+        const isNodeHardCodedColor = isHardCodedColor(node.name);
+
+        if (isLegacyColor(node.name) || isNodeHardCodedColor) {
           if (node.parent.type === 'MemberExpression' && node.parent.object.type === 'Identifier') {
-            context.report({
-              messageId: 'hardCodedColor',
-              node,
-              suggest: getTokenSuggestion(node.parent, `${node.parent.object.name}.${node.name}`, config)
-            });
+            // Object members as named colors, like obj.ivory, should be valid,
+            // and hexes and color functions cannot be property names anyway.
+            if (!isNodeHardCodedColor) {
+              context.report({
+                messageId: 'hardCodedColor',
+                node,
+                suggest: getTokenSuggestion(node.parent, `${node.parent.object.name}.${node.name}`, config)
+              });
+            }
+
             return;
           }
 

package/dist/es2019/rules/utils/is-node.js

@@ -21,6 +21,21 @@ export const isDecendantOfType = (node, type, skipNode = true) => {
 
   return false;
 };
+export const isPropertyKey = node => {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'Property')) {
+    const parent = node.parent;
+    return node === parent.key || parent.shorthand;
+  }
+
+  return false;
+};
+export const isVariableName = node => {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'VariableDeclarator')) {
+    return node === node.parent.id;
+  }
+
+  return false;
+};
 export const isDecendantOfStyleJsxAttribute = node => {
   // @ts-ignore
   if (node.type === 'JSXAttribute') {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.8.2",
+	"version": "4.9.0",
 	"sideEffects": false
 }

package/dist/esm/rules/ensure-design-token-usage/index.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
-import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType } from '../utils/is-node';
+import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType, isPropertyKey, isVariableName } from '../utils/is-node';
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -63,17 +63,24 @@ var rule = {
         }
       },
       Identifier: function Identifier(node) {
-        if (isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration')) {
+        if (isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration') || isPropertyKey(node) || isVariableName(node)) {
           return;
         }
 
-        if (isLegacyColor(node.name) || isHardCodedColor(node.name)) {
+        var isNodeHardCodedColor = isHardCodedColor(node.name);
+
+        if (isLegacyColor(node.name) || isNodeHardCodedColor) {
           if (node.parent.type === 'MemberExpression' && node.parent.object.type === 'Identifier') {
-            context.report({
-              messageId: 'hardCodedColor',
-              node: node,
-              suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
-            });
+            // Object members as named colors, like obj.ivory, should be valid,
+            // and hexes and color functions cannot be property names anyway.
+            if (!isNodeHardCodedColor) {
+              context.report({
+                messageId: 'hardCodedColor',
+                node: node,
+                suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
+              });
+            }
+
             return;
           }
 

package/dist/esm/rules/utils/is-node.js

@@ -23,6 +23,21 @@ export var isDecendantOfType = function isDecendantOfType(node, type) {
 
   return false;
 };
+export var isPropertyKey = function isPropertyKey(node) {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'Property')) {
+    var parent = node.parent;
+    return node === parent.key || parent.shorthand;
+  }
+
+  return false;
+};
+export var isVariableName = function isVariableName(node) {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'VariableDeclarator')) {
+    return node === node.parent.id;
+  }
+
+  return false;
+};
 export var isDecendantOfStyleJsxAttribute = function isDecendantOfStyleJsxAttribute(node) {
   // @ts-ignore
   if (node.type === 'JSXAttribute') {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.8.2",
+	"version": "4.9.0",
 	"sideEffects": false
 }

package/dist/types/rules/utils/is-node.d.ts

@@ -2,6 +2,8 @@ import type { Rule } from 'eslint';
 import { CallExpression, Expression, TaggedTemplateExpression } from 'eslint-codemod-utils';
 export declare const isDecendantOfGlobalToken: (node: Rule.Node) => boolean;
 export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'], skipNode?: boolean) => boolean;
+export declare const isPropertyKey: (node: Rule.Node) => boolean;
+export declare const isVariableName: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleJsxAttribute: (node: Rule.Node) => boolean;
 export declare const isStyledTemplateNode: (node?: Expression | null | undefined) => node is TaggedTemplateExpression;
 export declare const isStyledObjectNode: (node?: Expression | null | undefined) => node is CallExpression;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "4.8.2",
+  "version": "4.9.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
     "@atlaskit/theme": "^12.0.2",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.7",
+    "@emotion/styled": "^11.0.0",
     "eslint": "^7.7.0",
     "react": "^16.8.0",
     "ts-node": "^10.0.0",