@atlaskit/eslint-plugin-design-system 3.2.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.0.0
+
+### Major Changes
+
+- [`a2f953f3814`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a2f953f3814) - Previously the `ensure-design-token-usage` eslint rule contained all checks relating to token use. This has now been split up into two separate rules:
+
+  `ensure-design-token-usage` now covers:
+
+  - `legacyElevation` — warns about old usages of the elevation mixins or styles, which instead should use the `card` or `overlay` tokens.
+  - `hardCodedColor` — warns about use of hard-coded colors such as `color: colors.B100`, which instead should be wrapped in a `token()` call. This covers the majority of cases in existing codebases when first adopting tokens.
+
+  `no-unsafe-design-token-usage` (new) covers the remaining rules:
+
+  - `directTokenUsage` — warns against using the CSS Custom Property name that is output in the browser by the `token()` call.
+    Eg. directly using `var(--ds-accent-subtleBlue)` is bad.
+  - `staticToken` — warns when tokens aren't used inline. Inlining the token usages helps with static analysis, which unlocks future improvements.
+    Eg. pulling the token out into a const like `css={ color: token(primaryButtonText) }` is bad.
+  - `invalidToken` — warns when using a token that doesn't exist (not one that's been renamed, see the next point).
+  - `tokenRenamed` — warns when using a token that's been renamed in a subsequent release.
+  - `tokenFallbackEnforced` — warns if a fallback for the token call is not provided.
+    Eg. call with the fallback like this `token('color.background.disabled', N10)` instead of `token('color.background.disabled')`.
+  - `tokenFallbackRestricted` — the opposite of `tokenFallbackEnforced`.
+    Eg. do not pass in a fallback like this `token('color.background.disabled', N10)` and instead only include the token `token('color.background.disabled')`.
+
+  Upgrading — some instances of `\\eslint-disable` may need to be changed to the new rule. If you have failing lint rules after only bumping this package then switch those ignores to use `no-unsafe-design-token-usage` instead.
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- [`26719f5b7b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26719f5b7b0) - Update @atlaskit tokens dependency from a devDependency to a regular dependency
+- [`a66711cd58c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a66711cd58c) - Remove `@atlaskit/tokens` from peer dependency.
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -11,8 +11,11 @@ var _ensureDesignTokenUsage = _interopRequireDefault(require("./rules/ensure-des
 
 var _noDeprecatedImports = _interopRequireDefault(require("./rules/no-deprecated-imports"));
 
+var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./rules/no-unsafe-design-token-usage"));
+
 var rules = {
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
+  'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
   'no-deprecated-imports': _noDeprecatedImports.default
 };
 exports.rules = rules;

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

@@ -1,23 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _renameMapping = _interopRequireDefault(require("@atlaskit/tokens/rename-mapping"));
-
-var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
-
-var _isColor = require("./utils/is-color");
-
-var _isElevation = require("./utils/is-elevation");
+var _isColor = require("../utils/is-color");
 
-var _isNode = require("./utils/is-node");
+var _isElevation = require("../utils/is-elevation");
 
-var _isToken = require("./utils/is-token");
+var _isNode = require("../utils/is-node");
 
 var defaultConfig = {
   shouldEnforceFallbacks: false
@@ -58,13 +50,7 @@ var rule = {
     type: 'problem',
     messages: {
       legacyElevation: "Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use \"card\" for card elevations, and \"overlay\" for anything else that should appear elevated.\n\n{{example}}\n",
-      directTokenUsage: "Access the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('{{tokenKey}}');\n```\n",
-      hardCodedColor: "Colors can be sourced from the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('color.background.blanket');\n```\n",
-      staticToken: "Token string should be inlined directly into the function call.\n\n```\ntoken('color.background.blanket');\n```\n",
-      invalidToken: 'The token "{{name}}" does not exist.',
-      tokenRenamed: 'The token "{{name}}" has been renamed.',
-      tokenFallbackEnforced: "Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.\n\n```\ntoken('color.background.blanket', N500A);\n```\n      ",
-      tokenFallbackRestricted: "Token function must not use a fallback.\n\n```\ntoken('color.background.blanket');\n```\n      "
+      hardCodedColor: "Colors can be sourced from the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('color.background.blanket');\n```\n"
     }
   },
   create: function create(context) {
@@ -134,25 +120,12 @@ var rule = {
         var value = node.quasi.quasis.map(function (q) {
           return q.value.raw;
         }).join('');
-        var tokenKey = (0, _isToken.isToken)(value, _tokenNames.default);
-
-        if (tokenKey) {
-          context.report({
-            messageId: 'directTokenUsage',
-            node: node,
-            data: {
-              tokenKey: tokenKey
-            }
-          });
-          return;
-        }
         /**
          * Attempts to remove all non-essential words & characters from a style block.
          * Including selectors, queries and property names, leaving only values
          * 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) {
@@ -181,23 +154,6 @@ var rule = {
           return;
         }
 
-        var tokenKey = (0, _isToken.isToken)(node.value, _tokenNames.default);
-        var isCSSVar = node.value.startsWith('var(');
-
-        if (tokenKey) {
-          context.report({
-            messageId: 'directTokenUsage',
-            node: node,
-            data: {
-              tokenKey: tokenKey
-            },
-            fix: function fix(fixer) {
-              return isCSSVar ? fixer.replaceText(node, "token('".concat(tokenKey, "')")) : null;
-            }
-          });
-          return;
-        }
-
         if ((0, _isColor.isHardCodedColor)(node.value) || (0, _isColor.includesHardCodedColor)(node.value)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -226,73 +182,6 @@ var rule = {
           suggest: getTokenSuggestion(node, "".concat(node.callee.name, "()"), config)
         });
       },
-      'CallExpression[callee.name="token"]': function CallExpressionCalleeNameToken(node) {
-        if (node.type !== 'CallExpression') {
-          return;
-        }
-
-        if (node.arguments.length < 2 && config.shouldEnforceFallbacks === true) {
-          context.report({
-            messageId: 'tokenFallbackEnforced',
-            node: node
-          });
-        } else if (node.arguments.length > 1 && config.shouldEnforceFallbacks === false) {
-          if (node.arguments[0].type === 'Literal') {
-            var value = node.arguments[0].value;
-            context.report({
-              messageId: 'tokenFallbackRestricted',
-              node: node.arguments[1],
-              fix: function fix(fixer) {
-                return fixer.replaceText(node, "token('".concat(value, "')"));
-              }
-            });
-          } else {
-            context.report({
-              messageId: 'tokenFallbackRestricted',
-              node: node.arguments[1]
-            });
-          }
-        }
-
-        if (node.arguments[0] && node.arguments[0].type !== 'Literal') {
-          context.report({
-            messageId: 'staticToken',
-            node: node
-          });
-          return;
-        }
-
-        var tokenKey = node.arguments[0].value;
-
-        if (!tokenKey) {
-          return;
-        }
-
-        if (typeof tokenKey === 'string' && tokenKey in _renameMapping.default) {
-          context.report({
-            messageId: 'tokenRenamed',
-            node: node,
-            data: {
-              name: tokenKey
-            },
-            fix: function fix(fixer) {
-              return fixer.replaceText(node.arguments[0], "'".concat(_renameMapping.default[tokenKey], "'"));
-            }
-          });
-          return;
-        }
-
-        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !_tokenNames.default[tokenKey]) {
-          context.report({
-            messageId: 'invalidToken',
-            node: node,
-            data: {
-              name: tokenKey.toString()
-            }
-          });
-          return;
-        }
-      },
       JSXAttribute: function JSXAttribute(node) {
         if (!node.value) {
           return;

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

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _renameMapping = _interopRequireDefault(require("@atlaskit/tokens/rename-mapping"));
+
+var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
+
+var _isNode = require("../utils/is-node");
+
+var _isToken = require("../utils/is-token");
+
+var defaultConfig = {
+  shouldEnforceFallbacks: false
+};
+var rule = {
+  meta: {
+    docs: {
+      recommended: true
+    },
+    fixable: 'code',
+    type: 'problem',
+    messages: {
+      directTokenUsage: "Access the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('{{tokenKey}}');\n```\n",
+      staticToken: "Token string should be inlined directly into the function call.\n\n```\ntoken('color.background.blanket');\n```\n",
+      invalidToken: 'The token "{{name}}" does not exist.',
+      tokenRenamed: 'The token "{{name}}" has been renamed.',
+      tokenFallbackEnforced: "Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.\n\n```\ntoken('color.background.blanket', N500A);\n```\n      ",
+      tokenFallbackRestricted: "Token function must not use a fallback.\n\n```\ntoken('color.background.blanket');\n```\n      "
+    }
+  },
+  create: function create(context) {
+    var config = context.options[0] || defaultConfig;
+    return {
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        var value = node.quasi.quasis.map(function (q) {
+          return q.value.raw;
+        }).join('');
+        var tokenKey = (0, _isToken.isToken)(value, _tokenNames.default);
+
+        if (tokenKey) {
+          context.report({
+            messageId: 'directTokenUsage',
+            node: node,
+            data: {
+              tokenKey: tokenKey
+            }
+          });
+          return;
+        }
+      },
+      'ObjectExpression > Property > Literal': function ObjectExpressionPropertyLiteral(node) {
+        if (node.type !== 'Literal') {
+          return;
+        }
+
+        if (typeof node.value !== 'string') {
+          return;
+        }
+
+        if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfStyleJsxAttribute)(node)) {
+          return;
+        }
+
+        var tokenKey = (0, _isToken.isToken)(node.value, _tokenNames.default);
+        var isCSSVar = node.value.startsWith('var(');
+
+        if (tokenKey) {
+          context.report({
+            messageId: 'directTokenUsage',
+            node: node,
+            data: {
+              tokenKey: tokenKey
+            },
+            fix: function fix(fixer) {
+              return isCSSVar ? fixer.replaceText(node, "token('".concat(tokenKey, "')")) : null;
+            }
+          });
+          return;
+        }
+      },
+      'CallExpression[callee.name="token"]': function CallExpressionCalleeNameToken(node) {
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (node.arguments.length < 2 && config.shouldEnforceFallbacks === true) {
+          context.report({
+            messageId: 'tokenFallbackEnforced',
+            node: node
+          });
+        } else if (node.arguments.length > 1 && config.shouldEnforceFallbacks === false) {
+          if (node.arguments[0].type === 'Literal') {
+            var value = node.arguments[0].value;
+            context.report({
+              messageId: 'tokenFallbackRestricted',
+              node: node.arguments[1],
+              fix: function fix(fixer) {
+                return fixer.replaceText(node, "token('".concat(value, "')"));
+              }
+            });
+          } else {
+            context.report({
+              messageId: 'tokenFallbackRestricted',
+              node: node.arguments[1]
+            });
+          }
+        }
+
+        if (node.arguments[0] && node.arguments[0].type !== 'Literal') {
+          context.report({
+            messageId: 'staticToken',
+            node: node
+          });
+          return;
+        }
+
+        var tokenKey = node.arguments[0].value;
+
+        if (!tokenKey) {
+          return;
+        }
+
+        if (typeof tokenKey === 'string' && tokenKey in _renameMapping.default) {
+          context.report({
+            messageId: 'tokenRenamed',
+            node: node,
+            data: {
+              name: tokenKey
+            },
+            fix: function fix(fixer) {
+              return fixer.replaceText(node.arguments[0], "'".concat(_renameMapping.default[tokenKey], "'"));
+            }
+          });
+          return;
+        }
+
+        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !_tokenNames.default[tokenKey]) {
+          context.report({
+            messageId: 'invalidToken',
+            node: node,
+            data: {
+              name: tokenKey.toString()
+            }
+          });
+          return;
+        }
+      }
+    };
+  }
+};
+var _default = rule;
+exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -1,7 +1,9 @@
 import ensureTokenUsage from './rules/ensure-design-token-usage';
 import noDeprecatedImports from './rules/no-deprecated-imports';
+import noUnsafeUsage from './rules/no-unsafe-design-token-usage';
 export const rules = {
   'ensure-design-token-usage': ensureTokenUsage,
+  'no-unsafe-design-token-usage': noUnsafeUsage,
   'no-deprecated-imports': noDeprecatedImports
 };
 export const configs = {

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

@@ -1,9 +1,6 @@
-import renameMapping from '@atlaskit/tokens/rename-mapping';
-import tokens from '@atlaskit/tokens/token-names';
-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 { isToken } from './utils/is-token';
+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';
 const defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -36,14 +33,6 @@ const rule = {
       legacyElevation: `Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use "card" for card elevations, and "overlay" for anything else that should appear elevated.
 
 {{example}}
-`,
-      directTokenUsage: `Access the global theme using the token function.
-
-\`\`\`
-import { token } from '@atlaskit/tokens';
-
-token('{{tokenKey}}');
-\`\`\`
 `,
       hardCodedColor: `Colors can be sourced from the global theme using the token function.
 
@@ -52,27 +41,7 @@ import { token } from '@atlaskit/tokens';
 
 token('color.background.blanket');
 \`\`\`
-`,
-      staticToken: `Token string should be inlined directly into the function call.
-
-\`\`\`
-token('color.background.blanket');
-\`\`\`
-`,
-      invalidToken: 'The token "{{name}}" does not exist.',
-      tokenRenamed: 'The token "{{name}}" has been renamed.',
-      tokenFallbackEnforced: `Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.
-
-\`\`\`
-token('color.background.blanket', N500A);
-\`\`\`
-      `,
-      tokenFallbackRestricted: `Token function must not use a fallback.
-
-\`\`\`
-token('color.background.blanket');
-\`\`\`
-      `
+`
     }
   },
 
@@ -151,25 +120,12 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
         }
 
         const value = node.quasi.quasis.map(q => q.value.raw).join('');
-        const tokenKey = isToken(value, tokens);
-
-        if (tokenKey) {
-          context.report({
-            messageId: 'directTokenUsage',
-            node,
-            data: {
-              tokenKey
-            }
-          });
-          return;
-        }
         /**
          * Attempts to remove all non-essential words & characters from a style block.
          * Including selectors, queries and property names, leaving only values
          * 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() || '');
         cssProperties.forEach(property => {
           if (includesHardCodedColor(property)) {
@@ -194,21 +150,6 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
 
-        const tokenKey = isToken(node.value, tokens);
-        const isCSSVar = node.value.startsWith('var(');
-
-        if (tokenKey) {
-          context.report({
-            messageId: 'directTokenUsage',
-            node,
-            data: {
-              tokenKey
-            },
-            fix: fixer => isCSSVar ? fixer.replaceText(node, `token('${tokenKey}')`) : null
-          });
-          return;
-        }
-
         if (isHardCodedColor(node.value) || includesHardCodedColor(node.value)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -239,72 +180,6 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
         });
       },
 
-      'CallExpression[callee.name="token"]': node => {
-        if (node.type !== 'CallExpression') {
-          return;
-        }
-
-        if (node.arguments.length < 2 && config.shouldEnforceFallbacks === true) {
-          context.report({
-            messageId: 'tokenFallbackEnforced',
-            node
-          });
-        } else if (node.arguments.length > 1 && config.shouldEnforceFallbacks === false) {
-          if (node.arguments[0].type === 'Literal') {
-            const {
-              value
-            } = node.arguments[0];
-            context.report({
-              messageId: 'tokenFallbackRestricted',
-              node: node.arguments[1],
-              fix: fixer => fixer.replaceText(node, `token('${value}')`)
-            });
-          } else {
-            context.report({
-              messageId: 'tokenFallbackRestricted',
-              node: node.arguments[1]
-            });
-          }
-        }
-
-        if (node.arguments[0] && node.arguments[0].type !== 'Literal') {
-          context.report({
-            messageId: 'staticToken',
-            node
-          });
-          return;
-        }
-
-        const tokenKey = node.arguments[0].value;
-
-        if (!tokenKey) {
-          return;
-        }
-
-        if (typeof tokenKey === 'string' && tokenKey in renameMapping) {
-          context.report({
-            messageId: 'tokenRenamed',
-            node,
-            data: {
-              name: tokenKey
-            },
-            fix: fixer => fixer.replaceText(node.arguments[0], `'${renameMapping[tokenKey]}'`)
-          });
-          return;
-        }
-
-        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey]) {
-          context.report({
-            messageId: 'invalidToken',
-            node,
-            data: {
-              name: tokenKey.toString()
-            }
-          });
-          return;
-        }
-      },
-
       JSXAttribute(node) {
         if (!node.value) {
           return;

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

@@ -0,0 +1,166 @@
+import renameMapping from '@atlaskit/tokens/rename-mapping';
+import tokens from '@atlaskit/tokens/token-names';
+import { isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute } from '../utils/is-node';
+import { isToken } from '../utils/is-token';
+const defaultConfig = {
+  shouldEnforceFallbacks: false
+};
+const rule = {
+  meta: {
+    docs: {
+      recommended: true
+    },
+    fixable: 'code',
+    type: 'problem',
+    messages: {
+      directTokenUsage: `Access the global theme using the token function.
+
+\`\`\`
+import { token } from '@atlaskit/tokens';
+
+token('{{tokenKey}}');
+\`\`\`
+`,
+      staticToken: `Token string should be inlined directly into the function call.
+
+\`\`\`
+token('color.background.blanket');
+\`\`\`
+`,
+      invalidToken: 'The token "{{name}}" does not exist.',
+      tokenRenamed: 'The token "{{name}}" has been renamed.',
+      tokenFallbackEnforced: `Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.
+
+\`\`\`
+token('color.background.blanket', N500A);
+\`\`\`
+      `,
+      tokenFallbackRestricted: `Token function must not use a fallback.
+
+\`\`\`
+token('color.background.blanket');
+\`\`\`
+      `
+    }
+  },
+
+  create(context) {
+    const config = context.options[0] || defaultConfig;
+    return {
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': node => {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        const value = node.quasi.quasis.map(q => q.value.raw).join('');
+        const tokenKey = isToken(value, tokens);
+
+        if (tokenKey) {
+          context.report({
+            messageId: 'directTokenUsage',
+            node,
+            data: {
+              tokenKey
+            }
+          });
+          return;
+        }
+      },
+      'ObjectExpression > Property > Literal': node => {
+        if (node.type !== 'Literal') {
+          return;
+        }
+
+        if (typeof node.value !== 'string') {
+          return;
+        }
+
+        if (!isDecendantOfStyleBlock(node) && !isDecendantOfStyleJsxAttribute(node)) {
+          return;
+        }
+
+        const tokenKey = isToken(node.value, tokens);
+        const isCSSVar = node.value.startsWith('var(');
+
+        if (tokenKey) {
+          context.report({
+            messageId: 'directTokenUsage',
+            node,
+            data: {
+              tokenKey
+            },
+            fix: fixer => isCSSVar ? fixer.replaceText(node, `token('${tokenKey}')`) : null
+          });
+          return;
+        }
+      },
+      'CallExpression[callee.name="token"]': node => {
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (node.arguments.length < 2 && config.shouldEnforceFallbacks === true) {
+          context.report({
+            messageId: 'tokenFallbackEnforced',
+            node
+          });
+        } else if (node.arguments.length > 1 && config.shouldEnforceFallbacks === false) {
+          if (node.arguments[0].type === 'Literal') {
+            const {
+              value
+            } = node.arguments[0];
+            context.report({
+              messageId: 'tokenFallbackRestricted',
+              node: node.arguments[1],
+              fix: fixer => fixer.replaceText(node, `token('${value}')`)
+            });
+          } else {
+            context.report({
+              messageId: 'tokenFallbackRestricted',
+              node: node.arguments[1]
+            });
+          }
+        }
+
+        if (node.arguments[0] && node.arguments[0].type !== 'Literal') {
+          context.report({
+            messageId: 'staticToken',
+            node
+          });
+          return;
+        }
+
+        const tokenKey = node.arguments[0].value;
+
+        if (!tokenKey) {
+          return;
+        }
+
+        if (typeof tokenKey === 'string' && tokenKey in renameMapping) {
+          context.report({
+            messageId: 'tokenRenamed',
+            node,
+            data: {
+              name: tokenKey
+            },
+            fix: fixer => fixer.replaceText(node.arguments[0], `'${renameMapping[tokenKey]}'`)
+          });
+          return;
+        }
+
+        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey]) {
+          context.report({
+            messageId: 'invalidToken',
+            node,
+            data: {
+              name: tokenKey.toString()
+            }
+          });
+          return;
+        }
+      }
+    };
+  }
+
+};
+export default rule;

package/dist/es2019/version.json

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

package/dist/esm/index.js

@@ -1,7 +1,9 @@
 import ensureTokenUsage from './rules/ensure-design-token-usage';
 import noDeprecatedImports from './rules/no-deprecated-imports';
+import noUnsafeUsage from './rules/no-unsafe-design-token-usage';
 export var rules = {
   'ensure-design-token-usage': ensureTokenUsage,
+  'no-unsafe-design-token-usage': noUnsafeUsage,
   'no-deprecated-imports': noDeprecatedImports
 };
 export var configs = {

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

@@ -1,9 +1,6 @@
-import renameMapping from '@atlaskit/tokens/rename-mapping';
-import tokens from '@atlaskit/tokens/token-names';
-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 { isToken } from './utils/is-token';
+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';
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -43,13 +40,7 @@ var rule = {
     type: 'problem',
     messages: {
       legacyElevation: "Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use \"card\" for card elevations, and \"overlay\" for anything else that should appear elevated.\n\n{{example}}\n",
-      directTokenUsage: "Access the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('{{tokenKey}}');\n```\n",
-      hardCodedColor: "Colors can be sourced from the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('color.background.blanket');\n```\n",
-      staticToken: "Token string should be inlined directly into the function call.\n\n```\ntoken('color.background.blanket');\n```\n",
-      invalidToken: 'The token "{{name}}" does not exist.',
-      tokenRenamed: 'The token "{{name}}" has been renamed.',
-      tokenFallbackEnforced: "Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.\n\n```\ntoken('color.background.blanket', N500A);\n```\n      ",
-      tokenFallbackRestricted: "Token function must not use a fallback.\n\n```\ntoken('color.background.blanket');\n```\n      "
+      hardCodedColor: "Colors can be sourced from the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('color.background.blanket');\n```\n"
     }
   },
   create: function create(context) {
@@ -119,25 +110,12 @@ var rule = {
         var value = node.quasi.quasis.map(function (q) {
           return q.value.raw;
         }).join('');
-        var tokenKey = isToken(value, tokens);
-
-        if (tokenKey) {
-          context.report({
-            messageId: 'directTokenUsage',
-            node: node,
-            data: {
-              tokenKey: tokenKey
-            }
-          });
-          return;
-        }
         /**
          * Attempts to remove all non-essential words & characters from a style block.
          * Including selectors, queries and property names, leaving only values
          * 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) {
@@ -166,23 +144,6 @@ var rule = {
           return;
         }
 
-        var tokenKey = isToken(node.value, tokens);
-        var isCSSVar = node.value.startsWith('var(');
-
-        if (tokenKey) {
-          context.report({
-            messageId: 'directTokenUsage',
-            node: node,
-            data: {
-              tokenKey: tokenKey
-            },
-            fix: function fix(fixer) {
-              return isCSSVar ? fixer.replaceText(node, "token('".concat(tokenKey, "')")) : null;
-            }
-          });
-          return;
-        }
-
         if (isHardCodedColor(node.value) || includesHardCodedColor(node.value)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -211,73 +172,6 @@ var rule = {
           suggest: getTokenSuggestion(node, "".concat(node.callee.name, "()"), config)
         });
       },
-      'CallExpression[callee.name="token"]': function CallExpressionCalleeNameToken(node) {
-        if (node.type !== 'CallExpression') {
-          return;
-        }
-
-        if (node.arguments.length < 2 && config.shouldEnforceFallbacks === true) {
-          context.report({
-            messageId: 'tokenFallbackEnforced',
-            node: node
-          });
-        } else if (node.arguments.length > 1 && config.shouldEnforceFallbacks === false) {
-          if (node.arguments[0].type === 'Literal') {
-            var value = node.arguments[0].value;
-            context.report({
-              messageId: 'tokenFallbackRestricted',
-              node: node.arguments[1],
-              fix: function fix(fixer) {
-                return fixer.replaceText(node, "token('".concat(value, "')"));
-              }
-            });
-          } else {
-            context.report({
-              messageId: 'tokenFallbackRestricted',
-              node: node.arguments[1]
-            });
-          }
-        }
-
-        if (node.arguments[0] && node.arguments[0].type !== 'Literal') {
-          context.report({
-            messageId: 'staticToken',
-            node: node
-          });
-          return;
-        }
-
-        var tokenKey = node.arguments[0].value;
-
-        if (!tokenKey) {
-          return;
-        }
-
-        if (typeof tokenKey === 'string' && tokenKey in renameMapping) {
-          context.report({
-            messageId: 'tokenRenamed',
-            node: node,
-            data: {
-              name: tokenKey
-            },
-            fix: function fix(fixer) {
-              return fixer.replaceText(node.arguments[0], "'".concat(renameMapping[tokenKey], "'"));
-            }
-          });
-          return;
-        }
-
-        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey]) {
-          context.report({
-            messageId: 'invalidToken',
-            node: node,
-            data: {
-              name: tokenKey.toString()
-            }
-          });
-          return;
-        }
-      },
       JSXAttribute: function JSXAttribute(node) {
         if (!node.value) {
           return;

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

@@ -0,0 +1,148 @@
+import renameMapping from '@atlaskit/tokens/rename-mapping';
+import tokens from '@atlaskit/tokens/token-names';
+import { isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute } from '../utils/is-node';
+import { isToken } from '../utils/is-token';
+var defaultConfig = {
+  shouldEnforceFallbacks: false
+};
+var rule = {
+  meta: {
+    docs: {
+      recommended: true
+    },
+    fixable: 'code',
+    type: 'problem',
+    messages: {
+      directTokenUsage: "Access the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('{{tokenKey}}');\n```\n",
+      staticToken: "Token string should be inlined directly into the function call.\n\n```\ntoken('color.background.blanket');\n```\n",
+      invalidToken: 'The token "{{name}}" does not exist.',
+      tokenRenamed: 'The token "{{name}}" has been renamed.',
+      tokenFallbackEnforced: "Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.\n\n```\ntoken('color.background.blanket', N500A);\n```\n      ",
+      tokenFallbackRestricted: "Token function must not use a fallback.\n\n```\ntoken('color.background.blanket');\n```\n      "
+    }
+  },
+  create: function create(context) {
+    var config = context.options[0] || defaultConfig;
+    return {
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        var value = node.quasi.quasis.map(function (q) {
+          return q.value.raw;
+        }).join('');
+        var tokenKey = isToken(value, tokens);
+
+        if (tokenKey) {
+          context.report({
+            messageId: 'directTokenUsage',
+            node: node,
+            data: {
+              tokenKey: tokenKey
+            }
+          });
+          return;
+        }
+      },
+      'ObjectExpression > Property > Literal': function ObjectExpressionPropertyLiteral(node) {
+        if (node.type !== 'Literal') {
+          return;
+        }
+
+        if (typeof node.value !== 'string') {
+          return;
+        }
+
+        if (!isDecendantOfStyleBlock(node) && !isDecendantOfStyleJsxAttribute(node)) {
+          return;
+        }
+
+        var tokenKey = isToken(node.value, tokens);
+        var isCSSVar = node.value.startsWith('var(');
+
+        if (tokenKey) {
+          context.report({
+            messageId: 'directTokenUsage',
+            node: node,
+            data: {
+              tokenKey: tokenKey
+            },
+            fix: function fix(fixer) {
+              return isCSSVar ? fixer.replaceText(node, "token('".concat(tokenKey, "')")) : null;
+            }
+          });
+          return;
+        }
+      },
+      'CallExpression[callee.name="token"]': function CallExpressionCalleeNameToken(node) {
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (node.arguments.length < 2 && config.shouldEnforceFallbacks === true) {
+          context.report({
+            messageId: 'tokenFallbackEnforced',
+            node: node
+          });
+        } else if (node.arguments.length > 1 && config.shouldEnforceFallbacks === false) {
+          if (node.arguments[0].type === 'Literal') {
+            var value = node.arguments[0].value;
+            context.report({
+              messageId: 'tokenFallbackRestricted',
+              node: node.arguments[1],
+              fix: function fix(fixer) {
+                return fixer.replaceText(node, "token('".concat(value, "')"));
+              }
+            });
+          } else {
+            context.report({
+              messageId: 'tokenFallbackRestricted',
+              node: node.arguments[1]
+            });
+          }
+        }
+
+        if (node.arguments[0] && node.arguments[0].type !== 'Literal') {
+          context.report({
+            messageId: 'staticToken',
+            node: node
+          });
+          return;
+        }
+
+        var tokenKey = node.arguments[0].value;
+
+        if (!tokenKey) {
+          return;
+        }
+
+        if (typeof tokenKey === 'string' && tokenKey in renameMapping) {
+          context.report({
+            messageId: 'tokenRenamed',
+            node: node,
+            data: {
+              name: tokenKey
+            },
+            fix: function fix(fixer) {
+              return fixer.replaceText(node.arguments[0], "'".concat(renameMapping[tokenKey], "'"));
+            }
+          });
+          return;
+        }
+
+        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey]) {
+          context.report({
+            messageId: 'invalidToken',
+            node: node,
+            data: {
+              name: tokenKey.toString()
+            }
+          });
+          return;
+        }
+      }
+    };
+  }
+};
+export default rule;

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export declare const rules: {
     'ensure-design-token-usage': import("eslint").Rule.RuleModule;
+    'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
     'no-deprecated-imports': import("eslint").Rule.RuleModule;
 };
 export declare const configs: {

package/dist/types/rules/no-unsafe-design-token-usage/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -20,19 +20,16 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {
-    "@atlaskit/tokens": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "eslint": "^7.7.0",
     "ts-node": "^10.0.0",
     "tsconfig-paths": "^3.9.0",
     "typescript": "3.9.6"
   },
-  "peerDependencies": {
-    "@atlaskit/tokens": "*"
-  },
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions",
@@ -40,7 +37,10 @@
     },
     "@repo/internal": {
       "design-system": "v1",
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"