@atlaskit/eslint-plugin-design-system 8.36.3 → 8.37.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.37.1
+
+### Patch Changes
+
+- [#81307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81307) [`6420f933c8ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6420f933c8ae) - Fix issue where `use-primitives` was incorrectly transforming styles with string properties.
+
+## 8.37.0
+
+### Minor Changes
+
+- [#81166](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81166) [`a249a1bd29a6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a249a1bd29a6) - Upgrade ESLint to version 8
+
 ## 8.36.3
 
 ### Patch Changes

package/dist/cjs/ast-nodes/object-entry.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ObjectEntry = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ObjectEntry = exports.ObjectEntry = {
   deleteEntry: function deleteEntry(node, context, fixer) {
     var _lastToken;
@@ -23,5 +24,17 @@ var ObjectEntry = exports.ObjectEntry = {
       lastToken = sourceCode.getTokenBefore(lastToken);
     }
     return fixer.removeRange([prevToken.range[1], lastToken.range[1]]);
+  },
+  getPropertyName: function getPropertyName(node) {
+    // SpreadElements don't really have a property name
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+      return undefined;
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Literal')) {
+      return node.key.raw;
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
+      return node.key.name;
+    }
   }
 };

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

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/index.js

@@ -10,6 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
 var _utils = require("../../utils");
+var _validateStyles = require("../../utils/validate-styles");
 var _convertJsxCallSite = require("./convert-jsx-call-site");
 var _convertStyledComponentCallToJsx = require("./convert-styled-component-call-to-jsx");
 var _findValidJsxUsageToTransform = require("./find-valid-jsx-usage-to-transform");
@@ -60,7 +61,7 @@ var CompiledStyled = exports.CompiledStyled = {
       };
     }
     var styledComponentVariableRef = (0, _findValidStyledComponentCall.findValidStyledComponentCall)(node);
-    if (!styledComponentVariableRef || !(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef.id, 'Identifier') || !(0, _utils.isValidCssPropertiesToTransform)(node, config)) {
+    if (!styledComponentVariableRef || !(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef.id, 'Identifier') || !(config.patterns.includes('string-style-property-fix') ? (0, _validateStyles.validateStyles)(node, config) : (0, _utils.isValidCssPropertiesToTransform)(node, config))) {
       return {
         success: false
       };

package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js

@@ -10,6 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
 var _utils = require("../../utils");
+var _validateStyles = require("../../utils/validate-styles");
 var _cssToXcss = require("../css-to-xcss");
 var supported = _interopRequireWildcard(require("./supported"));
 var _upsertImportDeclaration = require("./upsert-import-declaration");
@@ -44,7 +45,6 @@ var EmotionCSS = exports.EmotionCSS = {
     });
   },
   _check: function _check(node, _ref2) {
-    var _cssVariableValue$nod, _cssVariableValue$nod2;
     var context = _ref2.context,
       config = _ref2.config;
     if (!config.patterns.includes('compiled-css-function')) {
@@ -91,10 +91,10 @@ var EmotionCSS = exports.EmotionCSS = {
     var cssVariableDefinition = (0, _eslintCodemodUtils.getIdentifierInParentScope)(context.getScope(), cssAttrValue.value);
     var cssVariableValue = (0, _utils.getVariableDefinitionValue)(cssVariableDefinition);
     // Check if `cssVariableValue` is a function called `css()`
-    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 || (_cssVariableValue$nod = cssVariableValue.node) === null || _cssVariableValue$nod === void 0 ? void 0 : _cssVariableValue$nod.init) !== 'css') {
+    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init) !== 'css') {
       return false;
     }
