@atlaskit/eslint-plugin-design-system 8.37.0 → 8.37.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.37.2
+
+### Patch Changes
+
+- [#80662](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80662) [`4833299b00d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4833299b00d4) - For `no-css-tagged-template-expression` and `no-styled-tagged-template-expression`:
+
+  - When importing from Emotion, stop applying autofixer when the styles contain `!important`.
+  - When importing from any library, stop applying autofixer when a selector contains a tagged template interpolation (previously only styled-components).
+
+- [#81697](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81697) [`cf3483e7e87d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf3483e7e87d) - Adding a missing `license` entry to the `package.json` for this package. This package was already licensed under `Apache-2.0` (see `LICENSE` file), so this change is not changing it's license.
+
+## 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

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/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/index.js

@@ -43,12 +43,11 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
         if (!isUsage(node.tag, references, importSources)) {
           return;
         }
-        var isSC = (0, _isSupportedImport.isStyledComponents)(node.tag, references, importSources);
         context.report({
           messageId: messageId,
           node: node,
           fix: /*#__PURE__*/_regenerator.default.mark(function fix(fixer) {
-            var quasi, source, args, oldCode, withoutQuasi, newCode;
+            var quasi, source, args, oldCode, withoutQuasi, newCode, usesEmotion;
             return _regenerator.default.wrap(function fix$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -95,18 +94,28 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   }
                   return _context.abrupt("return");
                 case 16:
-                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode))) {
-                    _context.next = 18;
+                  // For styles like `position: initial !important`,
+                  // Emotion can give typechecking errors when using object syntax
+                  // due to csstype being overly strict
+                  usesEmotion = (0, _isSupportedImport.isEmotion)(node.tag, references, importSources);
+                  if (!(usesEmotion && !!newCode.match(/!\s*important/gm))) {
+                    _context.next = 19;
                     break;
                   }
                   return _context.abrupt("return");
-                case 18:
-                  _context.next = 20;
+                case 19:
+                  if (!/\$\{.*:[\s]*\{/.test(newCode)) {
+                    _context.next = 21;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 21:
+                  _context.next = 23;
                   return fixer.insertTextBefore(node, newCode);
-                case 20:
-                  _context.next = 22;
+                case 23:
+                  _context.next = 25;
                   return fixer.remove(node);
-                case 22:
+                case 25:
                 case "end":
                   return _context.stop();
               }

package/dist/cjs/rules/utils/is-supported-import.js

@@ -121,7 +121,9 @@ var isStyled = exports.isStyled = isSupportedImportWrapper('styled', ['styled-co
 var isImportedFrom = exports.isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.includes(moduleName)) {
+    if (!importSources.some(function (importSource) {
+      return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
+    })) {
       // Don't go through the trouble of checking the import sources does not include this
       // We'll assume this is skipped elsewhere.
       return false;

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/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/index.js

@@ -1,7 +1,7 @@
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { getImportSources, isStyledComponents } from '../is-supported-import';
+import { getImportSources, isEmotion } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -35,7 +35,6 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
       if (!isUsage(node.tag, references, importSources)) {
         return;
       }
-      const isSC = isStyledComponents(node.tag, references, importSources);
       context.report({
         messageId,
         node,
@@ -77,12 +76,22 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
             return;
           }
 
-          // TODO: We might want to similarly disallow `styled.div({ color: props => props.color })` for SC as it's broken too (both type and functionality)
-          // Alternatively, autofix it to `styled.div(props => ({ color: props.color }))`?
-          if (isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode)) {
+          // For styles like `position: initial !important`,
+          // Emotion can give typechecking errors when using object syntax
+          // due to csstype being overly strict
+          const usesEmotion = isEmotion(node.tag, references, importSources);
+          if (usesEmotion && !!newCode.match(/!\s*important/gm)) {
+            return;
+          }
+
+          // For styled-components, we might also want to similarly disallow or autofix `styled.div({ color: props => props.color })` as it's broken too (both type and functionality). This is tracked in https://product-fabric.atlassian.net/browse/USS-26.
+          if (/\$\{.*:[\s]*\{/.test(newCode)) {
             /**
-             * If we find a variable in a selector when migrating `styled-components` code, we skip it.
-             * This is because `styled-components@3.x` does not support the syntax.
+             * If we find a variable in a selector, we skip it. There are two reasons:
+             *
+             * - `styled-components@3.x` does not support variables in a selector (see the first example).
+             *
+             * - We cannot guarantee that the contents of an function call is actually a selector, and not a CSS block (see the third example).
              *
              * @examples
              * ```tsx
@@ -90,11 +99,21 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
              *   & + ${Button} { color: red; }
              * `;
              * ```
-             *```tsx
+             *
+             * ```tsx
              * const Component = styled.div`
              *   ${mixin()} button { color: red; }
              * `;
              * ```
+             *
+             * ```tsx
+             * const styles = `&:active { color: blue; }`;
+             * const Component = styled.div`
+             *   ${styles} &:hover {
+             *     color: red;
+             *   }
+             * `;
+             * ```
              */
             return;
           }

package/dist/es2019/rules/utils/is-supported-import.js

@@ -110,7 +110,7 @@ export const isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 export const isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
 export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope, importSources) => {
-  if (!importSources.includes(moduleName)) {
+  if (!importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
     // Don't go through the trouble of checking the import sources does not include this
     // We'll assume this is skipped elsewhere.
     return false;

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/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/index.js

@@ -2,7 +2,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { getImportSources, isStyledComponents } from '../is-supported-import';
+import { getImportSources, isEmotion } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -36,12 +36,11 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
         if (!isUsage(node.tag, references, importSources)) {
           return;
         }
-        var isSC = isStyledComponents(node.tag, references, importSources);
         context.report({
           messageId: messageId,
           node: node,
           fix: /*#__PURE__*/_regeneratorRuntime.mark(function fix(fixer) {
-            var quasi, source, args, oldCode, withoutQuasi, newCode;
+            var quasi, source, args, oldCode, withoutQuasi, newCode, usesEmotion;
             return _regeneratorRuntime.wrap(function fix$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -88,18 +87,28 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   }
                   return _context.abrupt("return");
                 case 16:
-                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode))) {
-                    _context.next = 18;
+                  // For styles like `position: initial !important`,
+                  // Emotion can give typechecking errors when using object syntax
+                  // due to csstype being overly strict
+                  usesEmotion = isEmotion(node.tag, references, importSources);
+                  if (!(usesEmotion && !!newCode.match(/!\s*important/gm))) {
+                    _context.next = 19;
                     break;
                   }
                   return _context.abrupt("return");
-                case 18:
-                  _context.next = 20;
+                case 19:
+                  if (!/\$\{.*:[\s]*\{/.test(newCode)) {
+                    _context.next = 21;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 21:
+                  _context.next = 23;
                   return fixer.insertTextBefore(node, newCode);
-                case 20:
-                  _context.next = 22;
+                case 23:
+                  _context.next = 25;
                   return fixer.remove(node);
-                case 22:
+                case 25:
                 case "end":
                   return _context.stop();
               }

package/dist/esm/rules/utils/is-supported-import.js

@@ -115,7 +115,9 @@ export var isStyled = isSupportedImportWrapper('styled', ['styled-components', '
 export var isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.includes(moduleName)) {
+    if (!importSources.some(function (importSource) {
+      return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
+    })) {
       // Don't go through the trouble of checking the import sources does not include this
       // We'll assume this is skipped elsewhere.
       return false;

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,8 +1,9 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.37.0",
+  "version": "8.37.2",
   "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },