@atlaskit/eslint-plugin-design-system 8.0.2 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.1.0
+
+### Minor Changes
+
+- [`4f9c29b2f9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f9c29b2f9f) - Added the `no-nested-styles` rule which disallows usage of nested styles. The `no-nested-styles` rule also disallows media queries that contain min-width or max-width. The Atlassian Design System `media` object should be used instead. Other forms of media queries are still allowed.
+
 ## 8.0.2
 
 ### Patch Changes

package/README.md

@@ -50,14 +50,15 @@ module.exports = {
 | Rule                                                                                                    | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
 | <a href="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xCSS prop usages                                               | Yes         | Yes     |             |
-| <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                 | Enforces usage of design tokens rather than hard-coded values.                                  | Yes         | Yes     |             |
-| <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values.                      |             | Yes     |             |
+| <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                 | Enforces usage of design tokens rather than hard-coded values.                                  | Yes         | Yes     | Yes         |
+| <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values.                      |             | Yes     | Yes         |
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                 | Disallow importing banned modules.                                                              | Yes         |         |             |
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                               | Disallow using deprecated APIs.                                                                 | Yes         |         |             |
 | <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>   | Disallow using deprecated design tokens.                                                        | Yes         | Yes     |             |
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                          | Yes         |         |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                 | Disallow using the margin CSS property.                                                         |             |         |             |
+| <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-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/use-primitives/README.md">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     | Yes         |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                             | Enforce usage of the visually hidden component.                                                 | Yes         | Yes     |             |

package/constellation/index/usage.mdx

@@ -14,14 +14,15 @@ This plugin contains rules that should be used when working with the [Atlassian
 | Rule                                                                               | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
 | <a href="#consistent-css-prop-usage">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xCSS prop usages                                               | Yes         | Yes     |             |
-| <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                 | Enforces usage of design tokens rather than hard-coded values.                                  | Yes         | Yes     |             |
-| <a href="#ensure-design-token-usage-preview">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values.                      |             | Yes     |             |
+| <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                 | Enforces usage of design tokens rather than hard-coded values.                                  | Yes         | Yes     | Yes         |
+| <a href="#ensure-design-token-usage-preview">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values.                      |             | Yes     | Yes         |
 | <a href="#icon-label">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |
 | <a href="#no-banned-imports">no-banned-imports</a>                                 | Disallow importing banned modules.                                                              | Yes         |         |             |
 | <a href="#no-deprecated-apis">no-deprecated-apis</a>                               | Disallow using deprecated APIs.                                                                 | Yes         |         |             |
 | <a href="#no-deprecated-design-token-usage">no-deprecated-design-token-usage</a>   | Disallow using deprecated design tokens.                                                        | Yes         | Yes     |             |
 | <a href="#no-deprecated-imports">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                          | Yes         |         |             |
 | <a href="#no-margin">no-margin</a>                                                 | Disallow using the margin CSS property.                                                         |             |         |             |
+| <a href="#no-nested-styles">no-nested-styles</a>                                   | Disallows use of nested styles in `css` functions.                                              | 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="#use-primitives">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     | Yes         |
 | <a href="#use-visually-hidden">use-visually-hidden</a>                             | Enforce usage of the visually hidden component.                                                 | Yes         | Yes     |             |
@@ -451,6 +452,54 @@ css({ margin: '10px' });
 css({ gap: token('spacing.100') });
 ```
 
+## no-nested-styles
+
+Disallows using nested styles. Nested styles can change unexpectedly when child markup changes and result in duplicates when extracting to CSS.
+
+<h3>Examples</h3>
+
+This rule checks for nested styles inside `css` objects.
+This rule has no options.
+
+#### Incorrect
+
+```js
+css({
+  div: {
+    color: 'red',
+  },
+});
+```
+
+```js
+css({
+  '@media (min-width: 480px)': {
+    color: 'red',
+  },
+});
+```
+
+#### Correct
+
+```js
+css({
+  color: 'red',
+  ':hover': {
+    color: 'black',
+  },
+});
+```
+
+```js
+import { media } from '@atlaskit/primitives';
+
+css({
+  [media.above.xs]: {
+    color: 'red',
+  },
+});
+```
+
 ## no-unsafe-design-token-usage
 
 Using design tokens in an unsafe way risks the health of the system and will effect how fast your codebase can migrate between versions.

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::8f70fad50a1889d1f86b3339503a60d1>>
+ * @codegen <<SignedSource::43a2737550b7d1d9f26370cebe700c1d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
@@ -21,6 +21,7 @@ var _default = {
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
+    '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

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::5b7e085532640c14193d07c63e0f5442>>
+ * @codegen <<SignedSource::4a946a1b1d14700234605a44d7b2edd3>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
@@ -19,6 +19,7 @@ var _default = {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@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/use-visually-hidden': 'error'
   }

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

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cleanComments = cleanComments;
-exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
-exports.findIdentifierInParentScope = findIdentifierInParentScope;
-exports.findParentNodeForLine = void 0;
+exports.findParentNodeForLine = exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findTokenNameByPropertyValue = findTokenNameByPropertyValue;
 exports.getDomainsForProperty = getDomainsForProperty;
 exports.getFontSizeFromNode = getFontSizeFromNode;
@@ -29,6 +27,7 @@ exports.splitShorthandValues = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
+var _findInParent = require("../utils/find-in-parent");
 var _isColor = require("../utils/is-color");
 var _shape = require("./shape");
 var _typography = require("./typography");
@@ -36,21 +35,6 @@ var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'pa
 var spacingValueToToken = Object.fromEntries(_tokensRaw.spacing.map(function (token) {
   return [token.value, token.name];
 }));
-function findIdentifierInParentScope(_ref) {
-  var scope = _ref.scope,
-    identifierName = _ref.identifierName;
-  var traversingScope = scope;
-  while (traversingScope && traversingScope.type !== 'global') {
-    var matchedVariable = traversingScope.variables.find(function (variable) {
-      return variable.name === identifierName;
-    });
-    if (matchedVariable) {
-      return matchedVariable;
-    }
-    traversingScope = traversingScope.upper;
-  }
-  return null;
-}
 function insertTokensImport(fixer) {
   return (0, _eslintCodemodUtils.insertAtStartOfFile)(fixer, "".concat((0, _eslintCodemodUtils.insertImportDeclaration)('@atlaskit/tokens', ['token']), "\n"));
 }
@@ -177,7 +161,7 @@ var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
     return 8;
   }
   var scope = context.getScope();
-  var variable = findIdentifierInParentScope({
+  var variable = (0, _findInParent.findIdentifierInParentScope)({
     scope: scope,
     identifierName: node.name
   });
@@ -447,9 +431,9 @@ function getTokenNodeForValue(propertyName, value) {
   });
 }
 function getFontSizeValueInScope(cssProperties) {
-  var fontSizeNode = cssProperties.find(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
-      style = _ref3[0];
+  var fontSizeNode = cssProperties.find(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+      style = _ref2[0];
     var _style$split = style.split(':'),
       _style$split2 = (0, _slicedToArray2.default)(_style$split, 2),
       rawProperty = _style$split2[0],

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

@@ -14,12 +14,13 @@ var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
 var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./no-deprecated-design-token-usage"));
 var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-imports"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
+var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-design-token-usage"));
 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::4dc269134c0cd38281be0b5ad7582dc8>>
+ * @codegen <<SignedSource::10aa91b16d9c498373b4a22760ca7fab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
@@ -32,6 +33,7 @@ var _default = {
   'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
   'no-deprecated-imports': _noDeprecatedImports.default,
   'no-margin': _noMargin.default,
+  'no-nested-styles': _noNestedStyles.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
   'use-primitives': _usePrimitives.default,
   'use-visually-hidden': _useVisuallyHidden.default

package/dist/cjs/rules/no-nested-styles/index.js

@@ -0,0 +1,140 @@
+"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 _findInParent = require("../utils/find-in-parent");
+var allowedPrefix = [':', '&:'];
+var allowedResponsiveImports = ['@atlaskit/primitives/responsive', '@atlaskit/primitives'];
+
+/**
+ * Tests against properties using the Design System primitives media object: [media.above.md]
+ * @returns true if the property is a media query
+ */
+var isMediaObject = function isMediaObject(node, context) {
+  if (node.type === 'MemberExpression') {
+    if (node.object.type === 'MemberExpression' && node.object.object.type === 'Identifier') {
+      var scope = context.getScope();
+      var variable = (0, _findInParent.findIdentifierInParentScope)({
+        scope: scope,
+        identifierName: node.object.object.name
+      });
+      if (!variable) {
+        return false;
+      }
+      var definition = variable.defs[0];
+
+      // Make sure it's coming from the primitives packages and isn't a bootleg media query or worse: nested styles
+      if ((0, _eslintCodemodUtils.isNodeOfType)(definition.node, 'ImportSpecifier') && definition.node.parent && (0, _eslintCodemodUtils.isNodeOfType)(definition.node.parent, 'ImportDeclaration') && allowedResponsiveImports.includes(definition.node.parent.source.value)) {
+        // This should match the name of the media object exported from packages/design-system/primitives/src/responsive/media-helper.tsx
+        return definition.node.imported.name === 'media';
+      }
+    }
+  }
+  return false;
+};
+var parseSelector = function parseSelector(rawSelector) {
+  if (typeof rawSelector !== 'string') {
+    throw new Error('expected string');
+  }
+  var selectors = rawSelector.split(',').map(function (selector) {
+    return selector.trim();
+  });
+  return selectors;
+};
+var getKeyValue = function getKeyValue(node, context) {
+  if (node.type === 'Identifier') {
+    return node.name;
+  }
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
+  }
+  if (isMediaObject(node, context)) {
+    return '@media';
+  }
+  return '';
+};
+var isWidthMediaQuery = function isWidthMediaQuery(rawSelector) {
+  var selectors = parseSelector(rawSelector);
+  if (selectors[0].startsWith('@')) {
+    // If the selector includes a min-width/max-width query, return false - the primitives media object should be used instead:
+    // https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples
+    // Otherwise return true, non-width queries are acceptable
+    return selectors.some(function (selector) {
+      return selector.includes('min-width') || selector.includes('max-width');
+    });
+  }
+  return false;
+};
+var isAllowedNestedSelector = function isAllowedNestedSelector(rawSelector) {
+  if (rawSelector.trim() === '&') {
+    // This can be written without the nest.
+    return false;
+  }
+  var selectors = parseSelector(rawSelector);
+  if (selectors[0].startsWith('@')) {
+    // Bail early as it's an at selector. Width queries are handled by `isWidthMediaQuery`.
+    return true;
+  }
+  return selectors.every(function (selector) {
+    return selector === '&' || allowedPrefix.find(function (prefix) {
+      return selector.startsWith(prefix);
+    });
+  });
+};
+var isUsingDirectDataAttribute = function isUsingDirectDataAttribute(rawSelector) {
+  var selectors = parseSelector(rawSelector);
+  return selectors.some(function (selector) {
+    return selector.startsWith('&[');
+  });
+};
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-nested-styles',
+    docs: {
+      description: 'Disallows use of nested styles in `css` functions.',
+      recommended: true,
+      severity: 'error'
+    },
+    messages: {
+      noWidthQueries: 'Media queries that target min-width or max-width are not allowed. Use the media object provided by the Atlassian Design System instead. https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples',
+      noNestedStyles: 'Nested styles are not allowed as they can change unexpectedly when child markup changes and result in duplicates when extracting to CSS.',
+      noDirectNestedStyles: "Styles applied with data attributes are not allowed, split them into discrete CSS declarations and apply them conditionally with JavaScript.\n\n```\nconst disabledStyles = css({ opacity: 0.5 });\n\n<div css={isDisabled && disabledStyles} />\n```\n"
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': function CallExpressionCalleeNameCssObjectExpressionPropertyCallExpressionCalleeNameXcssObjectExpressionProperty(node) {
+        if (node.type !== 'Property' || node.value.type !== 'ObjectExpression') {
+          return;
+        }
+        if (isUsingDirectDataAttribute(getKeyValue(node.key, context))) {
+          context.report({
+            node: node,
+            messageId: 'noDirectNestedStyles'
+          });
+          return;
+        }
+        if (isWidthMediaQuery(getKeyValue(node.key, context))) {
+          context.report({
+            node: node,
+            messageId: 'noWidthQueries'
+          });
+          return;
+        }
+        if (!isAllowedNestedSelector(getKeyValue(node.key, context))) {
+          context.report({
+            node: node,
+            messageId: 'noNestedStyles'
+          });
+          return;
+        }
+      }
+    };
+  }
+});
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/utils/find-in-parent.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findIdentifierInParentScope = findIdentifierInParentScope;
+/**
+ * This will search first matched identifier in same and parent scopes.
+ * Returns first matched identifer otherwise null.
+ */
+function findIdentifierInParentScope(_ref) {
+  var scope = _ref.scope,
+    identifierName = _ref.identifierName;
+  var traversingScope = scope;
+  while (traversingScope && traversingScope.type !== 'global') {
+    var matchedVariable = traversingScope.variables.find(function (variable) {
+      return variable.name === identifierName;
+    });
+    if (matchedVariable) {
+      return matchedVariable;
+    }
+    traversingScope = traversingScope.upper;
+  }
+  return null;
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "8.0.2",
+	"version": "8.1.0",
 	"sideEffects": false
 }

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::8f70fad50a1889d1f86b3339503a60d1>>
+ * @codegen <<SignedSource::43a2737550b7d1d9f26370cebe700c1d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -15,6 +15,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
+    '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

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::5b7e085532640c14193d07c63e0f5442>>
+ * @codegen <<SignedSource::4a946a1b1d14700234605a44d7b2edd3>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -13,6 +13,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@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/use-visually-hidden': 'error'
   }

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

