@atlaskit/eslint-plugin-design-system 4.13.1 → 4.13.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.13.3
+
+### Patch Changes
+
+- [`4793b01cfcc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4793b01cfcc) - Add an optional `customTokens` configuration option for no-unsafe-design-token-usage
+
+## 4.13.2
+
+### Patch Changes
+
+- [`1a7a2c87797`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a7a2c87797) - @atlaskit/eslint-plugin-design-system now maps values to rem based tokens
+
 ## 4.13.1
 
 ### Patch Changes

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

@@ -23,11 +23,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var pixelsToRems = function pixelsToRems(pixelValueString) {
+  var pixels = (0, _utils.removePixelSuffix)(pixelValueString);
+
+  if (pixels === '0' || pixels === 0) {
+    return pixels;
+  }
+
+  return "".concat(Number(pixels) / 16, "rem");
+};
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.
  * This could be removed in the future.
  */
+
+
 var onlyScaleTokens = _spacingRaw.default.filter(function (token) {
   return token.name.startsWith('spacing.scale.');
 });
@@ -43,14 +54,14 @@ var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token
  */
 
 function pixelValueToSpacingTokenNode(pixelValueString) {
-  var _spacingValueToToken$;
-
+  var remValueString = pixelsToRems(pixelValueString);
+  var token = spacingValueToToken[remValueString];
   return (0, _eslintCodemodUtils.callExpression)({
     callee: (0, _eslintCodemodUtils.identifier)({
       name: 'token'
     }),
     arguments: [(0, _eslintCodemodUtils.literal)({
-      value: "'".concat((_spacingValueToToken$ = spacingValueToToken[pixelValueString]) !== null && _spacingValueToToken$ !== void 0 ? _spacingValueToToken$ : '', "'")
+      value: "'".concat(token !== null && token !== void 0 ? token : '', "'")
     }), (0, _eslintCodemodUtils.literal)("'".concat(pixelValueString, "'"))],
     optional: false
   });
@@ -166,7 +177,8 @@ var rule = {
                 }
 
                 var pixelValueString = "".concat(pixelValue, "px");
-                var tokenName = spacingValueToToken[pixelValueString];
+                var remValueString = pixelsToRems(pixelValueString);
+                var tokenName = spacingValueToToken[remValueString];
 
                 if (!tokenName) {
                   return null;
@@ -298,7 +310,8 @@ var rule = {
                 var replacementValue = values.map(function (value) {
                   var pixelValue = (0, _utils.emToPixels)(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  var tokenName = spacingValueToToken[pixelValueString];
+                  var remValueString = pixelsToRems(pixelValueString);
+                  var tokenName = spacingValueToToken[remValueString];
 
                   if (!tokenName) {
                     return pixelValueString;

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

@@ -41,6 +41,7 @@ var rule = {
   },
   create: function create(context) {
     var config = context.options[0] || defaultConfig;
+    var UNSAFE_ignoreTokens = new Set(config.UNSAFE_ignoreTokens);
     return {
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'TaggedTemplateExpression')) {
@@ -182,7 +183,7 @@ var rule = {
           return;
         }
 
-        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !_tokenNames.default[tokenKey]) {
+        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !_tokenNames.default[tokenKey] && !UNSAFE_ignoreTokens.has(tokenKey)) {
           context.report({
             messageId: 'invalidToken',
             node: node,

package/dist/cjs/version.json

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

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

@@ -1,12 +1,24 @@
 import { callExpression, identifier, isNodeOfType, literal, node as nodeFn, property } from 'eslint-codemod-utils';
 import spacingScale from '@atlaskit/tokens/spacing-raw';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isValidSpacingValue, removePixelSuffix } from './utils';
+
+const pixelsToRems = pixelValueString => {
+  const pixels = removePixelSuffix(pixelValueString);
+
+  if (pixels === '0' || pixels === 0) {
+    return pixels;
+  }
+
+  return `${Number(pixels) / 16}rem`;
+};
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.
  * This could be removed in the future.
  */
 
+
 const onlyScaleTokens = spacingScale.filter(token => token.name.startsWith('spacing.scale.'));
 const spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(token => [token.value, token.name]));
 /**
@@ -17,20 +29,19 @@ const spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(token => [tok
  */
 
 function pixelValueToSpacingTokenNode(pixelValueString) {
-  var _spacingValueToToken$;
-
+  const remValueString = pixelsToRems(pixelValueString);
+  const token = spacingValueToToken[remValueString];
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
     arguments: [literal({
-      value: `'${(_spacingValueToToken$ = spacingValueToToken[pixelValueString]) !== null && _spacingValueToToken$ !== void 0 ? _spacingValueToToken$ : ''}'`
+      value: `'${token !== null && token !== void 0 ? token : ''}'`
     }), literal(`'${pixelValueString}'`)],
     optional: false
   });
 }
 
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isValidSpacingValue } from './utils';
 const rule = {
   meta: {
     type: 'problem',
@@ -140,7 +151,8 @@ const rule = {
                 }
 
                 const pixelValueString = `${pixelValue}px`;
-                const tokenName = spacingValueToToken[pixelValueString];
+                const remValueString = pixelsToRems(pixelValueString);
+                const tokenName = spacingValueToToken[remValueString];
 
                 if (!tokenName) {
                   return null;
@@ -256,7 +268,8 @@ const rule = {
                 const replacementValue = values.map(value => {
                   const pixelValue = emToPixels(value, fontSize);
                   const pixelValueString = `${pixelValue}px`;
-                  const tokenName = spacingValueToToken[pixelValueString];
+                  const remValueString = pixelsToRems(pixelValueString);
+                  const tokenName = spacingValueToToken[remValueString];
 
                   if (!tokenName) {
                     return pixelValueString;

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

@@ -49,6 +49,7 @@ token('color.background.blanket');
 
   create(context) {
     const config = context.options[0] || defaultConfig;
+    const UNSAFE_ignoreTokens = new Set(config.UNSAFE_ignoreTokens);
     return {
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': node => {
         if (!isNodeOfType(node, 'TaggedTemplateExpression')) {
@@ -173,7 +174,7 @@ token('color.background.blanket');
           return;
         }
 
-        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey]) {
+        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey] && !UNSAFE_ignoreTokens.has(tokenKey)) {
           context.report({
             messageId: 'invalidToken',
             node,

package/dist/es2019/version.json

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

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

@@ -8,12 +8,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { callExpression, identifier, isNodeOfType, literal, node as nodeFn, property } from 'eslint-codemod-utils';
 import spacingScale from '@atlaskit/tokens/spacing-raw';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isValidSpacingValue, removePixelSuffix } from './utils';
+
+var pixelsToRems = function pixelsToRems(pixelValueString) {
+  var pixels = removePixelSuffix(pixelValueString);
+
+  if (pixels === '0' || pixels === 0) {
+    return pixels;
+  }
+
+  return "".concat(Number(pixels) / 16, "rem");
+};
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.
  * This could be removed in the future.
  */
 
+
 var onlyScaleTokens = spacingScale.filter(function (token) {
   return token.name.startsWith('spacing.scale.');
 });
@@ -28,20 +40,19 @@ var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token
  */
 
 function pixelValueToSpacingTokenNode(pixelValueString) {
-  var _spacingValueToToken$;
-
+  var remValueString = pixelsToRems(pixelValueString);
+  var token = spacingValueToToken[remValueString];
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
     arguments: [literal({
-      value: "'".concat((_spacingValueToToken$ = spacingValueToToken[pixelValueString]) !== null && _spacingValueToToken$ !== void 0 ? _spacingValueToToken$ : '', "'")
+      value: "'".concat(token !== null && token !== void 0 ? token : '', "'")
     }), literal("'".concat(pixelValueString, "'"))],
     optional: false
   });
 }
 
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isValidSpacingValue } from './utils';
 var rule = {
   meta: {
     type: 'problem',
@@ -152,7 +163,8 @@ var rule = {
                 }
 
                 var pixelValueString = "".concat(pixelValue, "px");
-                var tokenName = spacingValueToToken[pixelValueString];
+                var remValueString = pixelsToRems(pixelValueString);
+                var tokenName = spacingValueToToken[remValueString];
 
                 if (!tokenName) {
                   return null;
@@ -284,7 +296,8 @@ var rule = {
                 var replacementValue = values.map(function (value) {
                   var pixelValue = emToPixels(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  var tokenName = spacingValueToToken[pixelValueString];
+                  var remValueString = pixelsToRems(pixelValueString);
+                  var tokenName = spacingValueToToken[remValueString];
 
                   if (!tokenName) {
                     return pixelValueString;

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

@@ -26,6 +26,7 @@ var rule = {
   },
   create: function create(context) {
     var config = context.options[0] || defaultConfig;
+    var UNSAFE_ignoreTokens = new Set(config.UNSAFE_ignoreTokens);
     return {
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
         if (!isNodeOfType(node, 'TaggedTemplateExpression')) {
@@ -166,7 +167,7 @@ var rule = {
           return;
         }
 
-        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey]) {
+        if (typeof tokenKey !== 'string' || typeof tokenKey === 'string' && !tokens[tokenKey] && !UNSAFE_ignoreTokens.has(tokenKey)) {
           context.report({
             messageId: 'invalidToken',
             node: node,

package/dist/esm/version.json

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

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.13.1",
+  "version": "4.13.3",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"