@atlaskit/eslint-plugin-design-system 4.3.0 → 4.4.2

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.4.2
+
+### Patch Changes
+
+- [`b3e5a62a9e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3e5a62a9e3) - Adds `static` techstack to package, enforcing stricter style linting. In this case the package already satisfied this requirement so there have been no changes to styles.
+- Updated dependencies
+
+## 4.4.1
+
+### Patch Changes
+
+- [`236e6040fb9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/236e6040fb9) - Fixes a bug in the rule `ensure-design-token-usage` where some color value types were not being detected as hardcoded color usage. This affected Styled Components and Emotion CSS prop syntaxes.
+
+  These color types have been fixed:
+
+  - rgb
+  - rgba
+  - hsl
+  - hsla
+  - lch
+  - lab
+  - color()
+
+## 4.4.0
+
+### Minor Changes
+
+- [`1065b5b1bbb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1065b5b1bbb) - Fixed bug where deleted '[default]' tokens were not being detected by lint tooling
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.3.0
 
 ### Minor Changes

package/README.md

@@ -15,21 +15,37 @@ Add the plugin to your `.eslintrc.js` file.
 ```diff
 module.exports = {
   plugins: [
-+    '@atlaskit/eslint-plugin-design-system',
++    '@atlaskit/design-system',
   ],
 };
 ```
 
-Turn on the rules.
+Extend the configuration file.
 
 ```diff
 module.exports = {
   extends: [
-+    'plugin:@atlaskit/eslint-plugin-design-system/recommended',
++    'plugin:@atlaskit/design-system/recommended',
   ],
 };
 ```
 
+Enable any desired rules.
+
+```diff
+module.exports = {
+  rules: {
++    '@atlaskit/design-system/ensure-design-token-usage': ['error', { 'shouldEnsureFallbackUsage': true }],
++    '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
++    '@atlaskit/design-system/no-unsafe-design-token-usage': ['error', { 'shouldEnsureFallbackUsage': true }],
++    '@atlaskit/design-system/use-visually-hidden': 'error',
++    '@atlaskit/design-system/no-deprecated-imports': 'error',
++    '@atlaskit/design-system/no-deprecated-api-usage': 'error'
+    }
+  }
+};
+```
+
 Rules will where possible come with fixers.
 For individual rules see the [`rules`](./src/rules) folder,
 however its strongly recommended to use the rules as above.

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

@@ -129,9 +129,7 @@ var rule = {
          * This is necessary to avoid cases where a property might have a color in its name ie. "white-space"
          */
 
-        var cssProperties = value.replace(/\n/g, '').split(/;|{|}/).filter(function (el) {
-          return !el.match(/\.|\@|\(|\)/);
-        }).map(function (el) {
+        var cssProperties = value.replace(/\n/g, '').split(/;|{|}/).map(function (el) {
           return el.trim().split(':').pop() || '';
         });
         cssProperties.forEach(function (property) {

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

@@ -9,11 +9,7 @@ exports.default = void 0;
 
 var _renameMapping = _interopRequireDefault(require("@atlaskit/tokens/rename-mapping"));
 
-var getCleanPathId = function getCleanPathId(path) {
-  return path.split('.').filter(function (el) {
-    return el !== '[default]';
-  }).join('.');
-};
+var _tokenIds = require("@atlaskit/tokens/token-ids");
 
 var rule = {
   meta: {
@@ -50,20 +46,20 @@ var rule = {
         var migrationMeta = _renameMapping.default.filter(function (t) {
           return t.state === 'deprecated';
         }).find(function (t) {
-          return getCleanPathId(t.path) === tokenKey;
+          return (0, _tokenIds.getTokenId)(t.path) === tokenKey;
         });
 
         if (migrationMeta) {
-          var cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          var replacement = (0, _tokenIds.getTokenId)(migrationMeta.replacement);
           context.report({
             messageId: 'tokenRenamed',
             node: node,
             data: {
               name: tokenKey,
-              replacement: cleanTokenKey
+              replacement: replacement
             },
             fix: function fix(fixer) {
-              return fixer.replaceText(node.arguments[0], "'".concat(cleanTokenKey, "'"));
+              return fixer.replaceText(node.arguments[0], "'".concat(replacement, "'"));
             }
           });
           return;

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

@@ -9,18 +9,14 @@ exports.default = void 0;
 
 var _renameMapping = _interopRequireDefault(require("@atlaskit/tokens/rename-mapping"));
 
+var _tokenIds = require("@atlaskit/tokens/token-ids");
+
 var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
 
 var _isNode = require("../utils/is-node");
 
 var _isToken = require("../utils/is-token");
 
-var getCleanPathId = function getCleanPathId(path) {
-  return path.split('.').filter(function (el) {
-    return el !== '[default]';
-  }).join('.');
-};
-
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -139,11 +135,11 @@ var rule = {
         var migrationMeta = _renameMapping.default.filter(function (t) {
           return t.state === 'deleted';
         }).find(function (t) {
-          return t.path === tokenKey;
+          return (0, _tokenIds.getTokenId)(t.path) === tokenKey;
         });
 
         if (typeof tokenKey === 'string' && migrationMeta) {
-          var cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          var cleanTokenKey = (0, _tokenIds.getTokenId)(migrationMeta.replacement);
           context.report({
             messageId: 'tokenRemoved',
             node: node,

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

@@ -34,7 +34,7 @@ exports.isLegacyNamedColor = isLegacyNamedColor;
 var includesHardCodedColor = function includesHardCodedColor(raw) {
   var value = raw.toLowerCase();
 
-  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/.exec(value.toLowerCase())) {
+  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|((?:rgb|hsl)a?|(lch|lab|color))\([^\)]*\)/.exec(value.toLowerCase())) {
     return true;
   }
 

package/dist/cjs/version.json

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

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

@@ -129,7 +129,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
          * This is necessary to avoid cases where a property might have a color in its name ie. "white-space"
          */
 
-        const cssProperties = value.replace(/\n/g, '').split(/;|{|}/).filter(el => !el.match(/\.|\@|\(|\)/)).map(el => el.trim().split(':').pop() || '');
+        const cssProperties = value.replace(/\n/g, '').split(/;|{|}/).map(el => el.trim().split(':').pop() || '');
         cssProperties.forEach(property => {
           if (includesHardCodedColor(property)) {
             context.report({

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

@@ -1,7 +1,5 @@
 import renameMapping from '@atlaskit/tokens/rename-mapping';
-
-const getCleanPathId = path => path.split('.').filter(el => el !== '[default]').join('.');
-
+import { getTokenId } from '@atlaskit/tokens/token-ids';
 const rule = {
   meta: {
     docs: {
@@ -35,18 +33,18 @@ const rule = {
           return;
         }
 
-        const migrationMeta = renameMapping.filter(t => t.state === 'deprecated').find(t => getCleanPathId(t.path) === tokenKey);
+        const migrationMeta = renameMapping.filter(t => t.state === 'deprecated').find(t => getTokenId(t.path) === tokenKey);
 
         if (migrationMeta) {
-          const cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          const replacement = getTokenId(migrationMeta.replacement);
           context.report({
             messageId: 'tokenRenamed',
             node,
             data: {
               name: tokenKey,
-              replacement: cleanTokenKey
+              replacement
             },
-            fix: fixer => fixer.replaceText(node.arguments[0], `'${cleanTokenKey}'`)
+            fix: fixer => fixer.replaceText(node.arguments[0], `'${replacement}'`)
           });
           return;
         }

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

@@ -1,10 +1,8 @@
 import renameMapping from '@atlaskit/tokens/rename-mapping';
+import { getTokenId } from '@atlaskit/tokens/token-ids';
 import tokens from '@atlaskit/tokens/token-names';
 import { isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute } from '../utils/is-node';
 import { isToken } from '../utils/is-token';
-
-const getCleanPathId = path => path.split('.').filter(el => el !== '[default]').join('.');
-
 const defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -139,10 +137,10 @@ token('color.background.blanket');
           return;
         }
 
-        const migrationMeta = renameMapping.filter(t => t.state === 'deleted').find(t => t.path === tokenKey);
+        const migrationMeta = renameMapping.filter(t => t.state === 'deleted').find(t => getTokenId(t.path) === tokenKey);
 
         if (typeof tokenKey === 'string' && migrationMeta) {
-          const cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          const cleanTokenKey = getTokenId(migrationMeta.replacement);
           context.report({
             messageId: 'tokenRemoved',
             node,

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

@@ -18,7 +18,7 @@ export const isLegacyNamedColor = value => legacyColorMixins.includes(value);
 export const includesHardCodedColor = raw => {
   const value = raw.toLowerCase();
 
-  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/.exec(value.toLowerCase())) {
+  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|((?:rgb|hsl)a?|(lch|lab|color))\([^\)]*\)/.exec(value.toLowerCase())) {
     return true;
   }
 

package/dist/es2019/version.json

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

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

@@ -119,9 +119,7 @@ var rule = {
          * This is necessary to avoid cases where a property might have a color in its name ie. "white-space"
          */
 
-        var cssProperties = value.replace(/\n/g, '').split(/;|{|}/).filter(function (el) {
-          return !el.match(/\.|\@|\(|\)/);
-        }).map(function (el) {
+        var cssProperties = value.replace(/\n/g, '').split(/;|{|}/).map(function (el) {
           return el.trim().split(':').pop() || '';
         });
         cssProperties.forEach(function (property) {

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

@@ -1,11 +1,5 @@
 import renameMapping from '@atlaskit/tokens/rename-mapping';
-
-var getCleanPathId = function getCleanPathId(path) {
-  return path.split('.').filter(function (el) {
-    return el !== '[default]';
-  }).join('.');
-};
-
+import { getTokenId } from '@atlaskit/tokens/token-ids';
 var rule = {
   meta: {
     docs: {
@@ -41,20 +35,20 @@ var rule = {
         var migrationMeta = renameMapping.filter(function (t) {
           return t.state === 'deprecated';
         }).find(function (t) {
-          return getCleanPathId(t.path) === tokenKey;
+          return getTokenId(t.path) === tokenKey;
         });
 
         if (migrationMeta) {
-          var cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          var replacement = getTokenId(migrationMeta.replacement);
           context.report({
             messageId: 'tokenRenamed',
             node: node,
             data: {
               name: tokenKey,
-              replacement: cleanTokenKey
+              replacement: replacement
             },
             fix: function fix(fixer) {
-              return fixer.replaceText(node.arguments[0], "'".concat(cleanTokenKey, "'"));
+              return fixer.replaceText(node.arguments[0], "'".concat(replacement, "'"));
             }
           });
           return;

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

@@ -1,14 +1,8 @@
 import renameMapping from '@atlaskit/tokens/rename-mapping';
+import { getTokenId } from '@atlaskit/tokens/token-ids';
 import tokens from '@atlaskit/tokens/token-names';
 import { isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute } from '../utils/is-node';
 import { isToken } from '../utils/is-token';
-
-var getCleanPathId = function getCleanPathId(path) {
-  return path.split('.').filter(function (el) {
-    return el !== '[default]';
-  }).join('.');
-};
-
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -127,11 +121,11 @@ var rule = {
         var migrationMeta = renameMapping.filter(function (t) {
           return t.state === 'deleted';
         }).find(function (t) {
-          return t.path === tokenKey;
+          return getTokenId(t.path) === tokenKey;
         });
 
         if (typeof tokenKey === 'string' && migrationMeta) {
-          var cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          var cleanTokenKey = getTokenId(migrationMeta.replacement);
           context.report({
             messageId: 'tokenRemoved',
             node: node,

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

@@ -22,7 +22,7 @@ export var isLegacyNamedColor = function isLegacyNamedColor(value) {
 export var includesHardCodedColor = function includesHardCodedColor(raw) {
   var value = raw.toLowerCase();
 
-  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/.exec(value.toLowerCase())) {
+  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|((?:rgb|hsl)a?|(lch|lab|color))\([^\)]*\)/.exec(value.toLowerCase())) {
     return true;
   }
 

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
-  "version": "4.3.0",
+  "version": "4.4.2",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {
@@ -32,7 +32,7 @@
     "react": "^16.8.0",
     "ts-node": "^10.0.0",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "3.9.6"
+    "typescript": "3.9.10"
   },
   "techstack": {
     "@atlassian/frontend": {
@@ -43,6 +43,7 @@
       "design-system": "v1",
       "deprecation": "no-deprecated-imports",
       "styling": [
+        "static",
         "emotion"
       ]
     }