-    if (!(0, _utils.isValidCssPropertiesToTransform)(cssVariableValue === null || cssVariableValue === void 0 || (_cssVariableValue$nod2 = cssVariableValue.node) === null || _cssVariableValue$nod2 === void 0 ? void 0 : _cssVariableValue$nod2.init, config)) {
+    if (!(config.patterns.includes('string-style-property-fix') ? (0, _validateStyles.validateStyles)(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config) : (0, _utils.isValidCssPropertiesToTransform)(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config))) {
       return false;
     }
     var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');

package/dist/cjs/rules/use-primitives/utils/validate-styles.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateStyles = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+var _transformers = require("../transformers");
+var _cssToXcss = require("../transformers/css-to-xcss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var validateStyles = exports.validateStyles = function validateStyles(node, config) {
+  if (!node) {
+    return false;
+  }
+  var cssObjectExpression = node.arguments[0];
+  // Bail on empty object calls
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(cssObjectExpression, 'ObjectExpression')) {
+    return false;
+  }
+  if (!ast.Object.isFlat(cssObjectExpression)) {
+    return false;
+  }
+  var entries = ast.Object.getEntries(cssObjectExpression);
+  if (entries.length === 0) {
+    return false;
+  }
+  if (!config.patterns.includes('multiple-properties') && entries.length > 1) {
+    return false;
+  }
+  return entries.every(function (entry) {
+    // Bail on SpreadElements
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(entry, 'Property')) {
+      return false;
+    }
+    var key = entry.key,
+      value = entry.value;
+
+    // Bail if the property is not something we understand, e.g. `{ [SOME_CONSTANT]: '8px' }`
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(key, 'Identifier')) {
+      return false;
+    }
+    var property = ast.ObjectEntry.getPropertyName(entry);
+    if (!property) {
+      return false;
+    }
+
+    // Currently, we handle values like `'8px'` (a 'Literal') or `token('space.100')` (a 'CallExpression')
+    if ((0, _eslintCodemodUtils.isNodeOfType)(value, 'Literal')) {
+      if (!value.value) {
+        return false;
+      }
+      var valueString = value.value.toString();
+      if (!_transformers.supportedStylesMap[property] || !_transformers.supportedStylesMap[property][valueString]) {
+        return false;
+      }
+    } else if ((0, _eslintCodemodUtils.isNodeOfType)(value, 'CallExpression')) {
+      // If it's a function call, then make sure it's the `token` function (and we have `css-property-with-tokens` enabled)
+
+      // Short-circuit when token calls are found but pattern is not enabled in config
+      if (isTokenCall(value) && !config.patterns.includes('css-property-with-tokens')) {
+        return false;
+      }
+
+      // Bail if it's a function, but that function call is not `tokens('<token>')`
+      if (!isTokenCall(value)) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+
+    // Bail if dimension property is found but pattern is not enabled in config
+    // Note: We don't need to exhaustively re-check the key/value pair here. That's already been done above.
+    // This is just to check wether 'dimension-properties' pattern is enabled and can be removed when the pattern is completely rolled out
+    var isDimensionProperty = !!_cssToXcss.supportedDimensionAttributesMap[property];
+    if (isDimensionProperty && !config.patterns.includes('dimension-properties')) {
+      return false;
+    }
+    return true;
+  });
+};
+var isTokenCall = function isTokenCall(node) {
+  // Is it a function call?
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+    return false;
+  }
+
+  // Is the function called 'token'?
+  if (ast.FunctionCall.getName(node) !== 'token') {
+    return false;
+  }
+  var token = ast.FunctionCall.getArgumentAtPos(node, 0);
+  var fallback = ast.FunctionCall.getArgumentAtPos(node, 1);
+  if (!token || token.type !== 'Literal') {
+    return false;
+  }
+
+  // Is the token one that we understand
+  if (!Object.values(_transformers.spaceTokenMap).includes(token.value)) {
+    return false;
+  }
+
+  // Not all `token()` calls have a fall back. This is fine, but if there is a fallback, make sure it's the same as the fallback xcss will use
+  if (fallback && fallback.type === 'Literal') {
+    if (_transformers.spaceTokenMap[fallback.value] !== token.value) {
+      return false;
+    }
+  }
+  return true;
+};

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/dist/es2019/ast-nodes/object-entry.js

@@ -1,3 +1,4 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
 const ObjectEntry = {
   deleteEntry(node, context, fixer) {
     var _lastToken;
@@ -17,6 +18,18 @@ const ObjectEntry = {
       lastToken = sourceCode.getTokenBefore(lastToken);
     }
     return fixer.removeRange([prevToken.range[1], lastToken.range[1]]);
+  },
+  getPropertyName(node) {
+    // SpreadElements don't really have a property name
+    if (!isNodeOfType(node, 'Property')) {
+      return undefined;
+    }
+    if (isNodeOfType(node.key, 'Literal')) {
+      return node.key.raw;
+    }
+    if (isNodeOfType(node.key, 'Identifier')) {
+      return node.key.name;
+    }
   }
 };
 export { ObjectEntry };

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

