@atlaskit/eslint-plugin-design-system 8.36.0 → 8.36.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.36.2
+
+### Patch Changes
+
+- [#80471](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80471) [`bf21a3bfe85e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf21a3bfe85e) - Add `autoFixNames` option to `consistent-css-prop-usage`. When set to false, the autofix naming that enforces style variables ending in the word "Styles" will be turned off. True by default.
+- [#80469](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80469) [`0b4b7268ef16`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0b4b7268ef16) - Fixed an issue with `ensure-design-token-usage` where styles inside xcss could be incorrectly linted against.
+- [#80518](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80518) [`0f90b6e17490`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0f90b6e17490) - Ignore function-like interpolations in selectors for `no-css-tagged-template-expression`, `no-styled-…`, and `no-keyframes-…`
+
+## 8.36.1
+
+### Patch Changes
+
+- [#79810](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79810) [`8c6e96aa3cf0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8c6e96aa3cf0) - Fixed an issue with `ensure-design-token-usage` where color props on primitive components could report an error.
+
 ## 8.36.0
 
 ### Minor Changes

package/constellation/consistent-css-prop-usage/usage.mdx

@@ -181,13 +181,23 @@ Whether to exclude `css` attributes of React components from being affected by t
 
 This is `false` by default.
 
-### fixNamesOnly
+### autoFixNames
 
-When enabled, this rule will only add `styles` at the end of existing style variables. All other autofixers will be disabled. For example:
+When set to `true`, this rule will _turn on_ an autofixer that adds `Styles` at the end of existing style variables.
 
 ```tsx
 //    vvvvv will be renamed to `myCssStyles`
 const myCss = { color: 'blue' };
 ```
 
+Note that when hoisting styles, the name of the newly created style variable follows its own naming scheme (`styles`, `styles_1`, `styles_2`, ...) and is not affected by the value of `autoFixNames`.
+
+This is `true` by default.
+
+### fixNamesOnly
+
+When set to `true`, this rule will _turn off_ all autofixers other than the autofixer adding `Styles` to the end of existing style variables (which is controlled by `autoFixNames`). In other words, styles will no longer be hoisted and styles will no longer be wrapped in a `css`/`xcss` function call.
+
 This is `false` by default.
+
+If `autoFixNames` is `false` and `fixNamesOnly` is `true`, all autofixers will be turned off.

package/dist/cjs/rules/consistent-css-prop-usage/index.js

@@ -455,7 +455,8 @@ var defaultConfig = {
   cssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false
+  fixNamesOnly: false,
+  autoFixNames: true
 };
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -499,6 +500,9 @@ var rule = (0, _createRule.createLintRule)({
         excludeReactComponents: {
           type: 'boolean'
         },
+        autoFixNames: {
+          type: 'boolean'
+        },
         fixNamesOnly: {
           type: 'boolean'
         }
@@ -524,6 +528,9 @@ var rule = (0, _createRule.createLintRule)({
         // Already prefixed! Nothing to do.
         return;
       }
+      if (!mergedConfig.autoFixNames) {
+        return;
+      }
       context.report({
         node: identifier,
         messageId: 'shouldEndInStyles',

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

@@ -143,6 +143,11 @@ var lintJSXLiteralForColor = exports.lintJSXLiteralForColor = function lintJSXLi
   if ((0, _isNode.isDecendantOfSvgElement)(node.parent)) {
     return;
   }
+
+  // Box backgroundColor prop accepts token names directly - don't lint against this
+  if ((0, _isNode.isDecendantOfPrimitive)(node.parent, context)) {
+    return;
+  }
   if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
     return;
   }

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

@@ -73,6 +73,9 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
           if (parentNode.parent.type === 'Property') {
             return;
           }
+          if ((0, _isNode.isDecendantOfXcssBlock)(parentNode)) {
+            return;
+          }
           if (!(0, _isNode.isDecendantOfStyleBlock)(parentNode) && !(0, _isNode.isDecendantOfType)(parentNode, 'JSXExpressionContainer')) {
             return;
           }

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

@@ -24,7 +24,6 @@ var radiusValueToToken = exports.radiusValueToToken = Object.fromEntries(_tokens
 }).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
 .concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
 );
-
 var borderWidthValueToToken = exports.borderWidthValueToToken = Object.fromEntries(_tokensRaw.shape.filter(function (t) {
   return t.name.startsWith('border.width');
 }).map(function (t) {

package/dist/cjs/rules/no-deprecated-imports/index.js

@@ -12,31 +12,31 @@ var _types = require("../utils/types");
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /**
-                                                                                                                                                                                     * Forked from original `no-restricted-imports` although the source has been substantially changed.
-                                                                                                                                                                                     *
-                                                                                                                                                                                     * To ensure compliance the license from eslint has been included and the original attribution.
-                                                                                                                                                                                     * @author Guy Ellis
-                                                                                                                                                                                     *
-                                                                                                                                                                                     * Copyright OpenJS Foundation and other contributors, <www.openjsf.org>
-                                                                                                                                                                                     *
-                                                                                                                                                                                     * Permission is hereby granted, free of charge, to any person obtaining a copy
-                                                                                                                                                                                     * of this software and associated documentation files (the "Software"), to deal
-                                                                                                                                                                                     * in the Software without restriction, including without limitation the rights
-                                                                                                                                                                                     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-                                                                                                                                                                                     * copies of the Software, and to permit persons to whom the Software is
-                                                                                                                                                                                     * furnished to do so, subject to the following conditions:
-                                                                                                                                                                                     *
-                                                                                                                                                                                     * The above copyright notice and this permission notice shall be included in
-                                                                                                                                                                                     * all copies or substantial portions of the Software.
-                                                                                                                                                                                     *
-                                                                                                                                                                                     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-                                                                                                                                                                                     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-                                                                                                                                                                                     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-                                                                                                                                                                                     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-                                                                                                                                                                                     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-                                                                                                                                                                                     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-                                                                                                                                                                                     * THE SOFTWARE.
-                                                                                                                                                                                     */
+ * Forked from original `no-restricted-imports` although the source has been substantially changed.
+ *
+ * To ensure compliance the license from eslint has been included and the original attribution.
+ * @author Guy Ellis
+ *
+ * Copyright OpenJS Foundation and other contributors, <www.openjsf.org>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
 var name = exports.name = 'no-deprecated-imports';
 var importNameWithCustomMessageId = exports.importNameWithCustomMessageId = 'importNameWithCustomMessage';
 var pathWithCustomMessageId = exports.pathWithCustomMessageId = 'pathWithCustomMessage';

package/dist/cjs/rules/prefer-primitives/index.js

@@ -83,7 +83,6 @@ var rule = (0, _createRule.createLintRule)({
           if (typeof argValue === 'string') {
             var suggest = _utils.validPrimitiveElements.has(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
             );
-
             if (suggest) {
               var styledIdentifier = node.callee.name;
               var elementName = argValue;

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/convert-jsx-call-site.js

@@ -9,8 +9,8 @@ exports.convertJsxCallSite = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /**
  * Transforms a JSXElement from:
  * ```

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/find-valid-styled-component-call.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.findValidStyledComponentCall = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var supported = _interopRequireWildcard(require("./supported"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /**
  * returns a variable reference if preconditions are favourable for
  * the transformation to proceed, undefined otherwise.

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

@@ -15,8 +15,8 @@ var _convertStyledComponentCallToJsx = require("./convert-styled-component-call-
 var _findValidJsxUsageToTransform = require("./find-valid-jsx-usage-to-transform");
 var _findValidStyledComponentCall = require("./find-valid-styled-component-call");
 var _upsertImportDeclaration = require("./upsert-import-declaration");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var CompiledStyled = exports.CompiledStyled = {

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/upsert-import-declaration.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.upsertImportDeclaration = void 0;
 var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /**
  * Currently this is defined here because it's not very general purpose.
  * If we were to move this to `ast-nodes`, half the implementation would be in `Root`,

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

@@ -13,8 +13,8 @@ var _utils = require("../../utils");
 var _cssToXcss = require("../css-to-xcss");
 var supported = _interopRequireWildcard(require("./supported"));
 var _upsertImportDeclaration = require("./upsert-import-declaration");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var EmotionCSS = exports.EmotionCSS = {

package/dist/cjs/rules/use-primitives/transformers/emotion-css/upsert-import-declaration.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.upsertImportDeclaration = void 0;
 var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /**
  * Currently this is defined here because it's not very general purpose.
  * If we were to move this to `ast-nodes`, half the implementation would be in `Root`,

package/dist/cjs/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -13,8 +13,8 @@ var ast = _interopRequireWildcard(require("../../../ast-nodes"));
 var _cssToXcss = require("../transformers/css-to-xcss");
 var _convertAstObjectExpressionToJsObject = require("./convert-ast-object-expression-to-js-object");
 var _excluded = ["unsupported"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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" != _typeof3(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 isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
   if (!node) {
     return false;
@@ -80,7 +80,6 @@ var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform =
       ;
     }
   });
-
   if (!containsOnlyValidStyles) {
     return false;
   }

package/dist/cjs/rules/use-primitives-text/transformers/common.js

@@ -10,8 +10,8 @@ exports.hasTextChildrenOnly = hasTextChildrenOnly;
 exports.updateTestIdAttributeFix = updateTestIdAttributeFix;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 // Rename data-testid prop to testId if present
 function updateTestIdAttributeFix(node, fixer) {
   var testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');

package/dist/cjs/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -11,8 +11,8 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
 var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var EmphasisElements = exports.EmphasisElements = {

package/dist/cjs/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -11,8 +11,8 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
 var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var ParagraphElements = exports.ParagraphElements = {

package/dist/cjs/rules/use-primitives-text/transformers/span-elements.js

@@ -11,8 +11,8 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
 var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var SpanElements = exports.SpanElements = {

package/dist/cjs/rules/use-primitives-text/transformers/strong-elements.js

@@ -11,8 +11,8 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
 var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var StrongElements = exports.StrongElements = {

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

@@ -95,7 +95,7 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   }
                   return _context.abrupt("return");
                 case 16:
-                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode))) {
+                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode))) {
                     _context.next = 18;
                     break;
                   }

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfSvgElement = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isCssInJsTemplateNode = exports.isCssInJsObjectNode = exports.isCssInJsCallNode = exports.isChildOfType = void 0;
+exports.isPropertyKey = exports.isDecendantOfXcssBlock = exports.isDecendantOfType = exports.isDecendantOfSvgElement = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfPrimitive = exports.isDecendantOfGlobalToken = exports.isCssInJsTemplateNode = exports.isCssInJsObjectNode = exports.isCssInJsCallNode = exports.isChildOfType = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _astNodes = require("../../ast-nodes");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var isDecendantOfGlobalToken = exports.isDecendantOfGlobalToken = function isDecendantOfGlobalToken(node) {
@@ -54,6 +55,22 @@ var isDecendantOfSvgElement = exports.isDecendantOfSvgElement = function isDecen
   }
   return false;
 };
+var isDecendantOfPrimitive = exports.isDecendantOfPrimitive = function isDecendantOfPrimitive(node, context) {
+  var primitivesToCheck = ['Box', 'Text'];
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+    // @ts-ignore
+    if (primitivesToCheck.includes(node.openingElement.name.name)) {
+      var importDeclaration = _astNodes.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+      if (importDeclaration.length) {
+        return true;
+      }
+    }
+  }
+  if (node.parent) {
+    return isDecendantOfPrimitive(node.parent, context);
+  }
+  return false;
+};
 var cssInJsCallees = ['css', 'styled', 'styled2'];
 var isCssInJsTemplateNode = exports.isCssInJsTemplateNode = function isCssInJsTemplateNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
@@ -67,6 +84,16 @@ var isCssInJsObjectNode = exports.isCssInJsObjectNode = function isCssInJsObject
 var isXcssCallNode = function isXcssCallNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'xcss';
 };
+var isDecendantOfXcssBlock = exports.isDecendantOfXcssBlock = function isDecendantOfXcssBlock(node) {
+  // xcss contains types for all properties that accept tokens, so ignore xcss for linting as it will report false positives
+  if (isXcssCallNode(node)) {
+    return true;
+  }
+  if (node.parent) {
+    return isDecendantOfXcssBlock(node.parent);
+  }
+  return false;
+};
 var isDecendantOfStyleBlock = exports.isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
   if (node.type === 'VariableDeclarator') {
     if (node.id.type !== 'Identifier') {
@@ -95,11 +122,6 @@ var isDecendantOfStyleBlock = exports.isDecendantOfStyleBlock = function isDecen
       return varName.includes(el);
     });
   }
-
-  // xcss contains types for all properties that accept tokens, so ignore xcss for linting as it will report false positives
-  if (isXcssCallNode(node)) {
-    return false;
-  }
   if (isCssInJsCallNode(node) || isCssInJsObjectNode(node) || isCssInJsTemplateNode(node)) {
     return true;
   }

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -404,7 +404,8 @@ const defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false
+  fixNamesOnly: false,
+  autoFixNames: true
 };
 const rule = createLintRule({
   meta: {
@@ -448,6 +449,9 @@ const rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
+        autoFixNames: {
+          type: 'boolean'
+        },
         fixNamesOnly: {
           type: 'boolean'
         }
@@ -471,6 +475,9 @@ const rule = createLintRule({
           // Already prefixed! Nothing to do.
           return;
         }
+        if (!mergedConfig.autoFixNames) {
+          return;
+        }
         context.report({
           node: identifier,
           messageId: 'shouldEndInStyles',

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

@@ -4,7 +4,7 @@ import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
 import { getIsException } from '../utils/get-is-exception';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
-import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
+import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfPrimitive, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
 // TemplateLiteral > Identifier
 export const lintTemplateIdentifierForColor = (node, context, config) => {
   if (node.type !== 'Identifier') {
@@ -138,6 +138,11 @@ export const lintJSXLiteralForColor = (node, context, config) => {
   if (isDecendantOfSvgElement(node.parent)) {
     return;
   }
+
+  // Box backgroundColor prop accepts token names directly - don't lint against this
+  if (isDecendantOfPrimitive(node.parent, context)) {
+    return;
+  }
   if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
     return;
   }

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

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 import { includesHardCodedColor } from '../utils/is-color';
-import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../utils/is-node';
+import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType, isDecendantOfXcssBlock } from '../utils/is-node';
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import { errorBoundary } from './error-boundary';
 import ruleMeta from './rule-meta';
@@ -51,6 +51,9 @@ const createWithConfig = initialConfig => context => {
       if (parentNode.parent.type === 'Property') {
         return;
       }
+      if (isDecendantOfXcssBlock(parentNode)) {
+        return;
+      }
       if (!isDecendantOfStyleBlock(parentNode) && !isDecendantOfType(parentNode, 'JSXExpressionContainer')) {
         return;
       }

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

@@ -9,7 +9,6 @@ export const radiusValueToToken = Object.fromEntries(shapeTokens.filter(t => t.n
 }).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
 .concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
 );
-
 export const borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.width')).map(t => [t.value, t.cleanName]).concat([['2px', 'border.width']]));
 export function isRadiusProperty(propertyName) {
   return shapeProperties.includes(propertyName);

package/dist/es2019/rules/prefer-primitives/index.js

@@ -78,7 +78,6 @@ const rule = createLintRule({
           if (typeof argValue === 'string') {
             const suggest = validPrimitiveElements.has(argValue.replaceAll(`'`, '') // argValue will have '' around the element name, strip it out for this test
             );
-
             if (suggest) {
               const styledIdentifier = node.callee.name;
               const elementName = argValue;

package/dist/es2019/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -64,7 +64,6 @@ export const isValidCssPropertiesToTransform = (node, config) => {
       ;
     }
   });
-
   if (!containsOnlyValidStyles) {
     return false;
   }

package/dist/es2019/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -166,7 +166,6 @@ export const ParagraphElements = {
       return [importFix, ...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   },
-
   _fixMultiple(node, {
     context,
     config,

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

@@ -79,23 +79,21 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
 
           // 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)) {
+          if (isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\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.
              *
-             * @example
+             * @examples
              * ```tsx
              * const Component = styled.div`
              *   & + ${Button} { color: red; }
              * `;
              * ```
-             * Becomes this code, which is not supported in `styled-components@3.x`:
-             * ```tsx
-             * const Component = styled.div({
-             *   [`& + ${Button}`]: {
-             *     color: 'red',
-             * });
+             *```tsx
+             * const Component = styled.div`
+             *   ${mixin()} button { color: red; }
+             * `;
              * ```
              */
             return;

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

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { isNodeOfType } from 'eslint-codemod-utils';
+import { Root } from '../../ast-nodes';
 export const isDecendantOfGlobalToken = node => {
   if (isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'token' || node.callee.name === 'getTokenValue')) {
     return true;
@@ -47,11 +48,37 @@ export const isDecendantOfSvgElement = node => {
   }
   return false;
 };
+export const isDecendantOfPrimitive = (node, context) => {
+  const primitivesToCheck = ['Box', 'Text'];
+  if (isNodeOfType(node, 'JSXElement')) {
+    // @ts-ignore
+    if (primitivesToCheck.includes(node.openingElement.name.name)) {
+      const importDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+      if (importDeclaration.length) {
+        return true;
+      }
+    }
+  }
+  if (node.parent) {
+    return isDecendantOfPrimitive(node.parent, context);
+  }
+  return false;
+};
 const cssInJsCallees = ['css', 'styled', 'styled2'];
 export const isCssInJsTemplateNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
 export const isCssInJsCallNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && cssInJsCallees.includes(node.callee.name);
 export const isCssInJsObjectNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && cssInJsCallees.includes(node.callee.object.name);
 const isXcssCallNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'xcss';
+export const isDecendantOfXcssBlock = node => {
+  // xcss contains types for all properties that accept tokens, so ignore xcss for linting as it will report false positives
+  if (isXcssCallNode(node)) {
+    return true;
+  }
+  if (node.parent) {
+    return isDecendantOfXcssBlock(node.parent);
+  }
+  return false;
+};
 export const isDecendantOfStyleBlock = node => {
   if (node.type === 'VariableDeclarator') {
     if (node.id.type !== 'Identifier') {
@@ -76,11 +103,6 @@ export const isDecendantOfStyleBlock = node => {
     const varName = node.id.name.toLowerCase();
     return ['style', 'css', 'theme'].some(el => varName.includes(el));
   }
-
-  // xcss contains types for all properties that accept tokens, so ignore xcss for linting as it will report false positives
-  if (isXcssCallNode(node)) {
-    return false;
-  }
   if (isCssInJsCallNode(node) || isCssInJsObjectNode(node) || isCssInJsTemplateNode(node)) {
     return true;
   }

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

@@ -12,6 +12,7 @@ export const CSS_IN_JS_IMPORTS = {
 
 // A CSS-in-JS library an import of a valid css, cx, cssMap, etc.
 // function might originate from, e.g. @compiled/react, @emotion/core.
+
 /**
  * By default all known import sources are checked against.
  */

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -448,7 +448,8 @@ var defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false
+  fixNamesOnly: false,
+  autoFixNames: true
 };
 var rule = createLintRule({
   meta: {
@@ -492,6 +493,9 @@ var rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
+        autoFixNames: {
+          type: 'boolean'
+        },
         fixNamesOnly: {
           type: 'boolean'
         }
@@ -517,6 +521,9 @@ var rule = createLintRule({
         // Already prefixed! Nothing to do.
         return;
       }
+      if (!mergedConfig.autoFixNames) {
+        return;
+      }
       context.report({
         node: identifier,
         messageId: 'shouldEndInStyles',

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

@@ -4,7 +4,7 @@ import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
 import { getIsException } from '../utils/get-is-exception';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
-import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
+import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfPrimitive, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
 // TemplateLiteral > Identifier
 export var lintTemplateIdentifierForColor = function lintTemplateIdentifierForColor(node, context, config) {
   if (node.type !== 'Identifier') {
@@ -137,6 +137,11 @@ export var lintJSXLiteralForColor = function lintJSXLiteralForColor(node, contex
   if (isDecendantOfSvgElement(node.parent)) {
     return;
   }
+
+  // Box backgroundColor prop accepts token names directly - don't lint against this
+  if (isDecendantOfPrimitive(node.parent, context)) {
+    return;
+  }
   if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
     return;
   }

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 import { includesHardCodedColor } from '../utils/is-color';
-import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../utils/is-node';
+import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType, isDecendantOfXcssBlock } from '../utils/is-node';
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import { errorBoundary } from './error-boundary';
 import ruleMeta from './rule-meta';
@@ -66,6 +66,9 @@ var createWithConfig = function createWithConfig(initialConfig) {
           if (parentNode.parent.type === 'Property') {
             return;
           }
+          if (isDecendantOfXcssBlock(parentNode)) {
+            return;
+          }
           if (!isDecendantOfStyleBlock(parentNode) && !isDecendantOfType(parentNode, 'JSXExpressionContainer')) {
             return;
           }

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

@@ -13,7 +13,6 @@ export var radiusValueToToken = Object.fromEntries(shapeTokens.filter(function (
 }).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
 .concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
 );
-
 export var borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(function (t) {
   return t.name.startsWith('border.width');
 }).map(function (t) {

package/dist/esm/rules/prefer-primitives/index.js

@@ -77,7 +77,6 @@ var rule = createLintRule({
           if (typeof argValue === 'string') {
             var suggest = validPrimitiveElements.has(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
             );
-
             if (suggest) {
               var styledIdentifier = node.callee.name;
               var elementName = argValue;

package/dist/esm/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -70,7 +70,6 @@ export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTran
       ;
     }
   });
-
   if (!containsOnlyValidStyles) {
     return false;
   }

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

@@ -88,7 +88,7 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   }
                   return _context.abrupt("return");
                 case 16:
-                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode))) {
+                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode))) {
                     _context.next = 18;
                     break;
                   }

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

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { isNodeOfType } from 'eslint-codemod-utils';
+import { Root } from '../../ast-nodes';
 export var isDecendantOfGlobalToken = function isDecendantOfGlobalToken(node) {
   if (isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'token' || node.callee.name === 'getTokenValue')) {
     return true;
@@ -48,6 +49,22 @@ export var isDecendantOfSvgElement = function isDecendantOfSvgElement(node) {
   }
   return false;
 };
+export var isDecendantOfPrimitive = function isDecendantOfPrimitive(node, context) {
+  var primitivesToCheck = ['Box', 'Text'];
+  if (isNodeOfType(node, 'JSXElement')) {
+    // @ts-ignore
+    if (primitivesToCheck.includes(node.openingElement.name.name)) {
+      var importDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+      if (importDeclaration.length) {
+        return true;
+      }
+    }
+  }
+  if (node.parent) {
+    return isDecendantOfPrimitive(node.parent, context);
+  }
+  return false;
+};
 var cssInJsCallees = ['css', 'styled', 'styled2'];
 export var isCssInJsTemplateNode = function isCssInJsTemplateNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
@@ -61,6 +78,16 @@ export var isCssInJsObjectNode = function isCssInJsObjectNode(node) {
 var isXcssCallNode = function isXcssCallNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'xcss';
 };
+export var isDecendantOfXcssBlock = function isDecendantOfXcssBlock(node) {
+  // xcss contains types for all properties that accept tokens, so ignore xcss for linting as it will report false positives
+  if (isXcssCallNode(node)) {
+    return true;
+  }
+  if (node.parent) {
+    return isDecendantOfXcssBlock(node.parent);
+  }
+  return false;
+};
 export var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
   if (node.type === 'VariableDeclarator') {
     if (node.id.type !== 'Identifier') {
@@ -89,11 +116,6 @@ export var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
       return varName.includes(el);
     });
   }
-
-  // xcss contains types for all properties that accept tokens, so ignore xcss for linting as it will report false positives
-  if (isXcssCallNode(node)) {
-    return false;
-  }
   if (isCssInJsCallNode(node) || isCssInJsObjectNode(node) || isCssInJsTemplateNode(node)) {
     return true;
   }

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

@@ -12,6 +12,7 @@ export var CSS_IN_JS_IMPORTS = {
 
 // A CSS-in-JS library an import of a valid css, cx, cssMap, etc.
 // function might originate from, e.g. @compiled/react, @emotion/core.
+
 /**
  * By default all known import sources are checked against.
  */

package/dist/types/rules/consistent-css-prop-usage/types.d.ts

@@ -5,5 +5,6 @@ export type RuleConfig = {
     cssImportSource: ImportSource;
     xcssImportSource: ImportSource;
     excludeReactComponents: boolean;
+    autoFixNames: boolean;
     fixNamesOnly: boolean;
 };

package/dist/types/rules/utils/is-node.d.ts

@@ -5,8 +5,10 @@ export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'
 export declare const isPropertyKey: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleJsxAttribute: (node: Rule.Node) => boolean;
 export declare const isDecendantOfSvgElement: (node: Rule.Node) => boolean;
+export declare const isDecendantOfPrimitive: (node: Rule.Node, context: Rule.RuleContext) => boolean;
 export declare const isCssInJsTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
 export declare const isCssInJsCallNode: (node?: Expression | null) => node is CallExpression;
 export declare const isCssInJsObjectNode: (node?: Expression | null) => node is CallExpression;
+export declare const isDecendantOfXcssBlock: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleBlock: (node: Rule.Node) => boolean;
 export declare const isChildOfType: (node: Rule.Node, type: Rule.Node['type']) => boolean;

package/dist/types-ts4.5/rules/consistent-css-prop-usage/types.d.ts

@@ -5,5 +5,6 @@ export type RuleConfig = {
     cssImportSource: ImportSource;
     xcssImportSource: ImportSource;
     excludeReactComponents: boolean;
+    autoFixNames: boolean;
     fixNamesOnly: boolean;
 };

package/dist/types-ts4.5/rules/utils/is-node.d.ts

@@ -5,8 +5,10 @@ export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'
 export declare const isPropertyKey: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleJsxAttribute: (node: Rule.Node) => boolean;
 export declare const isDecendantOfSvgElement: (node: Rule.Node) => boolean;
+export declare const isDecendantOfPrimitive: (node: Rule.Node, context: Rule.RuleContext) => boolean;
 export declare const isCssInJsTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
 export declare const isCssInJsCallNode: (node?: Expression | null) => node is CallExpression;
 export declare const isCssInJsObjectNode: (node?: Expression | null) => node is CallExpression;
+export declare const isDecendantOfXcssBlock: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleBlock: (node: Rule.Node) => boolean;
 export declare const isChildOfType: (node: Rule.Node, type: Rule.Node['type']) => 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.0",
+  "version": "8.36.2",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"