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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 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/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/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/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/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/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.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"