@@ -1 +0,0 @@
-export {};

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/index.js

@@ -3,6 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../../ast-nodes';
 import { isValidCssPropertiesToTransform } from '../../utils';
+import { validateStyles } from '../../utils/validate-styles';
 import { convertJsxCallSite } from './convert-jsx-call-site';
 import { convertStyledComponentToXcss } from './convert-styled-component-call-to-jsx';
 import { findValidJsxUsageToTransform } from './find-valid-jsx-usage-to-transform';
@@ -52,7 +53,7 @@ export const CompiledStyled = {
       };
     }
     const styledComponentVariableRef = findValidStyledComponentCall(node);
-    if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
+    if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !(config.patterns.includes('string-style-property-fix') ? validateStyles(node, config) : isValidCssPropertiesToTransform(node, config))) {
       return {
         success: false
       };

package/dist/es2019/rules/use-primitives/transformers/emotion-css/index.js

@@ -3,6 +3,7 @@
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../../ast-nodes';
 import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertiesToTransform } from '../../utils';
+import { validateStyles } from '../../utils/validate-styles';
 import { cssToXcssTransformer } from '../css-to-xcss';
 import * as supported from './supported';
 import { upsertImportDeclaration } from './upsert-import-declaration';
@@ -37,7 +38,6 @@ export const EmotionCSS = {
     context,
     config
   }) {
-    var _cssVariableValue$nod, _cssVariableValue$nod2;
     if (!config.patterns.includes('compiled-css-function')) {
       return false;
     }
@@ -82,10 +82,10 @@ export const EmotionCSS = {
     const cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssAttrValue.value);
     const cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
     // Check if `cssVariableValue` is a function called `css()`
-    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : (_cssVariableValue$nod = cssVariableValue.node) === null || _cssVariableValue$nod === void 0 ? void 0 : _cssVariableValue$nod.init) !== 'css') {
+    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init) !== 'css') {
       return false;
     }