@@ -1,24 +1,11 @@
 import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale } from '@atlaskit/tokens/tokens-raw';
+import { findIdentifierInParentScope } from '../utils/find-in-parent';
 import { isColorCssPropertyName } from '../utils/is-color';
 import { borderWidthValueToToken, isBorderRadius, isBorderSizeProperty, isShapeProperty, radiusValueToToken } from './shape';
 import { isCodeFontFamily, isFontFamily, isFontSize, isFontSizeSmall, isTypographyProperty, typographyValueToToken } from './typography';
 const properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap', 'top', 'left', 'right', 'bottom', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'outline-offset'];
 const spacingValueToToken = Object.fromEntries(spacingScale.map(token => [token.value, token.name]));
-export function findIdentifierInParentScope({
-  scope,
-  identifierName
-}) {
-  let traversingScope = scope;
-  while (traversingScope && traversingScope.type !== 'global') {
-    const matchedVariable = traversingScope.variables.find(variable => variable.name === identifierName);
-    if (matchedVariable) {
-      return matchedVariable;
-    }
-    traversingScope = traversingScope.upper;
-  }
-  return null;
-}
 export function insertTokensImport(fixer) {
   return insertAtStartOfFile(fixer, `${insertImportDeclaration('@atlaskit/tokens', ['token'])}\n`);
 }

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::4dc269134c0cd38281be0b5ad7582dc8>>
+ * @codegen <<SignedSource::10aa91b16d9c498373b4a22760ca7fab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -12,6 +12,7 @@ import noDeprecatedApis from './no-deprecated-apis';
 import noDeprecatedDesignTokenUsage from './no-deprecated-design-token-usage';
 import noDeprecatedImports from './no-deprecated-imports';
 import noMargin from './no-margin';
