@atlaskit/eslint-plugin-design-system 13.26.0 → 13.27.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.27.0
+
+### Minor Changes
+
+- [`32751f9d05b33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/32751f9d05b33) -
+  Introduces two new rules which guard against improper usage of `.toMatchSnapshot` and
+  `.toMatchInlineSnapshot`
+
 ## 13.26.0
 
 ### Minor Changes

package/README.md

@@ -89,7 +89,9 @@ module.exports = {
 | <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a>                                                               | Disallow physical properties and values in `css` and `cssMap` function calls.                                                                                                                                                                                                                                       |             | Yes     |             |
 | <a href="./src/rules/no-separator-with-list-elements/README.md">no-separator-with-list-elements</a>                                             | Warn when the `separator` prop is used with `as="li"`, `as="ol"`, or `as="dl"` in the Inline component.                                                                                                                                                                                                             | Yes         |         |             |
 | <a href="./src/rules/no-styled-tagged-template-expression/README.md">no-styled-tagged-template-expression</a>                                   | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                       |             | Yes     |             |
+| <a href="./src/rules/no-to-match-snapshot/README.md">no-to-match-snapshot</a>                                                                   | Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.                                                                                                                      |             |         |             |
 | <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-inline-snapshot/README.md">no-unsafe-inline-snapshot</a>                                                         | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.                                                                                                                                     |             |         |             |
 | <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/no-unused-css-map/README.md">no-unused-css-map</a>                                                                         | Detects unused styles in cssMap objects to help keep code clean.                                                                                                                                                                                                                                                    | Yes         |         |             |

package/dist/cjs/presets/all-flat.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::df988d512376c1317e5f7a350ad19fb9>>
+ * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -53,7 +53,9 @@ var rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': 'warn',

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::2dee8518d733b0b364809d0f5641afda>>
+ * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -52,7 +52,9 @@ var rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': 'warn',

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

@@ -45,7 +45,9 @@ var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
 var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
 var _noSeparatorWithListElements = _interopRequireDefault(require("./no-separator-with-list-elements"));
 var _noStyledTaggedTemplateExpression = _interopRequireDefault(require("./no-styled-tagged-template-expression"));
+var _noToMatchSnapshot = _interopRequireDefault(require("./no-to-match-snapshot"));
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-design-token-usage"));
+var _noUnsafeInlineSnapshot = _interopRequireDefault(require("./no-unsafe-inline-snapshot"));
 var _noUnsafeStyleOverrides = _interopRequireDefault(require("./no-unsafe-style-overrides"));
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _noUnusedCssMap = _interopRequireDefault(require("./no-unused-css-map"));
@@ -76,7 +78,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
+ * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -121,7 +123,9 @@ var rules = exports.rules = {
   'no-physical-properties': _noPhysicalProperties.default,
   'no-separator-with-list-elements': _noSeparatorWithListElements.default,
   'no-styled-tagged-template-expression': _noStyledTaggedTemplateExpression.default,
+  'no-to-match-snapshot': _noToMatchSnapshot.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
+  'no-unsafe-inline-snapshot': _noUnsafeInlineSnapshot.default,
   'no-unsafe-style-overrides': _noUnsafeStyleOverrides.default,
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'no-unused-css-map': _noUnusedCssMap.default,

package/dist/cjs/rules/no-to-match-snapshot/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.name = exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var name = exports.name = 'no-to-match-snapshot';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: name,
+    type: 'problem',
+    docs: {
+      description: 'Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      useInlineSnapshot: 'Use toMatchInlineSnapshot() instead of toMatchSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.'
+    }
+  },
+  create: function create(context) {
+    return {
+      MemberExpression: function MemberExpression(node) {
+        // Check if this is a call to toMatchSnapshot
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.property, 'Identifier') || node.property.name !== 'toMatchSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.object, 'CallExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        // We want to catch expect(...).toMatchSnapshot() but not just the property access
+        if (!node.parent || !(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'CallExpression')) {
+          return;
+        }
+        context.report({
+          node: node.property,
+          messageId: 'useInlineSnapshot'
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-unsafe-inline-snapshot/index.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.name = exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
+var _createRule = require("../utils/create-rule");
+var name = exports.name = 'no-unsafe-inline-snapshot';
+var MAX_LINES = 100;
+
+/**
+ * Checks if a snapshot contains internal implementation details
+ */
+function containsInternalDetails(snapshotContent) {
+  var issues = [];
+
+  // Check for className attributes (unless they equal "REDACTED")
+  // Handles: className="value", className='value', and whitespace variations
+  var classNameRegex = /className\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  var match;
+  while ((match = classNameRegex.exec(snapshotContent)) !== null) {
+    var classNameValue = match[2];
+    if (classNameValue && classNameValue !== 'REDACTED') {
+      issues.push("className=\"".concat(classNameValue, "\""));
+    }
+  }
+
+  // Check for style attributes (unless they equal "REDACTED")
+  // Handles: style="value", style='value', and whitespace variations
+  // Style values can contain colons, semicolons, etc., so we need to capture the full quoted value
+  var styleRegex = /style\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  while ((match = styleRegex.exec(snapshotContent)) !== null) {
+    var styleValue = match[2];
+    if (styleValue && styleValue !== 'REDACTED') {
+      issues.push("style=\"".concat(styleValue, "\""));
+    }
+  }
+
+  // Check for style blocks (unless they contain "REDACTED")
+  var styleBlockRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  while ((match = styleBlockRegex.exec(snapshotContent)) !== null) {
+    var styleContent = match[1];
+    if (styleContent && !styleContent.trim().includes('REDACTED')) {
+      issues.push('style block');
+    }
+  }
+  return {
+    hasIssues: issues.length > 0,
+    issues: issues
+  };
+}
+
+/**
+ * Extracts the snapshot content from a template literal or string literal
+ */
+function extractSnapshotContent(node, sourceCode) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'TemplateLiteral')) {
+    // For template literals, get the raw text including the template parts
+    return sourceCode.getText(node);
+  }
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') && typeof node.value === 'string') {
+    return node.value;
+  }
+  return null;
+}
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: name,
+    type: 'problem',
+    docs: {
+      description: 'Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      exceedsMaxLines: "Inline snapshot exceeds ".concat(MAX_LINES, " lines. Consider breaking it into smaller snapshots or using a different testing approach."),
+      containsInternalDetails: 'Inline snapshot contains internal implementation details: {{details}}. Use "REDACTED" for className and style values, or remove these details from the snapshot.'
+    }
+  },
+  create: function create(context) {
+    var sourceCode = (0, _contextCompat.getSourceCode)(context);
+    return {
+      MemberExpression: function MemberExpression(node) {
+        // Check if this is a call to toMatchInlineSnapshot
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.property, 'Identifier') || node.property.name !== 'toMatchInlineSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.object, 'CallExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        if (!node.parent || !(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'CallExpression')) {
+          return;
+        }
+
+        // Get the snapshot content from the first argument
+        var callExpression = node.parent;
+        if (callExpression.arguments.length === 0) {
+          return;
+        }
+        var snapshotArg = callExpression.arguments[0];
+        var snapshotContent = extractSnapshotContent(snapshotArg, sourceCode);
+        if (!snapshotContent) {
+          return;
+        }
+
+        // Check line count
+        var lines = snapshotContent.split('\n');
+        if (lines.length > MAX_LINES) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'exceedsMaxLines'
+          });
+          return;
+        }
+
+        // Check for internal implementation details
+        var _containsInternalDeta = containsInternalDetails(snapshotContent),
+          hasIssues = _containsInternalDeta.hasIssues,
+          issues = _containsInternalDeta.issues;
+        if (hasIssues) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'containsInternalDetails',
+            data: {
+              details: issues.slice(0, 3).join(', ') // Show first 3 issues
+            }
+          });
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
+ * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -47,7 +47,9 @@ const rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': 'warn',

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::2dee8518d733b0b364809d0f5641afda>>
+ * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -46,7 +46,9 @@ const rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': '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::c74b833590d4eb693616a3fcbf2e335a>>
+ * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -44,7 +44,9 @@ import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
 import noSeparatorWithListElements from './no-separator-with-list-elements';
 import noStyledTaggedTemplateExpression from './no-styled-tagged-template-expression';
+import noToMatchSnapshot from './no-to-match-snapshot';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
+import noUnsafeInlineSnapshot from './no-unsafe-inline-snapshot';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import noUnusedCssMap from './no-unused-css-map';
@@ -114,7 +116,9 @@ export const rules = {
   'no-physical-properties': noPhysicalProperties,
   'no-separator-with-list-elements': noSeparatorWithListElements,
   'no-styled-tagged-template-expression': noStyledTaggedTemplateExpression,
+  'no-to-match-snapshot': noToMatchSnapshot,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
+  'no-unsafe-inline-snapshot': noUnsafeInlineSnapshot,
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'no-unused-css-map': noUnusedCssMap,

package/dist/es2019/rules/no-to-match-snapshot/index.js

@@ -0,0 +1,43 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+export const name = 'no-to-match-snapshot';
+const rule = createLintRule({
+  meta: {
+    name,
+    type: 'problem',
+    docs: {
+      description: 'Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      useInlineSnapshot: 'Use toMatchInlineSnapshot() instead of toMatchSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.'
+    }
+  },
+  create(context) {
+    return {
+      MemberExpression(node) {
+        // Check if this is a call to toMatchSnapshot
+        if (!isNodeOfType(node.property, 'Identifier') || node.property.name !== 'toMatchSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!isNodeOfType(node.object, 'CallExpression') || !isNodeOfType(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        // We want to catch expect(...).toMatchSnapshot() but not just the property access
+        if (!node.parent || !isNodeOfType(node.parent, 'CallExpression')) {
+          return;
+        }
+        context.report({
+          node: node.property,
+          messageId: 'useInlineSnapshot'
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-unsafe-inline-snapshot/index.js

@@ -0,0 +1,134 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
+import { createLintRule } from '../utils/create-rule';
+export const name = 'no-unsafe-inline-snapshot';
+const MAX_LINES = 100;
+
+/**
+ * Checks if a snapshot contains internal implementation details
+ */
+function containsInternalDetails(snapshotContent) {
+  const issues = [];
+
+  // Check for className attributes (unless they equal "REDACTED")
+  // Handles: className="value", className='value', and whitespace variations
+  const classNameRegex = /className\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  let match;
+  while ((match = classNameRegex.exec(snapshotContent)) !== null) {
+    const classNameValue = match[2];
+    if (classNameValue && classNameValue !== 'REDACTED') {
+      issues.push(`className="${classNameValue}"`);
+    }
+  }
+
+  // Check for style attributes (unless they equal "REDACTED")
+  // Handles: style="value", style='value', and whitespace variations
+  // Style values can contain colons, semicolons, etc., so we need to capture the full quoted value
+  const styleRegex = /style\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  while ((match = styleRegex.exec(snapshotContent)) !== null) {
+    const styleValue = match[2];
+    if (styleValue && styleValue !== 'REDACTED') {
+      issues.push(`style="${styleValue}"`);
+    }
+  }
+
+  // Check for style blocks (unless they contain "REDACTED")
+  const styleBlockRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  while ((match = styleBlockRegex.exec(snapshotContent)) !== null) {
+    const styleContent = match[1];
+    if (styleContent && !styleContent.trim().includes('REDACTED')) {
+      issues.push('style block');
+    }
+  }
+  return {
+    hasIssues: issues.length > 0,
+    issues
+  };
+}
+
+/**
+ * Extracts the snapshot content from a template literal or string literal
+ */
+function extractSnapshotContent(node, sourceCode) {
+  if (isNodeOfType(node, 'TemplateLiteral')) {
+    // For template literals, get the raw text including the template parts
+    return sourceCode.getText(node);
+  }
+  if (isNodeOfType(node, 'Literal') && typeof node.value === 'string') {
+    return node.value;
+  }
+  return null;
+}
+const rule = createLintRule({
+  meta: {
+    name,
+    type: 'problem',
+    docs: {
+      description: 'Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      exceedsMaxLines: `Inline snapshot exceeds ${MAX_LINES} lines. Consider breaking it into smaller snapshots or using a different testing approach.`,
+      containsInternalDetails: 'Inline snapshot contains internal implementation details: {{details}}. Use "REDACTED" for className and style values, or remove these details from the snapshot.'
+    }
+  },
+  create(context) {
+    const sourceCode = getSourceCode(context);
+    return {
+      MemberExpression(node) {
+        // Check if this is a call to toMatchInlineSnapshot
+        if (!isNodeOfType(node.property, 'Identifier') || node.property.name !== 'toMatchInlineSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!isNodeOfType(node.object, 'CallExpression') || !isNodeOfType(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        if (!node.parent || !isNodeOfType(node.parent, 'CallExpression')) {
+          return;
+        }
+
+        // Get the snapshot content from the first argument
+        const callExpression = node.parent;
+        if (callExpression.arguments.length === 0) {
+          return;
+        }
+        const snapshotArg = callExpression.arguments[0];
+        const snapshotContent = extractSnapshotContent(snapshotArg, sourceCode);
+        if (!snapshotContent) {
+          return;
+        }
+
+        // Check line count
+        const lines = snapshotContent.split('\n');
+        if (lines.length > MAX_LINES) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'exceedsMaxLines'
+          });
+          return;
+        }
+
+        // Check for internal implementation details
+        const {
+          hasIssues,
+          issues
+        } = containsInternalDetails(snapshotContent);
+        if (hasIssues) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'containsInternalDetails',
+            data: {
+              details: issues.slice(0, 3).join(', ') // Show first 3 issues
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
+ * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -47,7 +47,9 @@ var rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': 'warn',

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::2dee8518d733b0b364809d0f5641afda>>
+ * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -46,7 +46,9 @@ var rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': '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::c74b833590d4eb693616a3fcbf2e335a>>
+ * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -44,7 +44,9 @@ import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
 import noSeparatorWithListElements from './no-separator-with-list-elements';
 import noStyledTaggedTemplateExpression from './no-styled-tagged-template-expression';
+import noToMatchSnapshot from './no-to-match-snapshot';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
+import noUnsafeInlineSnapshot from './no-unsafe-inline-snapshot';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import noUnusedCssMap from './no-unused-css-map';
@@ -114,7 +116,9 @@ export var rules = {
   'no-physical-properties': noPhysicalProperties,
   'no-separator-with-list-elements': noSeparatorWithListElements,
   'no-styled-tagged-template-expression': noStyledTaggedTemplateExpression,
+  'no-to-match-snapshot': noToMatchSnapshot,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
+  'no-unsafe-inline-snapshot': noUnsafeInlineSnapshot,
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'no-unused-css-map': noUnusedCssMap,

package/dist/esm/rules/no-to-match-snapshot/index.js

@@ -0,0 +1,43 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+export var name = 'no-to-match-snapshot';
+var rule = createLintRule({
+  meta: {
+    name: name,
+    type: 'problem',
+    docs: {
+      description: 'Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      useInlineSnapshot: 'Use toMatchInlineSnapshot() instead of toMatchSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.'
+    }
+  },
+  create: function create(context) {
+    return {
+      MemberExpression: function MemberExpression(node) {
+        // Check if this is a call to toMatchSnapshot
+        if (!isNodeOfType(node.property, 'Identifier') || node.property.name !== 'toMatchSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!isNodeOfType(node.object, 'CallExpression') || !isNodeOfType(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        // We want to catch expect(...).toMatchSnapshot() but not just the property access
+        if (!node.parent || !isNodeOfType(node.parent, 'CallExpression')) {
+          return;
+        }
+        context.report({
+          node: node.property,
+          messageId: 'useInlineSnapshot'
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/no-unsafe-inline-snapshot/index.js

@@ -0,0 +1,133 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
+import { createLintRule } from '../utils/create-rule';
+export var name = 'no-unsafe-inline-snapshot';
+var MAX_LINES = 100;
+
+/**
+ * Checks if a snapshot contains internal implementation details
+ */
+function containsInternalDetails(snapshotContent) {
+  var issues = [];
+
+  // Check for className attributes (unless they equal "REDACTED")
+  // Handles: className="value", className='value', and whitespace variations
+  var classNameRegex = /className\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  var match;
+  while ((match = classNameRegex.exec(snapshotContent)) !== null) {
+    var classNameValue = match[2];
+    if (classNameValue && classNameValue !== 'REDACTED') {
+      issues.push("className=\"".concat(classNameValue, "\""));
+    }
+  }
+
+  // Check for style attributes (unless they equal "REDACTED")
+  // Handles: style="value", style='value', and whitespace variations
+  // Style values can contain colons, semicolons, etc., so we need to capture the full quoted value
+  var styleRegex = /style\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  while ((match = styleRegex.exec(snapshotContent)) !== null) {
+    var styleValue = match[2];
+    if (styleValue && styleValue !== 'REDACTED') {
+      issues.push("style=\"".concat(styleValue, "\""));
+    }
+  }
+
+  // Check for style blocks (unless they contain "REDACTED")
+  var styleBlockRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  while ((match = styleBlockRegex.exec(snapshotContent)) !== null) {
+    var styleContent = match[1];
+    if (styleContent && !styleContent.trim().includes('REDACTED')) {
+      issues.push('style block');
+    }
+  }
+  return {
+    hasIssues: issues.length > 0,
+    issues: issues
+  };
+}
+
+/**
+ * Extracts the snapshot content from a template literal or string literal
+ */
+function extractSnapshotContent(node, sourceCode) {
+  if (isNodeOfType(node, 'TemplateLiteral')) {
+    // For template literals, get the raw text including the template parts
+    return sourceCode.getText(node);
+  }
+  if (isNodeOfType(node, 'Literal') && typeof node.value === 'string') {
+    return node.value;
+  }
+  return null;
+}
+var rule = createLintRule({
+  meta: {
+    name: name,
+    type: 'problem',
+    docs: {
+      description: 'Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      exceedsMaxLines: "Inline snapshot exceeds ".concat(MAX_LINES, " lines. Consider breaking it into smaller snapshots or using a different testing approach."),
+      containsInternalDetails: 'Inline snapshot contains internal implementation details: {{details}}. Use "REDACTED" for className and style values, or remove these details from the snapshot.'
+    }
+  },
+  create: function create(context) {
+    var sourceCode = getSourceCode(context);
+    return {
+      MemberExpression: function MemberExpression(node) {
+        // Check if this is a call to toMatchInlineSnapshot
+        if (!isNodeOfType(node.property, 'Identifier') || node.property.name !== 'toMatchInlineSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!isNodeOfType(node.object, 'CallExpression') || !isNodeOfType(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        if (!node.parent || !isNodeOfType(node.parent, 'CallExpression')) {
+          return;
+        }
+
+        // Get the snapshot content from the first argument
+        var callExpression = node.parent;
+        if (callExpression.arguments.length === 0) {
+          return;
+        }
+        var snapshotArg = callExpression.arguments[0];
+        var snapshotContent = extractSnapshotContent(snapshotArg, sourceCode);
+        if (!snapshotContent) {
+          return;
+        }
+
+        // Check line count
+        var lines = snapshotContent.split('\n');
+        if (lines.length > MAX_LINES) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'exceedsMaxLines'
+          });
+          return;
+        }
+
+        // Check for internal implementation details
+        var _containsInternalDeta = containsInternalDetails(snapshotContent),
+          hasIssues = _containsInternalDeta.hasIssues,
+          issues = _containsInternalDeta.issues;
+        if (hasIssues) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'containsInternalDetails',
+            data: {
+              details: issues.slice(0, 3).join(', ') // Show first 3 issues
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
+ * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

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::2dee8518d733b0b364809d0f5641afda>>
+ * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
+ * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types/rules/no-to-match-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-to-match-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-unsafe-inline-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-unsafe-inline-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
+ * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

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::2dee8518d733b0b364809d0f5641afda>>
+ * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
+ * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types-ts4.5/rules/no-to-match-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-to-match-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/no-unsafe-inline-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-unsafe-inline-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

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": "13.26.0",
+	"version": "13.27.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -41,7 +41,7 @@
 		"@atlaskit/eslint-utils": "^2.0.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/icon-lab": "^5.12.0",
-		"@atlaskit/tokens": "^8.2.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",