@atlaskit/eslint-plugin-design-system 8.18.1 → 8.19.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.19.1
+
+### Patch Changes
+
+- [#65221](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65221) [`a2ba22904ca0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2ba22904ca0) - Allow for @atlaskit/design-system/use-primitives lint rule to take a configuration object.
+
+## 8.19.0
+
+### Minor Changes
+
+- [#64899](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64899) [`442878c001f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/442878c001f9) - Add `no-unsafe-style-overrides`. This rule marks any usage of unsafe style overrides as violations, such as usage of `css`, `theme`, and `cssFn` props.
+
 ## 8.18.1
 
 ### Patch Changes

package/README.md

@@ -62,6 +62,7 @@ module.exports = {
 | <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a>                                             | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a>                                 | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
 | <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a>                     | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |
+| <a href="./src/rules/no-unsafe-style-overrides/README.md">no-unsafe-style-overrides</a>                           | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
 | <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |

package/constellation/index/usage.mdx

@@ -26,6 +26,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-nested-styles">no-nested-styles</a>                                             | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="#no-physical-properties">no-physical-properties</a>                                 | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
 | <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a>                     | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |
+| <a href="#no-unsafe-style-overrides">no-unsafe-style-overrides</a>                           | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
 | <a href="#no-unsupported-drag-and-drop-libraries">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="#prefer-primitives">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="#use-drawer-label">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
@@ -666,6 +667,56 @@ This rule comes with options to aid in migrating to design tokens.
 When `true` the rule will mark token function usage as violations when fallbacks aren't defined.
 When `false` the rule will mark token function usage as violations when fallbacks are defined.
 
+## no-unsafe-style-overrides
+
+Unsafe style overrides cause friction and incidents when internals of the component you're overriding change. They're inherently unbounded and everything is API that can change at a moments notice.
+
+Instead, lean on composition, primitive components, and safe style overrides via the `xcss` prop where component authors declare what styles they want to support.
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```tsx
+import Button from '@atlaskit/button';
+
+<Button css={{ fontWeight: 500 }}>foo</Button>;
+        ^^^
+```
+
+```tsx
+import { LinkItem } from '@atlaskit/menu';
+
+<LinkItem cssFn={() => ({ '> div > div': { padding: 2 } })} />;
+          ^^^^^
+```
+
+```tsx
+import { ButtonItem } from '@atlaskit/side-navigation';
+
+<ButtonItem className="text-neutral-400" />;
+            ^^^^^^^^^
+```
+
+#### Correct
+
+```tsx
+<Button>
+  <strong>foo</strong>
+</Button>
+```
+
+```tsx
+const styles = css({ padding: 'var(--ds-space-100)' });
+
+<Box as="a" xcss={styles}>
+  <Stack>
+    <Inline />
+    <Inline />
+  </Stack>
+</Box>;
+```
+
 ## no-unsupported-drag-and-drop-libraries
 
 We encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table to external files. Pragmatic drag and drop is a performance optimised drag and drop framework that has been designed to power any drag and drop experience on any tech stack. Please avoid using alternative drag and drop libraries as it will lead to poorer performance, increased maintenance costs, (likely) worse accessibility and fragmented user experiences. See https://staging.atlassian.design/components/pragmatic-drag-and-drop/

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
+ * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -25,6 +25,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
+ * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -21,6 +21,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/cjs/rules/index.codegen.js

@@ -18,6 +18,7 @@ var _noMargin = _interopRequireDefault(require("./no-margin"));
 var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
 var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-design-token-usage"));
+var _noUnsafeStyleOverrides = _interopRequireDefault(require("./no-unsafe-style-overrides"));
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
@@ -27,7 +28,7 @@ var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
+ * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -44,6 +45,7 @@ var _default = exports.default = {
   'no-nested-styles': _noNestedStyles.default,
   'no-physical-properties': _noPhysicalProperties.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
+  'no-unsafe-style-overrides': _noUnsafeStyleOverrides.default,
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-drawer-label': _useDrawerLabel.default,

package/dist/cjs/rules/no-unsafe-style-overrides/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+var _jsx = require("../utils/jsx");
+var unsafeOverrides = ['css', 'className', 'theme', 'cssFn', 'styles'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    docs: {
+      recommended: true,
+      // This should be an error but for now we're rolling it out as warn so we can actually get it into codebases.
+      severity: 'warn',
+      description: 'Discourage usage of unsafe style overrides used against the Atlassian Design System.'
+    },
+    name: 'no-unsafe-style-overrides',
+    messages: {
+      noUnsafeStyledOverride: 'Wrapping {{componentName}} in a styled component encourages unsafe style overrides which cause friction and incidents when its internals change.',
+      noUnsafeOverrides: 'The {{propName}} prop encourages unsafe style overrides which cause friction and incidents when {{componentName}} internals change.'
+    }
+  },
+  create: function create(context) {
+    return {
+      CallExpression: function CallExpression(node) {
+        if (node.callee.type !== 'Identifier' || !node.callee.name.toLowerCase().includes('styled')) {
+          // Ignore functions that don't look like styled().
+          return;
+        }
+        var firstArgument = node.arguments[0];
+        if (!firstArgument || firstArgument.type !== 'Identifier') {
+          return;
+        }
+        var moduleName = (0, _getImportNodeBySource.getModuleOfIdentifier)(context.getSourceCode(), firstArgument.name);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          // Ignore styled calls with non-atlaskit components.
+          return;
+        }
+        context.report({
+          node: firstArgument,
+          messageId: 'noUnsafeStyledOverride',
+          data: {
+            componentName: moduleName.importName
+          }
+        });
+      },
+      JSXAttribute: function JSXAttribute(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute') || !(node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXOpeningElement'))) {
+          return;
+        }
+        var elementName = (0, _jsx.getJSXElementName)(node.parent);
+        var moduleName = (0, _getImportNodeBySource.getModuleOfIdentifier)(context.getSourceCode(), elementName);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          return;
+        }
+        var propName = typeof node.name.name === 'string' ? node.name.name : node.name.name.name;
+        if (unsafeOverrides.includes(propName)) {
+          context.report({
+            node: node,
+            messageId: 'noUnsafeOverrides',
+            data: {
+              propName: propName,
+              componentName: moduleName.importName
+            }
+          });
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-primitives/config/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConfig = void 0;
+var defaults = {
+  patterns: ['div-object-css']
+};
+var getConfig = exports.getConfig = function getConfig(overrides) {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -1,19 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _assign = _interopRequireDefault(require("lodash/assign"));
 var _createRule = require("../utils/create-rule");
+var _config = require("./config");
 var _transformers = require("./transformers");
 var _utils = require("./utils");
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
-var defaultConfig = {
-  preview: false
-};
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'use-primitives',
@@ -30,11 +26,11 @@ var rule = (0, _createRule.createLintRule)({
     }
   },
   create: function create(context) {
-    var mergedConfig = (0, _assign.default)({}, defaultConfig, context.options[0]);
+    var config = (0, _config.getConfig)(context.options[0]);
     return {
       // transforms styled.<html>(...) usages
       CallExpression: function CallExpression(node) {
-        if (!mergedConfig.preview) {
+        if (!config.patterns.includes('compiled-styled-object')) {
           return;
         }
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
@@ -64,6 +60,7 @@ var rule = (0, _createRule.createLintRule)({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
+        var config = (0, _config.getConfig)(context.options[0]);
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
           return;
         }
@@ -73,7 +70,7 @@ var rule = (0, _createRule.createLintRule)({
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement')) {
           return;
         }
-        var suggestBox = shouldSuggestBox(node.parent, context);
+        var suggestBox = shouldSuggestBox(node.parent, context, config);
         if (suggestBox) {
           context.report({
             node: node,
@@ -91,7 +88,7 @@ var rule = (0, _createRule.createLintRule)({
     };
   }
 });
-var shouldSuggestBox = function shouldSuggestBox(node, context
+var shouldSuggestBox = function shouldSuggestBox(node, context, config
 // scope: Scope.Scope,
 ) {
   if (!node) {
@@ -138,6 +135,9 @@ var shouldSuggestBox = function shouldSuggestBox(node, context
   if (!cssVariableValue || !(0, _utils.isFunctionNamed)(cssVariableValue, 'css')) {
     return false;
   }
+  if (!config.patterns.includes('div-object-css')) {
+    return false;
+  }
   return (0, _utils.isValidCssPropertiesToTransform)(cssVariableValue.node.init);
 };
 var _default = exports.default = rule;

package/dist/cjs/rules/utils/get-import-node-by-source.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getImportedNodeBySource = void 0;
+exports.getModuleOfIdentifier = exports.getImportedNodeBySource = void 0;
+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; }
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 /**
@@ -17,4 +20,49 @@ var getImportedNodeBySource = exports.getImportedNodeBySource = function getImpo
   }).find(function (node) {
     return node.source.value === path;
   });
+};
+
+/**
+ * Returns the module name of an identifier, if one exists.
+ *
+ * getModuleOfIdentifier(source, 'Button'); // "@atlaskit/button"
+ */
+var getModuleOfIdentifier = exports.getModuleOfIdentifier = function getModuleOfIdentifier(source, identifierName) {
+  var _iterator = _createForOfIteratorHelper(source.ast.body),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var node = _step.value;
+      if (node.type === 'ImportDeclaration') {
+        var _iterator2 = _createForOfIteratorHelper(node.specifiers),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var spec = _step2.value;
+            if (spec.type === 'ImportDefaultSpecifier' && spec.local.name === identifierName) {
+              return {
+                moduleName: node.source.value + '',
+                importName: identifierName
+              };
+            }
+            if (spec.type === 'ImportSpecifier' && spec.local.name === identifierName) {
+              return {
+                moduleName: node.source.value + '',
+                importName: spec.imported.name
+              };
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return undefined;
 };

package/dist/cjs/rules/utils/jsx.js

@@ -4,9 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findProp = findProp;
+exports.getJSXElementName = getJSXElementName;
 function findProp(jsx, propName) {
   var labelProp = jsx.openingElement.attributes.find(function (attr) {
     return attr.type === 'JSXAttribute' && attr.name.name === propName;
   });
   return labelProp;
+}
+function unrollMemberExpression(exp) {
+  if (exp.type === 'JSXIdentifier') {
+    return exp.name;
+  }
+  return unrollMemberExpression(exp.object);
+}
+function getJSXElementName(jsx) {
+  switch (jsx.name.type) {
+    case 'JSXIdentifier':
+      return jsx.name.name;
+    case 'JSXMemberExpression':
+      return unrollMemberExpression(jsx.name.object);
+    case 'JSXNamespacedName':
+      return jsx.name.namespace.name;
+  }
 }

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
+ * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -19,6 +19,7 @@ export default {
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
+ * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -15,6 +15,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
+ * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -16,6 +16,7 @@ import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
+import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
 import useDrawerLabel from './use-drawer-label';
@@ -37,6 +38,7 @@ export default {
   'no-nested-styles': noNestedStyles,
   'no-physical-properties': noPhysicalProperties,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
+  'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
   'use-drawer-label': useDrawerLabel,

package/dist/es2019/rules/no-unsafe-style-overrides/index.js

@@ -0,0 +1,68 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { getModuleOfIdentifier } from '../utils/get-import-node-by-source';
+import { getJSXElementName } from '../utils/jsx';
+const unsafeOverrides = ['css', 'className', 'theme', 'cssFn', 'styles'];
+const rule = createLintRule({
+  meta: {
+    docs: {
+      recommended: true,
+      // This should be an error but for now we're rolling it out as warn so we can actually get it into codebases.
+      severity: 'warn',
+      description: 'Discourage usage of unsafe style overrides used against the Atlassian Design System.'
+    },
+    name: 'no-unsafe-style-overrides',
+    messages: {
+      noUnsafeStyledOverride: 'Wrapping {{componentName}} in a styled component encourages unsafe style overrides which cause friction and incidents when its internals change.',
+      noUnsafeOverrides: 'The {{propName}} prop encourages unsafe style overrides which cause friction and incidents when {{componentName}} internals change.'
+    }
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (node.callee.type !== 'Identifier' || !node.callee.name.toLowerCase().includes('styled')) {
+          // Ignore functions that don't look like styled().
+          return;
+        }
+        const firstArgument = node.arguments[0];
+        if (!firstArgument || firstArgument.type !== 'Identifier') {
+          return;
+        }
+        const moduleName = getModuleOfIdentifier(context.getSourceCode(), firstArgument.name);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          // Ignore styled calls with non-atlaskit components.
+          return;
+        }
+        context.report({
+          node: firstArgument,
+          messageId: 'noUnsafeStyledOverride',
+          data: {
+            componentName: moduleName.importName
+          }
+        });
+      },
+      JSXAttribute(node) {
+        if (!isNodeOfType(node, 'JSXAttribute') || !(node.parent && isNodeOfType(node.parent, 'JSXOpeningElement'))) {
+          return;
+        }
+        const elementName = getJSXElementName(node.parent);
+        const moduleName = getModuleOfIdentifier(context.getSourceCode(), elementName);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          return;
+        }
+        const propName = typeof node.name.name === 'string' ? node.name.name : node.name.name.name;
+        if (unsafeOverrides.includes(propName)) {
+          context.report({
+            node,
+            messageId: 'noUnsafeOverrides',
+            data: {
+              propName,
+              componentName: moduleName.importName
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/use-primitives/config/index.js

@@ -0,0 +1,9 @@
+const defaults = {
+  patterns: ['div-object-css']
+};
+export const getConfig = overrides => {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -1,12 +1,9 @@
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
-import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
+import { getConfig } from './config';
 import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
 import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
 const boxDocsUrl = 'https://atlassian.design/components/primitives/box';
-const defaultConfig = {
-  preview: false
-};
 const rule = createLintRule({
   meta: {
     name: 'use-primitives',
@@ -23,11 +20,11 @@ const rule = createLintRule({
     }
   },
   create(context) {
-    const mergedConfig = assign({}, defaultConfig, context.options[0]);
+    const config = getConfig(context.options[0]);
     return {
       // transforms styled.<html>(...) usages
       CallExpression(node) {
-        if (!mergedConfig.preview) {
+        if (!config.patterns.includes('compiled-styled-object')) {
           return;
         }
         if (!isNodeOfType(node, 'CallExpression')) {
@@ -57,6 +54,7 @@ const rule = createLintRule({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement(node) {
+        const config = getConfig(context.options[0]);
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
         }
@@ -66,7 +64,7 @@ const rule = createLintRule({
         if (!isNodeOfType(node.parent, 'JSXElement')) {
           return;
         }
-        const suggestBox = shouldSuggestBox(node.parent, context);
+        const suggestBox = shouldSuggestBox(node.parent, context, config);
         if (suggestBox) {
           context.report({
             node: node,
@@ -84,7 +82,7 @@ const rule = createLintRule({
     };
   }
 });
-const shouldSuggestBox = (node, context
+const shouldSuggestBox = (node, context, config
 // scope: Scope.Scope,
 ) => {
   if (!node) {
@@ -131,6 +129,9 @@ const shouldSuggestBox = (node, context
   if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
     return false;
   }
+  if (!config.patterns.includes('div-object-css')) {
+    return false;
+  }
   return isValidCssPropertiesToTransform(cssVariableValue.node.init);
 };
 export default rule;

package/dist/es2019/rules/utils/get-import-node-by-source.js

@@ -7,4 +7,31 @@
  */
 export const getImportedNodeBySource = (source, path) => {
   return source.ast.body.filter(node => node.type === 'ImportDeclaration').find(node => node.source.value === path);
+};
+
+/**
+ * Returns the module name of an identifier, if one exists.
+ *
+ * getModuleOfIdentifier(source, 'Button'); // "@atlaskit/button"
+ */
+export const getModuleOfIdentifier = (source, identifierName) => {
+  for (const node of source.ast.body) {
+    if (node.type === 'ImportDeclaration') {
+      for (const spec of node.specifiers) {
+        if (spec.type === 'ImportDefaultSpecifier' && spec.local.name === identifierName) {
+          return {
+            moduleName: node.source.value + '',
+            importName: identifierName
+          };
+        }
+        if (spec.type === 'ImportSpecifier' && spec.local.name === identifierName) {
+          return {
+            moduleName: node.source.value + '',
+            importName: spec.imported.name
+          };
+        }
+      }
+    }
+  }
+  return undefined;
 };

package/dist/es2019/rules/utils/jsx.js

@@ -1,4 +1,20 @@
 export function findProp(jsx, propName) {
   const labelProp = jsx.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === propName);
   return labelProp;
+}
+function unrollMemberExpression(exp) {
+  if (exp.type === 'JSXIdentifier') {
+    return exp.name;
+  }
+  return unrollMemberExpression(exp.object);
+}
+export function getJSXElementName(jsx) {
+  switch (jsx.name.type) {
+    case 'JSXIdentifier':
+      return jsx.name.name;
+    case 'JSXMemberExpression':
+      return unrollMemberExpression(jsx.name.object);
+    case 'JSXNamespacedName':
+      return jsx.name.namespace.name;
+  }
 }

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
+ * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -19,6 +19,7 @@ export default {
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
+ * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -15,6 +15,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
+ * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -16,6 +16,7 @@ import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
+import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
 import useDrawerLabel from './use-drawer-label';
@@ -37,6 +38,7 @@ export default {
   'no-nested-styles': noNestedStyles,
   'no-physical-properties': noPhysicalProperties,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
+  'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
   'use-drawer-label': useDrawerLabel,

package/dist/esm/rules/no-unsafe-style-overrides/index.js

@@ -0,0 +1,68 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { getModuleOfIdentifier } from '../utils/get-import-node-by-source';
+import { getJSXElementName } from '../utils/jsx';
+var unsafeOverrides = ['css', 'className', 'theme', 'cssFn', 'styles'];
+var rule = createLintRule({
+  meta: {
+    docs: {
+      recommended: true,
+      // This should be an error but for now we're rolling it out as warn so we can actually get it into codebases.
+      severity: 'warn',
+      description: 'Discourage usage of unsafe style overrides used against the Atlassian Design System.'
+    },
+    name: 'no-unsafe-style-overrides',
+    messages: {
+      noUnsafeStyledOverride: 'Wrapping {{componentName}} in a styled component encourages unsafe style overrides which cause friction and incidents when its internals change.',
+      noUnsafeOverrides: 'The {{propName}} prop encourages unsafe style overrides which cause friction and incidents when {{componentName}} internals change.'
+    }
+  },
+  create: function create(context) {
+    return {
+      CallExpression: function CallExpression(node) {
+        if (node.callee.type !== 'Identifier' || !node.callee.name.toLowerCase().includes('styled')) {
+          // Ignore functions that don't look like styled().
+          return;
+        }
+        var firstArgument = node.arguments[0];
+        if (!firstArgument || firstArgument.type !== 'Identifier') {
+          return;
+        }
+        var moduleName = getModuleOfIdentifier(context.getSourceCode(), firstArgument.name);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          // Ignore styled calls with non-atlaskit components.
+          return;
+        }
+        context.report({
+          node: firstArgument,
+          messageId: 'noUnsafeStyledOverride',
+          data: {
+            componentName: moduleName.importName
+          }
+        });
+      },
+      JSXAttribute: function JSXAttribute(node) {
+        if (!isNodeOfType(node, 'JSXAttribute') || !(node.parent && isNodeOfType(node.parent, 'JSXOpeningElement'))) {
+          return;
+        }
+        var elementName = getJSXElementName(node.parent);
+        var moduleName = getModuleOfIdentifier(context.getSourceCode(), elementName);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          return;
+        }
+        var propName = typeof node.name.name === 'string' ? node.name.name : node.name.name.name;
+        if (unsafeOverrides.includes(propName)) {
+          context.report({
+            node: node,
+            messageId: 'noUnsafeOverrides',
+            data: {
+              propName: propName,
+              componentName: moduleName.importName
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/use-primitives/config/index.js

@@ -0,0 +1,9 @@
+var defaults = {
+  patterns: ['div-object-css']
+};
+export var getConfig = function getConfig(overrides) {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -1,12 +1,9 @@
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
-import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
+import { getConfig } from './config';
 import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
 import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
-var defaultConfig = {
-  preview: false
-};
 var rule = createLintRule({
   meta: {
     name: 'use-primitives',
@@ -23,11 +20,11 @@ var rule = createLintRule({
     }
   },
   create: function create(context) {
-    var mergedConfig = assign({}, defaultConfig, context.options[0]);
+    var config = getConfig(context.options[0]);
     return {
       // transforms styled.<html>(...) usages
       CallExpression: function CallExpression(node) {
-        if (!mergedConfig.preview) {
+        if (!config.patterns.includes('compiled-styled-object')) {
           return;
         }
         if (!isNodeOfType(node, 'CallExpression')) {
@@ -57,6 +54,7 @@ var rule = createLintRule({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
+        var config = getConfig(context.options[0]);
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
         }
@@ -66,7 +64,7 @@ var rule = createLintRule({
         if (!isNodeOfType(node.parent, 'JSXElement')) {
           return;
         }
-        var suggestBox = shouldSuggestBox(node.parent, context);
+        var suggestBox = shouldSuggestBox(node.parent, context, config);
         if (suggestBox) {
           context.report({
             node: node,
@@ -84,7 +82,7 @@ var rule = createLintRule({
     };
   }
 });
-var shouldSuggestBox = function shouldSuggestBox(node, context
+var shouldSuggestBox = function shouldSuggestBox(node, context, config
 // scope: Scope.Scope,
 ) {
   if (!node) {
@@ -131,6 +129,9 @@ var shouldSuggestBox = function shouldSuggestBox(node, context
   if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
     return false;
   }
+  if (!config.patterns.includes('div-object-css')) {
+    return false;
+  }
   return isValidCssPropertiesToTransform(cssVariableValue.node.init);
 };
 export default rule;

package/dist/esm/rules/utils/get-import-node-by-source.js

@@ -1,3 +1,6 @@
+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; }
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 /**
@@ -11,4 +14,49 @@ export var getImportedNodeBySource = function getImportedNodeBySource(source, pa
   }).find(function (node) {
     return node.source.value === path;
   });
+};
+
+/**
+ * Returns the module name of an identifier, if one exists.
+ *
+ * getModuleOfIdentifier(source, 'Button'); // "@atlaskit/button"
+ */
+export var getModuleOfIdentifier = function getModuleOfIdentifier(source, identifierName) {
+  var _iterator = _createForOfIteratorHelper(source.ast.body),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var node = _step.value;
+      if (node.type === 'ImportDeclaration') {
+        var _iterator2 = _createForOfIteratorHelper(node.specifiers),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var spec = _step2.value;
+            if (spec.type === 'ImportDefaultSpecifier' && spec.local.name === identifierName) {
+              return {
+                moduleName: node.source.value + '',
+                importName: identifierName
+              };
+            }
+            if (spec.type === 'ImportSpecifier' && spec.local.name === identifierName) {
+              return {
+                moduleName: node.source.value + '',
+                importName: spec.imported.name
+              };
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return undefined;
 };

package/dist/esm/rules/utils/jsx.js

@@ -3,4 +3,20 @@ export function findProp(jsx, propName) {
     return attr.type === 'JSXAttribute' && attr.name.name === propName;
   });
   return labelProp;
+}
+function unrollMemberExpression(exp) {
+  if (exp.type === 'JSXIdentifier') {
+    return exp.name;
+  }
+  return unrollMemberExpression(exp.object);
+}
+export function getJSXElementName(jsx) {
+  switch (jsx.name.type) {
+    case 'JSXIdentifier':
+      return jsx.name.name;
+    case 'JSXMemberExpression':
+      return unrollMemberExpression(jsx.name.object);
+    case 'JSXNamespacedName':
+      return jsx.name.namespace.name;
+  }
 }

package/dist/types/index.codegen.d.ts

@@ -16,6 +16,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-physical-properties': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+            '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/prefer-primitives': string;
             '@atlaskit/design-system/use-drawer-label': string;
@@ -37,6 +38,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-imports': string;
             '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+            '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
+ * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -19,6 +19,7 @@ declare const _default: {
         '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-physical-properties': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+        '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/prefer-primitives': string;
         '@atlaskit/design-system/use-drawer-label': string;

package/dist/types/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
+ * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -15,6 +15,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-imports': string;
         '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+        '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;

package/dist/types/rules/index.codegen.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
     'no-nested-styles': import("eslint").Rule.RuleModule;
     'no-physical-properties': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
+    'no-unsafe-style-overrides': import("eslint").Rule.RuleModule;
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
     'use-drawer-label': import("eslint").Rule.RuleModule;

package/dist/types/rules/no-unsafe-style-overrides/index.d.ts

@@ -0,0 +1,2 @@
+declare const rule: import("eslint").Rule.RuleModule;
+export default rule;

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

@@ -0,0 +1,4 @@
+export interface RuleConfig {
+    patterns: ('div-object-css' | 'compiled-styled-object' | 'compiled-template-literal' | 'div-object-css-with-tokens' | 'div-object-css-with-multiple-vals')[];
+}
+export declare const getConfig: (overrides: Partial<RuleConfig>) => Required<RuleConfig>;

package/dist/types/rules/utils/get-import-node-by-source.d.ts

@@ -6,3 +6,12 @@ import type { ImportDeclaration } from 'eslint-codemod-utils';
  * @returns {ImportDeclaration}
  */
 export declare const getImportedNodeBySource: (source: SourceCode, path: string) => ImportDeclaration | undefined;
+/**
+ * Returns the module name of an identifier, if one exists.
+ *
+ * getModuleOfIdentifier(source, 'Button'); // "@atlaskit/button"
+ */
+export declare const getModuleOfIdentifier: (source: SourceCode, identifierName: string) => {
+    moduleName: string;
+    importName: string;
+} | undefined;

package/dist/types/rules/utils/jsx.d.ts

@@ -1,2 +1,3 @@
-import type { JSXAttribute, JSXElement } from 'eslint-codemod-utils';
+import type { JSXAttribute, JSXElement, JSXOpeningElement } from 'eslint-codemod-utils';
 export declare function findProp(jsx: JSXElement, propName: string): JSXAttribute | undefined;
+export declare function getJSXElementName(jsx: JSXOpeningElement): string;

package/dist/types-ts4.5/index.codegen.d.ts

@@ -16,6 +16,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-physical-properties': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+            '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/prefer-primitives': string;
             '@atlaskit/design-system/use-drawer-label': string;
@@ -37,6 +38,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-imports': string;
             '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+            '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
+ * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -19,6 +19,7 @@ declare const _default: {
         '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-physical-properties': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+        '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/prefer-primitives': string;
         '@atlaskit/design-system/use-drawer-label': string;

package/dist/types-ts4.5/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
+ * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -15,6 +15,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-imports': string;
         '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
+        '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
     'no-nested-styles': import("eslint").Rule.RuleModule;
     'no-physical-properties': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
+    'no-unsafe-style-overrides': import("eslint").Rule.RuleModule;
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
     'use-drawer-label': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/no-unsafe-style-overrides/index.d.ts

@@ -0,0 +1,2 @@
+declare const rule: import("eslint").Rule.RuleModule;
+export default rule;

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

@@ -0,0 +1,4 @@
+export interface RuleConfig {
+    patterns: ('div-object-css' | 'compiled-styled-object' | 'compiled-template-literal' | 'div-object-css-with-tokens' | 'div-object-css-with-multiple-vals')[];
+}
+export declare const getConfig: (overrides: Partial<RuleConfig>) => Required<RuleConfig>;

package/dist/types-ts4.5/rules/utils/get-import-node-by-source.d.ts

@@ -6,3 +6,12 @@ import type { ImportDeclaration } from 'eslint-codemod-utils';
  * @returns {ImportDeclaration}
  */
 export declare const getImportedNodeBySource: (source: SourceCode, path: string) => ImportDeclaration | undefined;
+/**
+ * Returns the module name of an identifier, if one exists.
+ *
+ * getModuleOfIdentifier(source, 'Button'); // "@atlaskit/button"
+ */
+export declare const getModuleOfIdentifier: (source: SourceCode, identifierName: string) => {
+    moduleName: string;
+    importName: string;
+} | undefined;

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

@@ -1,2 +1,3 @@
-import type { JSXAttribute, JSXElement } from 'eslint-codemod-utils';
+import type { JSXAttribute, JSXElement, JSXOpeningElement } from 'eslint-codemod-utils';
 export declare function findProp(jsx: JSXElement, propName: string): JSXAttribute | undefined;
+export declare function getJSXElementName(jsx: JSXOpeningElement): string;

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