+import noNestedStyles from './no-nested-styles';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import usePrimitives from './use-primitives';
 import useVisuallyHidden from './use-visually-hidden';
@@ -25,6 +26,7 @@ export default {
   'no-deprecated-design-token-usage': noDeprecatedDesignTokenUsage,
   'no-deprecated-imports': noDeprecatedImports,
   'no-margin': noMargin,
+  'no-nested-styles': noNestedStyles,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
   'use-primitives': usePrimitives,
   'use-visually-hidden': useVisuallyHidden

package/dist/es2019/rules/no-nested-styles/index.js

@@ -0,0 +1,132 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { findIdentifierInParentScope } from '../utils/find-in-parent';
+const allowedPrefix = [':', '&:'];
+const allowedResponsiveImports = ['@atlaskit/primitives/responsive', '@atlaskit/primitives'];
+
+/**
+ * Tests against properties using the Design System primitives media object: [media.above.md]
+ * @returns true if the property is a media query
+ */
+const isMediaObject = (node, context) => {
+  if (node.type === 'MemberExpression') {
+    if (node.object.type === 'MemberExpression' && node.object.object.type === 'Identifier') {
+      const scope = context.getScope();
+      const variable = findIdentifierInParentScope({
+        scope,
+        identifierName: node.object.object.name
+      });
+      if (!variable) {
+        return false;
+      }
+      const definition = variable.defs[0];
+
+      // Make sure it's coming from the primitives packages and isn't a bootleg media query or worse: nested styles
+      if (isNodeOfType(definition.node, 'ImportSpecifier') && definition.node.parent && isNodeOfType(definition.node.parent, 'ImportDeclaration') && allowedResponsiveImports.includes(definition.node.parent.source.value)) {
+        // This should match the name of the media object exported from packages/design-system/primitives/src/responsive/media-helper.tsx
+        return definition.node.imported.name === 'media';
+      }
+    }
+  }
+  return false;
+};
+const parseSelector = rawSelector => {
+  if (typeof rawSelector !== 'string') {
+    throw new Error('expected string');
+  }
+  const selectors = rawSelector.split(',').map(selector => selector.trim());
+  return selectors;
+};
+const getKeyValue = (node, context) => {
+  if (node.type === 'Identifier') {
+    return node.name;
+  }
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
+  }
+  if (isMediaObject(node, context)) {
+    return '@media';
+  }
+  return '';
+};
+const isWidthMediaQuery = rawSelector => {
+  const selectors = parseSelector(rawSelector);
+  if (selectors[0].startsWith('@')) {
+    // If the selector includes a min-width/max-width query, return false - the primitives media object should be used instead:
+    // https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples
+    // Otherwise return true, non-width queries are acceptable
+    return selectors.some(selector => selector.includes('min-width') || selector.includes('max-width'));
+  }
+  return false;
+};
+const isAllowedNestedSelector = rawSelector => {
+  if (rawSelector.trim() === '&') {
+    // This can be written without the nest.
+    return false;
+  }
+  const selectors = parseSelector(rawSelector);
+  if (selectors[0].startsWith('@')) {
+    // Bail early as it's an at selector. Width queries are handled by `isWidthMediaQuery`.
+    return true;
+  }
+  return selectors.every(selector => {
+    return selector === '&' || allowedPrefix.find(prefix => selector.startsWith(prefix));
+  });
+};
+const isUsingDirectDataAttribute = rawSelector => {
+  const selectors = parseSelector(rawSelector);
+  return selectors.some(selector => selector.startsWith('&['));
+};
+const rule = createLintRule({
+  meta: {
+    name: 'no-nested-styles',
+    docs: {
+      description: 'Disallows use of nested styles in `css` functions.',
+      recommended: true,
+      severity: 'error'
+    },
+    messages: {
+      noWidthQueries: 'Media queries that target min-width or max-width are not allowed. Use the media object provided by the Atlassian Design System instead. https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples',
+      noNestedStyles: 'Nested styles are not allowed as they can change unexpectedly when child markup changes and result in duplicates when extracting to CSS.',
+      noDirectNestedStyles: `Styles applied with data attributes are not allowed, split them into discrete CSS declarations and apply them conditionally with JavaScript.
+
+\`\`\`
+const disabledStyles = css({ opacity: 0.5 });
+
+<div css={isDisabled && disabledStyles} />
+\`\`\`
+`
+    }
+  },
+  create(context) {
+    return {
+      'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': node => {
+        if (node.type !== 'Property' || node.value.type !== 'ObjectExpression') {
+          return;
+        }
+        if (isUsingDirectDataAttribute(getKeyValue(node.key, context))) {
+          context.report({
+            node,
+            messageId: 'noDirectNestedStyles'
+          });
+          return;
+        }
+        if (isWidthMediaQuery(getKeyValue(node.key, context))) {
+          context.report({
+            node,
+            messageId: 'noWidthQueries'
+          });
+          return;
+        }
+        if (!isAllowedNestedSelector(getKeyValue(node.key, context))) {
+          context.report({
+            node,
+            messageId: 'noNestedStyles'
+          });
+          return;
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/utils/find-in-parent.js

@@ -0,0 +1,18 @@
+/**
+ * This will search first matched identifier in same and parent scopes.
+ * Returns first matched identifer otherwise null.
+ */
+export function findIdentifierInParentScope({
+  scope,
+  identifierName
+}) {
+  let traversingScope = scope;
+  while (traversingScope && traversingScope.type !== 'global') {
+    const matchedVariable = traversingScope.variables.find(variable => variable.name === identifierName);
+    if (matchedVariable) {
+      return matchedVariable;
+    }
+    traversingScope = traversingScope.upper;
+  }
+  return null;
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "8.0.2",
+	"version": "8.1.0",
 	"sideEffects": false
 }

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::8f70fad50a1889d1f86b3339503a60d1>>
+ * @codegen <<SignedSource::43a2737550b7d1d9f26370cebe700c1d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -15,6 +15,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
+    '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

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::5b7e085532640c14193d07c63e0f5442>>
+ * @codegen <<SignedSource::4a946a1b1d14700234605a44d7b2edd3>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -13,6 +13,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@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/use-visually-hidden': 'error'
   }

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

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale } from '@atlaskit/tokens/tokens-raw';
+import { findIdentifierInParentScope } from '../utils/find-in-parent';
 import { isColorCssPropertyName } from '../utils/is-color';
 import { borderWidthValueToToken, isBorderRadius, isBorderSizeProperty, isShapeProperty, radiusValueToToken } from './shape';
 import { isCodeFontFamily, isFontFamily, isFontSize, isFontSizeSmall, isTypographyProperty, typographyValueToToken } from './typography';
@@ -8,21 +9,6 @@ var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'pa
 var spacingValueToToken = Object.fromEntries(spacingScale.map(function (token) {
   return [token.value, token.name];
 }));
-export function findIdentifierInParentScope(_ref) {
-  var scope = _ref.scope,
-    identifierName = _ref.identifierName;
-  var traversingScope = scope;
-  while (traversingScope && traversingScope.type !== 'global') {
-    var matchedVariable = traversingScope.variables.find(function (variable) {
-      return variable.name === identifierName;
-    });
-    if (matchedVariable) {
-      return matchedVariable;
-    }
-    traversingScope = traversingScope.upper;
-  }
-  return null;
-}
 export function insertTokensImport(fixer) {
   return insertAtStartOfFile(fixer, "".concat(insertImportDeclaration('@atlaskit/tokens', ['token']), "\n"));
 }
@@ -406,9 +392,9 @@ export function getTokenNodeForValue(propertyName, value) {
   });
 }
 export function getFontSizeValueInScope(cssProperties) {
-  var fontSizeNode = cssProperties.find(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 1),
-      style = _ref3[0];
+  var fontSizeNode = cssProperties.find(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      style = _ref2[0];
     var _style$split = style.split(':'),
       _style$split2 = _slicedToArray(_style$split, 2),
       rawProperty = _style$split2[0],

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::4dc269134c0cd38281be0b5ad7582dc8>>
+ * @codegen <<SignedSource::10aa91b16d9c498373b4a22760ca7fab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -12,6 +12,7 @@ import noDeprecatedApis from './no-deprecated-apis';
 import noDeprecatedDesignTokenUsage from './no-deprecated-design-token-usage';
 import noDeprecatedImports from './no-deprecated-imports';
 import noMargin from './no-margin';
+import noNestedStyles from './no-nested-styles';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import usePrimitives from './use-primitives';
 import useVisuallyHidden from './use-visually-hidden';
@@ -25,6 +26,7 @@ export default {
   'no-deprecated-design-token-usage': noDeprecatedDesignTokenUsage,
   'no-deprecated-imports': noDeprecatedImports,
   'no-margin': noMargin,
+  'no-nested-styles': noNestedStyles,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
   'use-primitives': usePrimitives,
   'use-visually-hidden': useVisuallyHidden

package/dist/esm/rules/no-nested-styles/index.js

@@ -0,0 +1,133 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { findIdentifierInParentScope } from '../utils/find-in-parent';
+var allowedPrefix = [':', '&:'];
+var allowedResponsiveImports = ['@atlaskit/primitives/responsive', '@atlaskit/primitives'];
+
+/**
+ * Tests against properties using the Design System primitives media object: [media.above.md]
+ * @returns true if the property is a media query
+ */
+var isMediaObject = function isMediaObject(node, context) {
+  if (node.type === 'MemberExpression') {
+    if (node.object.type === 'MemberExpression' && node.object.object.type === 'Identifier') {
+      var scope = context.getScope();
+      var variable = findIdentifierInParentScope({
+        scope: scope,
+        identifierName: node.object.object.name
+      });
+      if (!variable) {
+        return false;
+      }
+      var definition = variable.defs[0];
+
+      // Make sure it's coming from the primitives packages and isn't a bootleg media query or worse: nested styles
+      if (isNodeOfType(definition.node, 'ImportSpecifier') && definition.node.parent && isNodeOfType(definition.node.parent, 'ImportDeclaration') && allowedResponsiveImports.includes(definition.node.parent.source.value)) {
+        // This should match the name of the media object exported from packages/design-system/primitives/src/responsive/media-helper.tsx
+        return definition.node.imported.name === 'media';
+      }
+    }
+  }
+  return false;
+};
+var parseSelector = function parseSelector(rawSelector) {
+  if (typeof rawSelector !== 'string') {
+    throw new Error('expected string');
+  }
+  var selectors = rawSelector.split(',').map(function (selector) {
+    return selector.trim();
+  });
+  return selectors;
+};
+var getKeyValue = function getKeyValue(node, context) {
+  if (node.type === 'Identifier') {
+    return node.name;
+  }
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
+  }
+  if (isMediaObject(node, context)) {
+    return '@media';
+  }
+  return '';
+};
+var isWidthMediaQuery = function isWidthMediaQuery(rawSelector) {
+  var selectors = parseSelector(rawSelector);
+  if (selectors[0].startsWith('@')) {
+    // If the selector includes a min-width/max-width query, return false - the primitives media object should be used instead:
+    // https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples
+    // Otherwise return true, non-width queries are acceptable
+    return selectors.some(function (selector) {
+      return selector.includes('min-width') || selector.includes('max-width');
+    });
+  }
+  return false;
+};
+var isAllowedNestedSelector = function isAllowedNestedSelector(rawSelector) {
+  if (rawSelector.trim() === '&') {
+    // This can be written without the nest.
+    return false;
+  }
+  var selectors = parseSelector(rawSelector);
+  if (selectors[0].startsWith('@')) {
+    // Bail early as it's an at selector. Width queries are handled by `isWidthMediaQuery`.
+    return true;
+  }
+  return selectors.every(function (selector) {
+    return selector === '&' || allowedPrefix.find(function (prefix) {
+      return selector.startsWith(prefix);
+    });
+  });
+};
+var isUsingDirectDataAttribute = function isUsingDirectDataAttribute(rawSelector) {
+  var selectors = parseSelector(rawSelector);
+  return selectors.some(function (selector) {
+    return selector.startsWith('&[');
+  });
+};
+var rule = createLintRule({
+  meta: {
+    name: 'no-nested-styles',
+    docs: {
+      description: 'Disallows use of nested styles in `css` functions.',
+      recommended: true,
+      severity: 'error'
+    },
+    messages: {
+      noWidthQueries: 'Media queries that target min-width or max-width are not allowed. Use the media object provided by the Atlassian Design System instead. https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples',
+      noNestedStyles: 'Nested styles are not allowed as they can change unexpectedly when child markup changes and result in duplicates when extracting to CSS.',
+      noDirectNestedStyles: "Styles applied with data attributes are not allowed, split them into discrete CSS declarations and apply them conditionally with JavaScript.\n\n```\nconst disabledStyles = css({ opacity: 0.5 });\n\n<div css={isDisabled && disabledStyles} />\n```\n"
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': function CallExpressionCalleeNameCssObjectExpressionPropertyCallExpressionCalleeNameXcssObjectExpressionProperty(node) {
+        if (node.type !== 'Property' || node.value.type !== 'ObjectExpression') {
+          return;
+        }
+        if (isUsingDirectDataAttribute(getKeyValue(node.key, context))) {
+          context.report({
+            node: node,
+            messageId: 'noDirectNestedStyles'
+          });
+          return;
+        }
+        if (isWidthMediaQuery(getKeyValue(node.key, context))) {
+          context.report({
+            node: node,
+            messageId: 'noWidthQueries'
+          });
+          return;
+        }
+        if (!isAllowedNestedSelector(getKeyValue(node.key, context))) {
+          context.report({
+            node: node,
+            messageId: 'noNestedStyles'
+          });
+          return;
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/utils/find-in-parent.js

@@ -0,0 +1,19 @@
+/**
+ * This will search first matched identifier in same and parent scopes.
+ * Returns first matched identifer otherwise null.
+ */
+export function findIdentifierInParentScope(_ref) {
+  var scope = _ref.scope,
+    identifierName = _ref.identifierName;
+  var traversingScope = scope;
+  while (traversingScope && traversingScope.type !== 'global') {
+    var matchedVariable = traversingScope.variables.find(function (variable) {
+      return variable.name === identifierName;
+    });
+    if (matchedVariable) {
+      return matchedVariable;
+    }
+    traversingScope = traversingScope.upper;
+  }
+  return null;
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "8.0.2",
+	"version": "8.1.0",
 	"sideEffects": false
 }

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

@@ -12,6 +12,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-design-token-usage': string;
             '@atlaskit/design-system/no-deprecated-imports': string;
             '@atlaskit/design-system/no-margin': string;
+            '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-visually-hidden': string;
@@ -27,6 +28,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-apis': string;
             '@atlaskit/design-system/no-deprecated-design-token-usage': string;
             '@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/use-visually-hidden': 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::8f70fad50a1889d1f86b3339503a60d1>>
+ * @codegen <<SignedSource::43a2737550b7d1d9f26370cebe700c1d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -15,6 +15,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-design-token-usage': string;
         '@atlaskit/design-system/no-deprecated-imports': string;
         '@atlaskit/design-system/no-margin': string;
+        '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-visually-hidden': 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::5b7e085532640c14193d07c63e0f5442>>
+ * @codegen <<SignedSource::4a946a1b1d14700234605a44d7b2edd3>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -13,6 +13,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-apis': string;
         '@atlaskit/design-system/no-deprecated-design-token-usage': string;
         '@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/use-visually-hidden': string;
     };

package/dist/types/rules/ensure-design-token-usage/spacing-utils.d.ts

@@ -1,11 +1,7 @@
-import type { Rule, Scope } from 'eslint';
+import type { Rule } from 'eslint';
 import { EslintNode, ObjectExpression, TaggedTemplateExpression } from 'eslint-codemod-utils';
 import { Domains } from './types';
 export type ProcessedCSSLines = [string, string][];
-export declare function findIdentifierInParentScope({ scope, identifierName, }: {
-    scope: Scope.Scope;
-    identifierName: string;
-}): Scope.Variable | null;
 export declare function insertTokensImport(fixer: Rule.RuleFixer): Rule.Fix;
 export declare const isSpacingProperty: (propertyName: string) => boolean;
 /**

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

@@ -12,6 +12,7 @@ declare const _default: {
         deprecatedConfig: import("./utils/types").DeprecatedConfig;
     }], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
     'no-margin': import("eslint").Rule.RuleModule;
+    'no-nested-styles': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;

package/dist/types/rules/no-nested-styles/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/utils/find-in-parent.d.ts

@@ -0,0 +1,9 @@
+import type { Scope } from 'eslint';
+/**
+ * This will search first matched identifier in same and parent scopes.
+ * Returns first matched identifer otherwise null.
+ */
+export declare function findIdentifierInParentScope({ scope, identifierName, }: {
+    scope: Scope.Scope;
+    identifierName: string;
+}): Scope.Variable | null;

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

@@ -12,6 +12,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-design-token-usage': string;
             '@atlaskit/design-system/no-deprecated-imports': string;
             '@atlaskit/design-system/no-margin': string;
+            '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-visually-hidden': string;
@@ -27,6 +28,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-apis': string;
             '@atlaskit/design-system/no-deprecated-design-token-usage': string;
             '@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/use-visually-hidden': 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::8f70fad50a1889d1f86b3339503a60d1>>
+ * @codegen <<SignedSource::43a2737550b7d1d9f26370cebe700c1d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -15,6 +15,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-design-token-usage': string;
         '@atlaskit/design-system/no-deprecated-imports': string;
         '@atlaskit/design-system/no-margin': string;
+        '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-visually-hidden': 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::5b7e085532640c14193d07c63e0f5442>>
+ * @codegen <<SignedSource::4a946a1b1d14700234605a44d7b2edd3>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -13,6 +13,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-apis': string;
         '@atlaskit/design-system/no-deprecated-design-token-usage': string;
         '@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/use-visually-hidden': string;
     };

package/dist/types-ts4.5/rules/ensure-design-token-usage/spacing-utils.d.ts

@@ -1,14 +1,10 @@
-import type { Rule, Scope } from 'eslint';
+import type { Rule } from 'eslint';
 import { EslintNode, ObjectExpression, TaggedTemplateExpression } from 'eslint-codemod-utils';
 import { Domains } from './types';
 export type ProcessedCSSLines = [
     string,
     string
 ][];
-export declare function findIdentifierInParentScope({ scope, identifierName, }: {
-    scope: Scope.Scope;
-    identifierName: string;
-}): Scope.Variable | null;
 export declare function insertTokensImport(fixer: Rule.RuleFixer): Rule.Fix;
 export declare const isSpacingProperty: (propertyName: string) => boolean;
 /**

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

@@ -16,6 +16,7 @@ declare const _default: {
         }
     ], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
     'no-margin': import("eslint").Rule.RuleModule;
+    'no-nested-styles': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/no-nested-styles/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/utils/find-in-parent.d.ts

@@ -0,0 +1,9 @@
+import type { Scope } from 'eslint';
+/**
+ * This will search first matched identifier in same and parent scopes.
+ * Returns first matched identifer otherwise null.
+ */
+export declare function findIdentifierInParentScope({ scope, identifierName, }: {
+    scope: Scope.Scope;
+    identifierName: string;
+}): Scope.Variable | null;

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.0.2",
+  "version": "8.1.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.12.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@typescript-eslint/utils": "^5.48.1",
     "ajv": "^6.12.6",

package/report.api.md

@@ -33,6 +33,7 @@ export const configs: {
       '@atlaskit/design-system/no-deprecated-design-token-usage': string;
       '@atlaskit/design-system/no-deprecated-imports': string;
       '@atlaskit/design-system/no-margin': string;
+      '@atlaskit/design-system/no-nested-styles': string;
       '@atlaskit/design-system/no-unsafe-design-token-usage': string;
       '@atlaskit/design-system/use-primitives': string;
       '@atlaskit/design-system/use-visually-hidden': string;
@@ -48,6 +49,7 @@ export const configs: {
       '@atlaskit/design-system/no-deprecated-apis': string;
       '@atlaskit/design-system/no-deprecated-design-token-usage': string;
       '@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/use-visually-hidden': string;
     };
@@ -116,6 +118,7 @@ export const rules: {
     RuleListener
   >;
   'no-margin': Rule.RuleModule;
+  'no-nested-styles': Rule.RuleModule;
   'no-unsafe-design-token-usage': Rule.RuleModule;
   'use-primitives': Rule.RuleModule;
   'use-visually-hidden': Rule.RuleModule;