-    if (!isValidCssPropertiesToTransform(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : (_cssVariableValue$nod2 = cssVariableValue.node) === null || _cssVariableValue$nod2 === void 0 ? void 0 : _cssVariableValue$nod2.init, config)) {
+    if (!(config.patterns.includes('string-style-property-fix') ? validateStyles(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config) : isValidCssPropertiesToTransform(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config))) {
       return false;
     }
     const importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');

package/dist/es2019/rules/use-primitives/utils/validate-styles.js

@@ -0,0 +1,106 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { spaceTokenMap, supportedStylesMap } from '../transformers';
+import { supportedDimensionAttributesMap } from '../transformers/css-to-xcss';
+export const validateStyles = (node, config) => {
+  if (!node) {
+    return false;
+  }
+  const cssObjectExpression = node.arguments[0];
+  // Bail on empty object calls
+  if (!isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
+    return false;
+  }
+  if (!ast.Object.isFlat(cssObjectExpression)) {
+    return false;
+  }
+  const entries = ast.Object.getEntries(cssObjectExpression);
+  if (entries.length === 0) {
+    return false;
+  }
+  if (!config.patterns.includes('multiple-properties') && entries.length > 1) {
+    return false;
+  }
+  return entries.every(entry => {
+    // Bail on SpreadElements
+    if (!isNodeOfType(entry, 'Property')) {
+      return false;
+    }
+    const {
+      key,
+      value
+    } = entry;
+
+    // Bail if the property is not something we understand, e.g. `{ [SOME_CONSTANT]: '8px' }`
+    if (!isNodeOfType(key, 'Identifier')) {
+      return false;
+    }
+    const property = ast.ObjectEntry.getPropertyName(entry);
+    if (!property) {
+      return false;
+    }
+
+    // Currently, we handle values like `'8px'` (a 'Literal') or `token('space.100')` (a 'CallExpression')
+    if (isNodeOfType(value, 'Literal')) {
+      if (!value.value) {
+        return false;
+      }
+      const valueString = value.value.toString();
+      if (!supportedStylesMap[property] || !supportedStylesMap[property][valueString]) {
+        return false;
+      }
+    } else if (isNodeOfType(value, 'CallExpression')) {
+      // If it's a function call, then make sure it's the `token` function (and we have `css-property-with-tokens` enabled)
+
+      // Short-circuit when token calls are found but pattern is not enabled in config
+      if (isTokenCall(value) && !config.patterns.includes('css-property-with-tokens')) {
+        return false;
+      }
+
+      // Bail if it's a function, but that function call is not `tokens('<token>')`
+      if (!isTokenCall(value)) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+
+    // Bail if dimension property is found but pattern is not enabled in config
+    // Note: We don't need to exhaustively re-check the key/value pair here. That's already been done above.
+    // This is just to check wether 'dimension-properties' pattern is enabled and can be removed when the pattern is completely rolled out
+    const isDimensionProperty = !!supportedDimensionAttributesMap[property];
+    if (isDimensionProperty && !config.patterns.includes('dimension-properties')) {
+      return false;
+    }
+    return true;
+  });
+};
+const isTokenCall = node => {
+  // Is it a function call?
+  if (!isNodeOfType(node, 'CallExpression')) {
+    return false;
+  }
+
+  // Is the function called 'token'?
+  if (ast.FunctionCall.getName(node) !== 'token') {
+    return false;
+  }
+  const token = ast.FunctionCall.getArgumentAtPos(node, 0);
+  const fallback = ast.FunctionCall.getArgumentAtPos(node, 1);
+  if (!token || token.type !== 'Literal') {
+    return false;
+  }
+
+  // Is the token one that we understand
+  if (!Object.values(spaceTokenMap).includes(token.value)) {
+    return false;
+  }
+
+  // Not all `token()` calls have a fall back. This is fine, but if there is a fallback, make sure it's the same as the fallback xcss will use
+  if (fallback && fallback.type === 'Literal') {
+    if (spaceTokenMap[fallback.value] !== token.value) {
+      return false;
+    }
+  }
+  return true;
+};

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/ast-nodes/object-entry.js

@@ -1,3 +1,4 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
 var ObjectEntry = {
   deleteEntry: function deleteEntry(node, context, fixer) {
     var _lastToken;
@@ -17,6 +18,18 @@ var ObjectEntry = {
       lastToken = sourceCode.getTokenBefore(lastToken);
     }
     return fixer.removeRange([prevToken.range[1], lastToken.range[1]]);
+  },
+  getPropertyName: function getPropertyName(node) {
+    // SpreadElements don't really have a property name
+    if (!isNodeOfType(node, 'Property')) {
+      return undefined;
+    }
+    if (isNodeOfType(node.key, 'Literal')) {
+      return node.key.raw;
+    }
+    if (isNodeOfType(node.key, 'Identifier')) {
+      return node.key.name;
+    }
   }
 };
 export { ObjectEntry };

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

@@ -1 +0,0 @@
-export {};

package/dist/esm/rules/use-primitives/transformers/compiled-styled/index.js

@@ -4,6 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../../ast-nodes';
 import { isValidCssPropertiesToTransform } from '../../utils';
+import { validateStyles } from '../../utils/validate-styles';
 import { convertJsxCallSite } from './convert-jsx-call-site';
 import { convertStyledComponentToXcss } from './convert-styled-component-call-to-jsx';
 import { findValidJsxUsageToTransform } from './find-valid-jsx-usage-to-transform';
@@ -50,7 +51,7 @@ export var CompiledStyled = {
       };
     }
     var styledComponentVariableRef = findValidStyledComponentCall(node);
-    if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
+    if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !(config.patterns.includes('string-style-property-fix') ? validateStyles(node, config) : isValidCssPropertiesToTransform(node, config))) {
       return {
         success: false
       };

package/dist/esm/rules/use-primitives/transformers/emotion-css/index.js

@@ -4,6 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../../ast-nodes';
 import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertiesToTransform } from '../../utils';
