@double-great/stylelint-a11y 3.1.0 → 3.3.0

package/CHANGELOG.md

@@ -5,6 +5,68 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.3.0] - 2025-08-17
+
+### Added
+
+- Advanced testing infrastructure with comprehensive CI/CD workflows
+- System-level performance regression testing suite
+- Cross-platform compatibility testing for Node.js environments
+- Integration tests for real-world stylelint plugin functionality
+- Enhanced rule configuration options with customizable parameters
+- Meta objects for all rules with documentation URLs and fixable status
+- Comprehensive rule documentation with examples and configuration options
+
+### Changed
+
+- Enhanced stylelint standards compliance with proper meta objects across all rules
+- Standardized rule message formatting for consistent error reporting
+- Improved Jest configuration with proper Node.js module support
+- Updated all rule implementations to follow modern stylelint plugin patterns
+- Enhanced rule functionality with configurable options for better customization
+- Improved error messages for better developer experience
+
+### Fixed
+
+- Removed deprecated experimental VM modules flag from Jest scripts for Node.js compatibility
+- Resolved CI performance test expectations for consistent build environments
+- Cleaned up test infrastructure and removed redundant configuration files
+- Fixed rule message clarity and consistency across all accessibility rules
+
+## [3.2.0] - 2025-08-16
+
+### Added
+
+- Comprehensive E2E testing infrastructure with real-world projects
+- Integration testing suite for plugin functionality
+- Performance benchmarking with regression detection
+- Test helper utilities for simplified testing
+- Support for SCSS/Sass project testing
+- Large codebase performance testing
+- CLI integration tests with full stylelint compatibility
+- Development documentation in README
+- Pull request template for consistent PR descriptions
+
+### Changed
+
+- Standardized import patterns across all rules for better consistency
+- Fixed rule order in exports object to maintain alphabetical sorting
+- Improved Jest configuration for multiple test types
+- Enhanced ESLint configuration for E2E tests
+- Updated actions/checkout from v4 to v5 (#77)
+
+### Fixed
+
+- Fixed `media-prefers-reduced-motion` rule incorrectly adding duplicate media queries when `prefers-reduced-motion` is already nested inside another media query (#66)
+
+### Developer Experience
+
+- Added npm scripts for granular test execution (`test:unit`, `test:integration`, `test:e2e`, `test:all`)
+- Simplified test utilities for faster development
+- Cross-platform compatibility testing
+- Performance metrics and scaling tests
+- Individual rule benchmarks included
+
 ## [3.1.0] - 2025-08-16
 
 ### Added

package/README.md

@@ -52,19 +52,47 @@ This shareable config contains the following:
 
 Since it adds stylelint-a11y to `plugins`, you don't have to do this yourself when extending this config.
 
-## Help out
+## Rule Configuration
 
-There work on the plugin's rules is still in progress, so if you feel like it, you're welcome to help out in any of these (the plugin follows stylelint guidelines so most part of this is based on its docs):
+Many rules support additional configuration options for customization. For example:
 
-- Create, enhance, and debug rules (see stylelint's guide to "[Working on rules](https://github.com/stylelint/stylelint/blob/main/docs/developer-guide/rules.md)").
-- Improve documentation.
-- Chime in on any open issue or pull request.
-- Open new issues about your ideas on new rules, or for how to improve the existing ones, and pull requests to show us how your idea works.
-- Add new tests to absolutely anything.
-- Work on improving performance of rules.
-- Contribute to [stylelint](https://github.com/stylelint/stylelint)
-- Spread the word.
+```json
+{
+  "rules": {
+    "a11y/font-size-is-readable": [true, { "thresholdInPixels": 16 }],
+    "a11y/no-spread-text": [true, { "minWidth": 30, "maxWidth": 60 }],
+    "a11y/line-height-is-vertical-rhythmed": [true, { "baselineGrid": 20 }]
+  }
+}
+```
+
+Refer to individual rule documentation for available options.
+
+## Development
+
+### Testing
+
+Run tests with the following commands:
+
+- `npm run test` - Run unit tests for all rules
+- `npm run test:unit` - Run unit tests only
+- `npm run test:integration` - Run integration tests
+- `npm run test:e2e` - Run end-to-end tests with real projects
+- `npm run test:performance` - Run performance benchmarks
+- `npm run test:all` - Run complete test suite
+
+### Testing Infrastructure
+
+This project includes testing at a few levels:
+
+- **Unit tests** - Individual rule functionality
+- **Integration tests** - Plugin integration with stylelint
+- **E2E tests** - Real-world project testing with intentional violations
+- **Performance tests** - Benchmark testing for large codebases
 
-We communicate via [issues](https://github.com/double-great/stylelint-a11y/issues) and [pull requests](https://github.com/double-great/stylelint-a11y/pulls).
+### Other Commands
 
-There is also [stackoverflow](https://stackoverflow.com/questions/tagged/stylelint), which would be the preferred QA forum.
+- `npm run lint` - Run ESLint
+- `npm run format:check` - Check code formatting
+- `npm run format:fix` - Fix code formatting
+- `npm run coverage` - Run tests with coverage report

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@double-great/stylelint-a11y",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Plugin for stylelint with a11y rules",
   "main": "src/index.js",
   "type": "module",
@@ -29,7 +29,17 @@
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
     "test": "jest",
-    "coverage": "jest --coverage"
+    "test:unit": "jest src",
+    "test:integration": "jest test/integration",
+    "test:e2e": "jest test/e2e",
+    "test:performance": "jest test/e2e/performance.test.js",
+    "test:system": "jest test/system",
+    "test:regression": "jest test/system/performance-regression.test.js",
+    "test:compatibility": "jest test/system/compatibility.test.js",
+    "test:ci": "jest test/system/ci-integration.test.js",
+    "test:all": "jest",
+    "coverage": "jest --coverage",
+    "coverage:all": "jest --coverage"
   },
   "prettier": {
     "printWidth": 100,
@@ -48,6 +58,7 @@
     "jest": "^30.0.5",
     "jest-light-runner": "^0.7.9",
     "jest-preset-stylelint": "^8.0.0",
+    "postcss-scss": "^4.0.9",
     "prettier": "^3.6.2",
     "stylelint": "^16.23.1"
   },

package/src/index.js

@@ -3,8 +3,42 @@ const { createPlugin } = stylelint;
 
 import rules from './rules/index.js';
 
+// Import meta objects
+import { meta as contentPropertyMeta } from './rules/content-property-no-static-value/index.js';
+import { meta as fontSizeReadableMeta } from './rules/font-size-is-readable/index.js';
+import { meta as lineHeightRhythmedMeta } from './rules/line-height-is-vertical-rhythmed/index.js';
+import { meta as mediaPrefersColorSchemeMeta } from './rules/media-prefers-color-scheme/index.js';
+import { meta as mediaPrefersReducedMotionMeta } from './rules/media-prefers-reduced-motion/index.js';
+import { meta as noDisplayNoneMeta } from './rules/no-display-none/index.js';
+import { meta as noObsoleteAttributeMeta } from './rules/no-obsolete-attribute/index.js';
+import { meta as noObsoleteElementMeta } from './rules/no-obsolete-element/index.js';
+import { meta as noOutlineNoneMeta } from './rules/no-outline-none/index.js';
+import { meta as noSpreadTextMeta } from './rules/no-spread-text/index.js';
+import { meta as noTextAlignJustifyMeta } from './rules/no-text-align-justify/index.js';
+import { meta as selectorPseudoClassFocusMeta } from './rules/selector-pseudo-class-focus/index.js';
+
+const ruleMetaMap = {
+  'content-property-no-static-value': contentPropertyMeta,
+  'font-size-is-readable': fontSizeReadableMeta,
+  'line-height-is-vertical-rhythmed': lineHeightRhythmedMeta,
+  'media-prefers-color-scheme': mediaPrefersColorSchemeMeta,
+  'media-prefers-reduced-motion': mediaPrefersReducedMotionMeta,
+  'no-display-none': noDisplayNoneMeta,
+  'no-obsolete-attribute': noObsoleteAttributeMeta,
+  'no-obsolete-element': noObsoleteElementMeta,
+  'no-outline-none': noOutlineNoneMeta,
+  'no-spread-text': noSpreadTextMeta,
+  'no-text-align-justify': noTextAlignJustifyMeta,
+  'selector-pseudo-class-focus': selectorPseudoClassFocusMeta,
+};
+
 const rulesPlugins = Object.keys(rules).map((ruleName) => {
-  return createPlugin(`a11y/${ruleName}`, rules[ruleName]);
+  const plugin = createPlugin(`a11y/${ruleName}`, rules[ruleName]);
+
+  // Add meta object to the plugin
+  plugin.meta = ruleMetaMap[ruleName];
+
+  return plugin;
 });
 
 export default rulesPlugins;

package/src/rules/content-property-no-static-value/README.md

@@ -11,6 +11,26 @@ Disallow CSS generated content except aria-label attribute content and empty str
 
 ### true
 
+The rule is enabled with default allowed values: `['""', "''", 'attr(aria-label)']`.
+
+### { allowedValues: string[] }
+
+- `allowedValues` (default: `['""', "''", 'attr(aria-label)']`): Array of allowed content values
+
+#### Example configuration
+
+```javascript
+{
+  "a11y/content-property-no-static-value": [true, {
+    "allowedValues": ["''", '""', "attr(title)", "counter(section)"]
+  }]
+}
+```
+
+### Examples
+
+#### ✓ Default configuration (`true`)
+
 The following pattern is considered a violation:
 
 ```css

package/src/rules/content-property-no-static-value/index.js

@@ -7,9 +7,15 @@ const {
 export const ruleName = 'a11y/content-property-no-static-value';
 
 export const messages = ruleMessages(ruleName, {
-  expected: (selector) => `Unexpected using "content" property in ${selector}`,
+  expected: (selector) => `Expected "content" property to not be used in ${selector}`,
 });
 
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/content-property-no-static-value/README.md',
+  fixable: false,
+  deprecated: false,
+};
+
 const isContentPropertyUsedCorrectly = (selectors) =>
   selectors.every((selector) => {
     return /:before|:after/.test(selector);
@@ -18,24 +24,24 @@ const isContentPropertyUsedCorrectly = (selectors) =>
 const checkNodesForContentProperty = (node) =>
   node.nodes.filter((n) => n.prop).some((n) => n.prop.toLowerCase() === 'content');
 
-function check(node) {
+function check(node, options = {}) {
   if (node.type !== 'rule' || !checkNodesForContentProperty(node) || !node.first) {
     return true;
   }
 
+  const allowedValues = options.allowedValues || ["''", '""', 'attr(aria-label)'];
+
   return node.nodes.some((o) => {
     return (
       o.type === 'decl' &&
       o.prop.toLowerCase() === 'content' &&
       isContentPropertyUsedCorrectly(o.parent.selectors) &&
-      (o.value.toLowerCase() === "''" ||
-        o.value.toLowerCase() === '""' ||
-        o.value.toLowerCase() === 'attr(aria-label)')
+      allowedValues.some((allowed) => o.value.toLowerCase() === allowed.toLowerCase())
     );
   });
 }
 
-export default function contentPropertyNoStaticValue(actual) {
+export default function contentPropertyNoStaticValue(actual, options) {
   return (root, result) => {
     const validOptions = validateOptions(result, ruleName, { actual });
 
@@ -60,7 +66,7 @@ export default function contentPropertyNoStaticValue(actual) {
         return;
       }
 
-      const isAccepted = check(node);
+      const isAccepted = check(node, options);
 
       if (!isAccepted) {
         report({

package/src/rules/font-size-is-readable/index.js

@@ -10,6 +10,12 @@ export const messages = ruleMessages(ruleName, {
   expected: (selector) => `Expected a larger font-size in ${selector}`,
 });
 
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/font-size-is-readable/README.md',
+  fixable: false,
+  deprecated: false,
+};
+
 const pxToPt = (v) => 0.75 * v;
 
 const checkInPx = (value, THRESHOLD_IN_PX) =>

package/src/rules/index.js

@@ -15,6 +15,7 @@ export default {
   'content-property-no-static-value': contentPropertyNoStaticValue,
   'font-size-is-readable': fontSizeIsReadable,
   'line-height-is-vertical-rhythmed': lineHeightIsVerticalRhythmed,
+  'media-prefers-color-scheme': mediaPrefersColorScheme,
   'media-prefers-reduced-motion': mediaPrefersReducedMotion,
   'no-display-none': noDisplayNone,
   'no-obsolete-attribute': noObsoleteAttribute,
@@ -23,5 +24,4 @@ export default {
   'no-spread-text': noSpreadText,
   'no-text-align-justify': noTextAlignJustify,
   'selector-pseudo-class-focus': selectorPseudoClassFocus,
-  'media-prefers-color-scheme': mediaPrefersColorScheme,
 };

package/src/rules/line-height-is-vertical-rhythmed/README.md

@@ -10,6 +10,25 @@ Disallow not vertical rhythmed line-height.
 
 ### true
 
+The rule is enabled with default values (24px baseline grid, 1.5 minimum relative line-height).
+
+### { baselineGrid: number, minRelativeLineHeight: number }
+
+- `baselineGrid` (default: `24`): Baseline grid value in pixels for pixel-based line-heights
+- `minRelativeLineHeight` (default: `1.5`): Minimum allowed relative line-height value
+
+#### Example configuration
+
+```javascript
+{
+  "a11y/line-height-is-vertical-rhythmed": [true, { "baselineGrid": 20, "minRelativeLineHeight": 1.3 }]
+}
+```
+
+### Examples
+
+#### ✓ Default configuration (`true`)
+
 The following pattern is considered a violation:
 
 ```css

package/src/rules/line-height-is-vertical-rhythmed/index.js

@@ -10,13 +10,23 @@ export const messages = ruleMessages(ruleName, {
   expected: (selector) => `Expected a vertical rhythmed line-height in ${selector}`,
 });
 
-function check(node) {
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/line-height-is-vertical-rhythmed/README.md',
+  fixable: false,
+  deprecated: false,
+};
+
+function check(node, options = {}) {
   if (node.type !== 'rule') {
     return true;
   }
 
-  const checkInPx = (o) => o.value.toLowerCase().endsWith('px') && parseInt(o.value) % 24 !== 0;
-  const checkInRel = (o) => !isNaN(o.value) && parseFloat(o.value) < 1.5;
+  const baselineGrid = options.baselineGrid || 24;
+  const minRelativeLineHeight = options.minRelativeLineHeight || 1.5;
+
+  const checkInPx = (o) =>
+    o.value.toLowerCase().endsWith('px') && parseInt(o.value) % baselineGrid !== 0;
+  const checkInRel = (o) => !isNaN(o.value) && parseFloat(o.value) < minRelativeLineHeight;
 
   return !node.nodes.some(
     (o) =>
@@ -24,7 +34,7 @@ function check(node) {
   );
 }
 
-export default function lineHeightIsVerticalRhythmed(actual) {
+export default function lineHeightIsVerticalRhythmed(actual, options) {
   return (root, result) => {
     const validOptions = validateOptions(result, ruleName, { actual });
 
@@ -49,7 +59,7 @@ export default function lineHeightIsVerticalRhythmed(actual) {
         return;
       }
 
-      const isAccepted = check(node);
+      const isAccepted = check(node, options);
 
       if (!isAccepted) {
         report({

package/src/rules/media-prefers-color-scheme/index.js

@@ -13,6 +13,12 @@ export const ruleName = 'a11y/media-prefers-color-scheme';
 export const messages = ruleMessages(ruleName, {
   expected: (selector) => `Expected ${selector} is used with @media (prefers-color-scheme)`,
 });
+
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/media-prefers-color-scheme/README.md',
+  fixable: false,
+  deprecated: false,
+};
 const targetProperties = ['background-color', 'color'];
 
 function check(selector, node) {

package/src/rules/media-prefers-reduced-motion/index.js

@@ -2,7 +2,9 @@ import isCustomSelector from 'stylelint/lib/utils/isCustomSelector.mjs';
 import isStandardSyntaxAtRule from 'stylelint/lib/utils/isStandardSyntaxAtRule.mjs';
 import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule.mjs';
 import isStandardSyntaxSelector from 'stylelint/lib/utils/isStandardSyntaxSelector.mjs';
+
 import { parse } from 'postcss';
+
 import stylelint from 'stylelint';
 const {
   utils: { report, ruleMessages, validateOptions },
@@ -13,6 +15,12 @@ export const ruleName = 'a11y/media-prefers-reduced-motion';
 export const messages = ruleMessages(ruleName, {
   expected: (selector) => `Expected ${selector} is used with @media (prefers-reduced-motion)`,
 });
+
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/media-prefers-reduced-motion/README.md',
+  fixable: true,
+  deprecated: false,
+};
 const targetProperties = ['transition', 'animation', 'animation-name'];
 
 function checkChildrenNodes(childrenNodes, currentSelector, parentNode) {
@@ -62,6 +70,30 @@ function check(selector, node) {
 
   if (!declarationsIsMatched) return true;
 
+  // Check if there's a nested media query with prefers-reduced-motion inside the current rule
+  const hasNestedPrefersReducedMotion = declarations.some((childNode) => {
+    if (childNode.type === 'atrule' && childNode.name === 'media') {
+      return childNode.params && childNode.params.indexOf('prefers-reduced-motion') >= 0;
+    }
+
+    return false;
+  });
+
+  if (hasNestedPrefersReducedMotion) return true;
+
+  // Check if there's a sibling media query with prefers-reduced-motion at the same level
+  if (node.parent && node.parent.type === 'atrule' && node.parent.name === 'media') {
+    const siblingHasPrefersReducedMotion = node.parent.nodes.some((siblingNode) => {
+      if (siblingNode.type === 'atrule' && siblingNode.name === 'media') {
+        return siblingNode.params && siblingNode.params.indexOf('prefers-reduced-motion') >= 0;
+      }
+
+      return false;
+    });
+
+    if (siblingHasPrefersReducedMotion) return true;
+  }
+
   if (declarationsIsMatched) {
     const parentMatchedNode = parentNodes.some((parentNode) => {
       if (!parentNode || !parentNode.nodes) return false;
@@ -143,25 +175,62 @@ export default function mediaPrefersReducedMotion(actual, _, context) {
         media.nodes.forEach((o) => {
           o.raws.after = '\n';
         });
-        const cloneRule = node.clone();
-
-        cloneRule.raws = {
-          ...cloneRule.raws,
-          before: '\n',
-          after: '\n',
-          semicolon: true,
-        };
-        cloneRule.nodes.forEach((o) => {
-          if (o.prop === 'animation-name') {
-            o.prop = 'animation';
-          }
-
-          if (targetProperties.indexOf(o.prop) >= 0) {
-            o.value = 'none';
-          }
-        });
-        media.first.append(cloneRule);
-        node.before(media);
+
+        // Check if we're already inside a media query
+        if (node.parent && node.parent.type === 'atrule' && node.parent.name === 'media') {
+          // Create a clone with only the animation/transition properties set to none
+          const cloneRule = node.clone();
+
+          cloneRule.nodes = cloneRule.nodes.filter((o) => {
+            if (o.prop === 'animation-name') {
+              o.prop = 'animation';
+              o.value = 'none';
+
+              return true;
+            }
+
+            if (targetProperties.indexOf(o.prop) >= 0) {
+              o.value = 'none';
+
+              return true;
+            }
+
+            return false;
+          });
+
+          cloneRule.raws = {
+            ...cloneRule.raws,
+            before: '\n',
+            after: '\n',
+            semicolon: true,
+          };
+
+          media.first.append(cloneRule);
+          // Insert the nested media query inside the current rule
+          node.append(media.first);
+        } else {
+          // Original logic for non-nested case
+          const cloneRule = node.clone();
+
+          cloneRule.raws = {
+            ...cloneRule.raws,
+            before: '\n',
+            after: '\n',
+            semicolon: true,
+          };
+          cloneRule.nodes.forEach((o) => {
+            if (o.prop === 'animation-name') {
+              o.prop = 'animation';
+            }
+
+            if (targetProperties.indexOf(o.prop) >= 0) {
+              o.value = 'none';
+            }
+          });
+          media.first.append(cloneRule);
+          // Insert the media query before the current node
+          node.before(media);
+        }
 
         return;
       }

package/src/rules/no-display-none/index.js

@@ -7,9 +7,15 @@ const {
 export const ruleName = 'a11y/no-display-none';
 
 export const messages = ruleMessages(ruleName, {
-  expected: (selector) => `Unexpected using "{ display: none; }" in ${selector}`,
+  expected: (selector) => `Expected "display: none" to not be used in ${selector}`,
 });
 
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/no-display-none/README.md',
+  fixable: false,
+  deprecated: false,
+};
+
 function check(selector, node) {
   if (node.type !== 'rule') {
     return true;

package/src/rules/no-obsolete-attribute/index.js

@@ -1,5 +1,7 @@
 import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule.mjs';
+
 import { obsoleteAttributes } from './obsoleteAttributes.js';
+
 import stylelint from 'stylelint';
 const {
   utils: { report, ruleMessages, validateOptions },
@@ -8,9 +10,15 @@ const {
 export const ruleName = 'a11y/no-obsolete-attribute';
 
 export const messages = ruleMessages(ruleName, {
-  expected: (selector) => `Unexpected using obsolete attribute "${selector}"`,
+  expected: (selector) => `Expected obsolete attribute "${selector}" to not be used`,
 });
 
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/no-obsolete-attribute/README.md',
+  fixable: false,
+  deprecated: false,
+};
+
 function check(selector, node) {
   if (node.type !== 'rule') {
     return true;

package/src/rules/no-obsolete-element/index.js

@@ -1,5 +1,7 @@
 import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule.mjs';
+
 import { obsoleteElements } from './obsoleteElements.js';
+
 import stylelint from 'stylelint';
 const {
   utils: { report, ruleMessages, validateOptions },
@@ -8,9 +10,15 @@ const {
 export const ruleName = 'a11y/no-obsolete-element';
 
 export const messages = ruleMessages(ruleName, {
-  expected: (selector) => `Unexpected using obsolete selector "${selector}"`,
+  expected: (selector) => `Expected obsolete selector "${selector}" to not be used`,
 });
 
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/no-obsolete-element/README.md',
+  fixable: false,
+  deprecated: false,
+};
+
 function check(selector, node) {
   if (node.type !== 'rule') {
     return true;

package/src/rules/no-outline-none/index.js

@@ -7,9 +7,15 @@ const {
 export const ruleName = 'a11y/no-outline-none';
 
 export const messages = ruleMessages(ruleName, {
-  expected: (selector) => `Unexpected using "outline" property in ${selector}`,
+  expected: (selector) => `Expected "outline" to not be removed without alternative in ${selector}`,
 });
 
+export const meta = {
+  url: 'https://github.com/double-great/stylelint-a11y/blob/main/src/rules/no-outline-none/README.md',
+  fixable: false,
+  deprecated: false,
+};
+
 function check(selector, node) {
   if (node.type !== 'rule') {
     return true;

package/src/rules/no-spread-text/README.md

@@ -13,6 +13,25 @@ Require width of text greater than 45 characters and less than 80 characters.
 
 ### true
 
+The rule is enabled with default values (45ch minimum, 80ch maximum).
+
+### { minWidth: number, maxWidth: number }
+
+- `minWidth` (default: `45`): Minimum allowed width in `ch` units
+- `maxWidth` (default: `80`): Maximum allowed width in `ch` units
+
+#### Example configuration
+
+```javascript
+{
+  "a11y/no-spread-text": [true, { "minWidth": 30, "maxWidth": 60 }]
+}
+```
+
+### Examples
+
+#### ✓ Default configuration (`true`)
+
 The following pattern is considered a violation:
 
 ```css