+import { validateStyles } from '../../utils/validate-styles';
 import { cssToXcssTransformer } from '../css-to-xcss';
 import * as supported from './supported';
 import { upsertImportDeclaration } from './upsert-import-declaration';
@@ -34,7 +35,6 @@ export var EmotionCSS = {
     });
   },
   _check: function _check(node, _ref2) {
-    var _cssVariableValue$nod, _cssVariableValue$nod2;
     var context = _ref2.context,
       config = _ref2.config;
     if (!config.patterns.includes('compiled-css-function')) {
@@ -81,10 +81,10 @@ export var EmotionCSS = {
     var cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssAttrValue.value);
     var cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
     // Check if `cssVariableValue` is a function called `css()`
-    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 || (_cssVariableValue$nod = cssVariableValue.node) === null || _cssVariableValue$nod === void 0 ? void 0 : _cssVariableValue$nod.init) !== 'css') {
+    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init) !== 'css') {
       return false;
     }
-    if (!isValidCssPropertiesToTransform(cssVariableValue === null || cssVariableValue === void 0 || (_cssVariableValue$nod2 = cssVariableValue.node) === null || _cssVariableValue$nod2 === void 0 ? void 0 : _cssVariableValue$nod2.init, config)) {
+    if (!(config.patterns.includes('string-style-property-fix') ? validateStyles(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config) : isValidCssPropertiesToTransform(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config))) {
       return false;
     }
     var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');

package/dist/esm/rules/use-primitives/utils/validate-styles.js

@@ -0,0 +1,104 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { spaceTokenMap, supportedStylesMap } from '../transformers';
+import { supportedDimensionAttributesMap } from '../transformers/css-to-xcss';
+export var validateStyles = function validateStyles(node, config) {
+  if (!node) {
+    return false;
+  }
+  var cssObjectExpression = node.arguments[0];
+  // Bail on empty object calls
+  if (!isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
+    return false;
+  }
+  if (!ast.Object.isFlat(cssObjectExpression)) {
+    return false;
+  }
+  var entries = ast.Object.getEntries(cssObjectExpression);
+  if (entries.length === 0) {
+    return false;
+  }
+  if (!config.patterns.includes('multiple-properties') && entries.length > 1) {
+    return false;
+  }
+  return entries.every(function (entry) {
+    // Bail on SpreadElements
+    if (!isNodeOfType(entry, 'Property')) {
+      return false;
+    }
+    var key = entry.key,
+      value = entry.value;
+
+    // Bail if the property is not something we understand, e.g. `{ [SOME_CONSTANT]: '8px' }`
+    if (!isNodeOfType(key, 'Identifier')) {
+      return false;
+    }
+    var property = ast.ObjectEntry.getPropertyName(entry);
+    if (!property) {
+      return false;
+    }
+
+    // Currently, we handle values like `'8px'` (a 'Literal') or `token('space.100')` (a 'CallExpression')
+    if (isNodeOfType(value, 'Literal')) {
+      if (!value.value) {
+        return false;
+      }
+      var valueString = value.value.toString();
+      if (!supportedStylesMap[property] || !supportedStylesMap[property][valueString]) {
+        return false;
+      }
+    } else if (isNodeOfType(value, 'CallExpression')) {
+      // If it's a function call, then make sure it's the `token` function (and we have `css-property-with-tokens` enabled)
+
+      // Short-circuit when token calls are found but pattern is not enabled in config
+      if (isTokenCall(value) && !config.patterns.includes('css-property-with-tokens')) {
+        return false;
+      }
+
+      // Bail if it's a function, but that function call is not `tokens('<token>')`
+      if (!isTokenCall(value)) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+
+    // Bail if dimension property is found but pattern is not enabled in config
+    // Note: We don't need to exhaustively re-check the key/value pair here. That's already been done above.
+    // This is just to check wether 'dimension-properties' pattern is enabled and can be removed when the pattern is completely rolled out
+    var isDimensionProperty = !!supportedDimensionAttributesMap[property];
+    if (isDimensionProperty && !config.patterns.includes('dimension-properties')) {
+      return false;
+    }
+    return true;
+  });
+};
+var isTokenCall = function isTokenCall(node) {
+  // Is it a function call?
+  if (!isNodeOfType(node, 'CallExpression')) {
+    return false;
+  }
+
+  // Is the function called 'token'?
+  if (ast.FunctionCall.getName(node) !== 'token') {
+    return false;
+  }
+  var token = ast.FunctionCall.getArgumentAtPos(node, 0);
+  var fallback = ast.FunctionCall.getArgumentAtPos(node, 1);
+  if (!token || token.type !== 'Literal') {
+    return false;
+  }
+
+  // Is the token one that we understand
+  if (!Object.values(spaceTokenMap).includes(token.value)) {
+    return false;
+  }
+
+  // Not all `token()` calls have a fall back. This is fine, but if there is a fallback, make sure it's the same as the fallback xcss will use
+  if (fallback && fallback.type === 'Literal') {
+    if (spaceTokenMap[fallback.value] !== token.value) {
+      return false;
+    }
+  }
+  return true;
+};

package/dist/esm/rules/utils/create-no-tagged-template-expression-rule/types.js

@@ -1 +0,0 @@
-export {};

package/dist/types/ast-nodes/object-entry.d.ts

@@ -1,6 +1,7 @@
 import type { Rule } from 'eslint';
-import type { Property, SpreadElement } from 'eslint-codemod-utils';
+import { Property, SpreadElement } from 'eslint-codemod-utils';
 declare const ObjectEntry: {
     deleteEntry(node: Property | SpreadElement, context: Rule.RuleContext, fixer: Rule.RuleFixer): Rule.Fix;
+    getPropertyName(node: Property | SpreadElement): string | undefined;
 };
 export { ObjectEntry };

package/dist/types/rules/use-primitives/config/index.d.ts

@@ -1,4 +1,4 @@
-type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties' | 'dimension-properties' | 'jsx-order-fix';
+type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties' | 'dimension-properties' | 'jsx-order-fix' | 'string-style-property-fix';
 export interface RuleConfig {
     patterns: Pattern[];
 }

package/dist/types/rules/use-primitives/utils/validate-styles.d.ts

@@ -0,0 +1,3 @@
+import { CallExpression } from 'eslint-codemod-utils';
+import { RuleConfig } from '../config';
+export declare const validateStyles: (node: CallExpression, config: RuleConfig) => boolean;

package/dist/types-ts4.5/ast-nodes/object-entry.d.ts

@@ -1,6 +1,7 @@
 import type { Rule } from 'eslint';
-import type { Property, SpreadElement } from 'eslint-codemod-utils';
+import { Property, SpreadElement } from 'eslint-codemod-utils';
 declare const ObjectEntry: {
     deleteEntry(node: Property | SpreadElement, context: Rule.RuleContext, fixer: Rule.RuleFixer): Rule.Fix;
+    getPropertyName(node: Property | SpreadElement): string | undefined;
 };
 export { ObjectEntry };

package/dist/types-ts4.5/rules/use-primitives/config/index.d.ts

@@ -1,4 +1,4 @@
-type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties' | 'dimension-properties' | 'jsx-order-fix';
+type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties' | 'dimension-properties' | 'jsx-order-fix' | 'string-style-property-fix';
 export interface RuleConfig {
     patterns: Pattern[];
 }

package/dist/types-ts4.5/rules/use-primitives/utils/validate-styles.d.ts

@@ -0,0 +1,3 @@
+import { CallExpression } from 'eslint-codemod-utils';
+import { RuleConfig } from '../config';
+export declare const validateStyles: (node: CallExpression, config: RuleConfig) => boolean;

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": "8.36.3",
+  "version": "8.37.1",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -50,12 +50,12 @@
     "@atlaskit/theme": "^12.6.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "*",
-    "@atlassian/eslint-utils": "^0.3.0",
+    "@atlassian/eslint-utils": "^0.4.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",
     "@types/eslint": "^8.4.5",
     "@types/estraverse": "^5.1.7",
-    "eslint": "^7.7.0",
+    "eslint": "^8.49.0",
     "jscodeshift": "^0.13.0",
     "outdent": "^0.5.0",
     "prettier": "^2.8.0",