stylelint-plugin-defensive-css 1.0.4 → 1.1.0

package/README.md

@@ -8,9 +8,9 @@ A Stylelint plugin to enforce defensive CSS best practices.
 
 > [Read more about Defensive CSS](https://defensivecss.dev/)
 
-## 🚀 Version 1.0.0
+## 🚀 Version 1.1.0
 
-With the release of version 1.0.0 of the plugin, we now support Stylelint 16.
+With the release of version 1.1.0 of the plugin, we now support Stylelint 17.
 
 ---
 
@@ -49,9 +49,10 @@ The plugin provides multiple rules that can be toggled on and off as needed.
 2. [Background-Repeat](#background-repeat)
 3. [Custom Property Fallbacks](#custom-property-fallbacks)
 4. [Flex Wrapping](#flex-wrapping)
-5. [Scroll Chaining](#scroll-chaining)
-6. [Scrollbar Gutter](#scrollbar-gutter)
-7. [Vendor Prefix Grouping](#vendor-prefix-grouping)
+5. [Grid Line Names](#grid-line-names)
+6. [Scroll Chaining](#scroll-chaining)
+7. [Scrollbar Gutter](#scrollbar-gutter)
+8. [Vendor Prefix Grouping](#vendor-prefix-grouping)
 
 ---
 
@@ -146,6 +147,13 @@ div {
   background: url('some-image.jpg') black top center;
   background-repeat: no-repeat;
 }
+div {
+  mask: url('some-image.jpg') repeat top center;
+}
+div {
+  mask: url('some-image.jpg') top center;
+  mask-repeat: no-repeat;
+}
 ```
 
 #### ❌ Failing Examples
@@ -157,6 +165,12 @@ div {
 div {
   background-image: url('some-image.jpg');
 }
+div {
+  mask: url('some-image.jpg') top center;
+}
+div {
+  mask-image: url('some-image.jpg');
+}
 ```
 
 ### Custom Property Fallbacks
@@ -286,6 +300,118 @@ div {
 }
 ```
 
+### Grid Line Names
+
+Require explicit named grid lines for tracks. When `grid-line-names` is enabled
+the plugin validates `grid-template-columns`, `grid-template-rows`, and the
+`grid` shorthand (the portion before/after the `/`) to ensure each track is
+associated with a named line using the `[name]` syntax.
+
+The rule supports configuring whether to validate columns and/or rows:
+
+```json
+{
+  "rules": {
+    "plugin/use-defensive-css": [true, { "grid-line-names": true }]
+  }
+}
+```
+
+Or with explicit options:
+
+```json
+{
+  "rules": {
+    "plugin/use-defensive-css": [
+      true,
+      { "grid-line-names": { "columns": true, "rows": false } }
+    ]
+  }
+}
+```
+
+- If `true` the rule validates both columns and rows.
+- Pass an object with `columns` and/or `rows` set to `false` to disable one
+  side.
+
+This rule helps avoid ambiguous layouts by rejecting unnamed tracks like
+`1fr 1fr` and numeric `repeat(3, 1fr)` while allowing patterns that explicitly
+name lines, e.g. `repeat(auto-fit, [name] 300px)` or bracketed names such as
+`[a b] 1fr`.
+
+#### ✅ Passing Examples
+
+```css
+div {
+  grid-template-columns: [c-a] 1fr [c-b] 1fr;
+}
+
+div {
+  grid-template-rows: [r-a] 1fr [r-b] 2fr;
+}
+
+div {
+  grid-template-columns: [a] [b] 1fr [c] 2fr;
+}
+
+div {
+  grid-template-columns: repeat(auto-fit, [line-a line-b] 300px);
+}
+
+div {
+  grid-template-rows: repeat(auto-fill, [r1 r2] 100px);
+}
+
+div {
+  grid: [r-a] 1fr / [c-a] 1fr [c-b] 2fr;
+}
+
+div {
+  grid-template-columns: repeat(auto-fit, [a]300px);
+}
+```
+
+#### ❌ Failing Examples
+
+```css
+div {
+  grid-template-columns: 1fr 1fr;
+}
+
+div {
+  grid-template-rows: 1fr 1fr;
+}
+
+div {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+div {
+  grid-template-rows: repeat(3, 1fr);
+}
+
+div {
+  grid: auto / 1fr 1fr;
+}
+
+div {
+  grid: repeat(3, 1fr) / auto;
+}
+
+div {
+  grid-template-columns: 1fr [after] 1fr;
+}
+
+/* Reserved identifiers cannot be used as line names */
+div {
+  grid-template-columns: [auto] 1fr;
+}
+
+div {
+  grid-template-rows: [span] 1fr;
+}
+```
+
 ### Scroll Chaining
 
 > [Read more about this pattern in Defensive CSS](https://defensivecss.dev/tip/scroll-chain/)
@@ -432,7 +558,6 @@ input::-webkit-input-placeholder {
 }
 input::-moz-placeholder {
   color: #222;
-}
 ```
 
 #### ❌ Failing Examples

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A Stylelint plugin to enforce defensive CSS best practices.",
   "main": "src/index.js",
   "type": "module",
@@ -41,19 +41,19 @@
     "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.35.0",
-    "husky": "^8.0.3",
-    "jest": "^29.4.3",
-    "jest-cli": "^29.4.3",
-    "jest-light-runner": "^0.6.0",
-    "jest-preset-stylelint": "^7.0.0",
-    "lint-staged": "^15.0.2",
-    "prettier": "^3.0.3",
-    "prettier-eslint": "^16.1.2",
-    "stylelint": "^16.1.0"
+    "@commitlint/cli": "^20.4.0",
+    "@commitlint/config-conventional": "^20.4.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^8.57.1",
+    "husky": "^9.1.7",
+    "jest": "^30.2.0",
+    "jest-cli": "^30.2.0",
+    "jest-light-runner": "^0.7.11",
+    "jest-preset-stylelint": "^9.1.0",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
+    "prettier-eslint": "^16.4.2",
+    "stylelint": "^17.1.0"
   },
   "lint-staged": {
     "**/*.js|md|json": [

package/src/rules/use-defensive-css/accidental-hover/index.js

@@ -0,0 +1,40 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+
+export function accidentalHover({ decl, result }) {
+  let isWrappedInHoverAtRule = false;
+
+  function traverseParentRules(parent) {
+    if (parent.parent.type === 'root') {
+      return;
+    }
+
+    if (parent.parent.params && /hover(: hover)?/.test(parent.parent.params)) {
+      isWrappedInHoverAtRule = true;
+    } else {
+      traverseParentRules(parent.parent);
+    }
+  }
+
+  const parent = decl.parent;
+  const selector = parent.selector;
+  const isHoverSelector = selector?.includes(':hover');
+
+  // If the :hover selector is inside a :not() selector, ignore it
+  if (/:not\(([^)]*:hover[^)]*)\)/g.test(selector)) {
+    return;
+  }
+
+  if (isHoverSelector) {
+    traverseParentRules(parent);
+
+    if (!isWrappedInHoverAtRule) {
+      stylelint.utils.report({
+        message: ruleMessages.accidentalHover(),
+        node: decl.parent,
+        result,
+        ruleName,
+      });
+    }
+  }
+}

package/src/rules/use-defensive-css/background-repeat/index.js

@@ -0,0 +1,73 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+import { findShorthandBackgroundRepeat } from './utils.js';
+
+const defaultBackgroundRepeatProps = {
+  hasBackgroundImage: false,
+  isMissingBackgroundRepeat: true,
+  nodeToReport: undefined,
+};
+
+const defaultMaskRepeatProps = {
+  hasMaskImage: false,
+  isMissingMaskRepeat: true,
+  nodeToReport: undefined,
+};
+
+let backgroundRepeatProps = { ...defaultBackgroundRepeatProps };
+let maskRepeatProps = { ...defaultMaskRepeatProps };
+
+export function backgroundRepeat({ decl, isLastStyleDeclaration, result }) {
+  const hasUrl = decl.value.includes('url(');
+  if (decl.prop === 'background' && hasUrl) {
+    backgroundRepeatProps.hasBackgroundImage = true;
+    backgroundRepeatProps.isMissingBackgroundRepeat =
+      !findShorthandBackgroundRepeat(decl.value);
+    backgroundRepeatProps.nodeToReport = decl;
+  }
+  if (decl.prop === 'mask' && hasUrl) {
+    maskRepeatProps.hasMaskImage = true;
+    maskRepeatProps.isMissingMaskRepeat = !findShorthandBackgroundRepeat(
+      decl.value,
+    );
+    maskRepeatProps.nodeToReport = decl;
+  }
+
+  if (decl.prop === 'background-image' && hasUrl) {
+    backgroundRepeatProps.hasBackgroundImage = true;
+    backgroundRepeatProps.nodeToReport = decl;
+  }
+  if (decl.prop === 'mask-image' && hasUrl) {
+    maskRepeatProps.hasMaskImage = true;
+    maskRepeatProps.nodeToReport = decl;
+  }
+
+  if (decl.prop === 'background-repeat') {
+    backgroundRepeatProps.isMissingBackgroundRepeat = false;
+  }
+  if (decl.prop === 'mask-repeat') {
+    maskRepeatProps.isMissingMaskRepeat = false;
+  }
+
+  if (isLastStyleDeclaration) {
+    if (Object.values(backgroundRepeatProps).every((prop) => prop)) {
+      stylelint.utils.report({
+        message: ruleMessages.backgroundRepeat(),
+        node: backgroundRepeatProps.nodeToReport,
+        result,
+        ruleName,
+      });
+    }
+    if (Object.values(maskRepeatProps).every((prop) => prop)) {
+      stylelint.utils.report({
+        message: ruleMessages.maskRepeat(),
+        node: maskRepeatProps.nodeToReport,
+        result,
+        ruleName,
+      });
+    }
+
+    backgroundRepeatProps = { ...defaultBackgroundRepeatProps };
+    maskRepeatProps = { ...defaultMaskRepeatProps };
+  }
+}

package/src/{utils/findShorthandBackgroundRepeat.js → rules/use-defensive-css/background-repeat/utils.js}

@@ -1,5 +1,5 @@
 const expression = /\b(repeat|repeat-x|repeat-y|space|round|no-repeat|)\b/g;
 
 export function findShorthandBackgroundRepeat(value) {
-  return value.match(expression).some((val) => val);
+  return value.match(expression)?.some((val) => val) || false;
 }

package/src/rules/use-defensive-css/base.js

@@ -15,6 +15,12 @@ export const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   flexWrapping() {
     return 'Whenever setting an element to `display: flex` a `flex-wrap` value must be defined. Set `flex-wrap: nowrap` for the default behavior. Learn more: https://defensivecss.dev/tip/flexbox-wrapping/';
   },
+  gridLineNames() {
+    return 'When defining grid tracks, name each grid line using the [name] syntax so each track is preceded by a named line. This applies to both rows and columns (depending on configuration). Avoid unnamed tracks like `1fr 1fr` or numeric repeat counts like `repeat(3, 1fr)`. Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template';
+  },
+  maskRepeat() {
+    return 'Whenever setting a mask image, be sure to explicitly define a `mask-repeat` value. Learn more: https://defensivecss.dev/tip/bg-repeat/';
+  },
   scrollChaining() {
     return 'To prevent scroll chaining between contexts, any container with a scrollable overflow must have a `overscroll-behavior` value defined. Learn more: https://defensivecss.dev/tip/scroll-chain/';
   },

package/src/rules/use-defensive-css/custom-property-fallbacks/index.js

@@ -0,0 +1,35 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+import { findCustomProperties } from './utils.js';
+
+export function customPropertyFallbacks({ decl, options, result }) {
+  const propertiesWithoutFallback = findCustomProperties(decl.value);
+
+  if (propertiesWithoutFallback.length) {
+    if (Array.isArray(options?.['custom-property-fallbacks'])) {
+      if (options['custom-property-fallbacks'][0]) {
+        const patterns = options['custom-property-fallbacks'][1].ignore;
+        const patternMatched = propertiesWithoutFallback.some((property) => {
+          return patterns.some((pattern) =>
+            typeof pattern === 'string'
+              ? new RegExp(pattern).test(property)
+              : pattern.test(property),
+          );
+        });
+
+        if (patternMatched) {
+          return;
+        }
+      } else {
+        return;
+      }
+    }
+
+    stylelint.utils.report({
+      message: ruleMessages.customPropertyFallbacks(),
+      node: decl,
+      result,
+      ruleName,
+    });
+  }
+}

package/src/rules/use-defensive-css/flex-wrapping/index.js

@@ -0,0 +1,47 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+
+const defaultFlexWrappingProps = {
+  isDisplayFlex: false,
+  isFlexRow: true,
+  isMissingFlexWrap: true,
+  nodeToReport: undefined,
+};
+
+let flexWrappingProps = { ...defaultFlexWrappingProps };
+
+export function flexWrapping({ decl, isLastStyleDeclaration, result }) {
+  if (decl.prop === 'display' && decl.value.includes('flex')) {
+    flexWrappingProps.isDisplayFlex = true;
+    flexWrappingProps.nodeToReport = decl;
+  }
+
+  if (decl.prop === 'flex-flow' && decl.value.includes('column')) {
+    flexWrappingProps.isFlexRow = false;
+    flexWrappingProps.isMissingFlexWrap = false;
+  }
+
+  if (decl.prop === 'flex-direction' && decl.value.includes('column')) {
+    flexWrappingProps.isFlexRow = false;
+  }
+
+  if (
+    decl.prop === 'flex-wrap' ||
+    (decl.prop === 'flex-flow' && decl.value.includes('wrap'))
+  ) {
+    flexWrappingProps.isMissingFlexWrap = false;
+  }
+
+  if (isLastStyleDeclaration) {
+    if (Object.values(flexWrappingProps).every((prop) => prop)) {
+      stylelint.utils.report({
+        message: ruleMessages.flexWrapping(),
+        node: flexWrappingProps.nodeToReport,
+        result,
+        ruleName,
+      });
+    }
+
+    flexWrappingProps = { ...defaultFlexWrappingProps };
+  }
+}

package/src/rules/use-defensive-css/grid-line-names/index.js

@@ -0,0 +1,89 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+import { isValueInvalidForLineNames, tokenizeGridColumns } from './utils.js';
+
+export function gridLineNames({ decl, options, result }) {
+  const opt = options['grid-line-names'];
+  let validateColumns = false;
+  let validateRows = false;
+
+  if (opt === true) {
+    validateColumns = validateRows = true;
+  } else if (Array.isArray(opt)) {
+    const cfg = opt[1] || {};
+    validateColumns = cfg.columns !== false;
+    validateRows = cfg.rows !== false;
+  } else if (typeof opt === 'object') {
+    validateColumns = opt.columns !== false;
+    validateRows = opt.rows !== false;
+  } else {
+    // unknown shape — skip
+    return;
+  }
+
+  // Determine which declarations to validate
+  if (decl.prop === 'grid-template-columns' && validateColumns) {
+    if (isValueInvalidForLineNames(decl.value)) {
+      stylelint.utils.report({
+        message: ruleMessages.gridLineNames(),
+        node: decl,
+        result,
+        ruleName,
+      });
+    }
+  }
+
+  if (decl.prop === 'grid-template-rows' && validateRows) {
+    if (isValueInvalidForLineNames(decl.value)) {
+      stylelint.utils.report({
+        message: ruleMessages.gridLineNames(),
+        node: decl,
+        result,
+        ruleName,
+      });
+    }
+  }
+
+  if (decl.prop === 'grid') {
+    if (!validateColumns && !validateRows) return;
+
+    const value = decl.value;
+    const slashIndex = value.indexOf('/');
+
+    // If there's no slash we can't reliably extract rows/columns
+    if (slashIndex === -1) return;
+
+    const rowsValue = value.slice(0, slashIndex).trim();
+    const colsValue = value.slice(slashIndex + 1).trim();
+
+    let invalidRows = false;
+    let invalidCols = false;
+
+    if (validateRows) {
+      const rowTokens = tokenizeGridColumns(rowsValue || '');
+      const skipRowsValidation =
+        rowTokens.length === 1 &&
+        !/^\[[^\]]+\]$/.test(rowTokens[0]) &&
+        !/repeat\s*\(/i.test(rowTokens[0]);
+
+      if (!skipRowsValidation && isValueInvalidForLineNames(rowsValue)) {
+        invalidRows = true;
+      }
+    }
+
+    if (validateColumns) {
+      if (isValueInvalidForLineNames(colsValue)) {
+        invalidCols = true;
+      }
+    }
+
+    if (invalidRows || invalidCols) {
+      stylelint.utils.report({
+        message: ruleMessages.gridLineNames(),
+        node: decl,
+        result,
+        ruleName,
+      });
+    }
+  }
+}

package/src/rules/use-defensive-css/grid-line-names/utils.js

@@ -0,0 +1,116 @@
+export function tokenizeGridColumns(value) {
+  const tokens = [];
+  let cur = '';
+  let inBracket = false;
+  let inParens = false;
+
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+
+    if (ch === '[') {
+      if (cur.trim()) {
+        tokens.push(cur.trim());
+        cur = '';
+      }
+      inBracket = true;
+      cur += ch;
+      continue;
+    }
+
+    if (ch === ']') {
+      cur += ch;
+      inBracket = false;
+      continue;
+    }
+
+    if (ch === '(') {
+      inParens = true;
+      cur += ch;
+      continue;
+    }
+
+    if (ch === ')') {
+      cur += ch;
+      inParens = false;
+      continue;
+    }
+
+    if (!inBracket && !inParens && /\s/.test(ch)) {
+      if (cur.trim()) {
+        tokens.push(cur.trim());
+        cur = '';
+      }
+      continue;
+    }
+
+    cur += ch;
+  }
+
+  if (cur.trim()) tokens.push(cur.trim());
+  return tokens;
+}
+
+// Extract names from the first bracketed group within a token, or `null`.
+export function extractBracketNames(token) {
+  const m = token.match(/\[([^\]]+)\]/);
+  if (!m) return null;
+  return m[1].trim().split(/\s+/);
+}
+
+export function extractAllBracketNamesFromString(str) {
+  const names = [];
+  const re = /\[([^\]]+)\]/g;
+  let m;
+  while ((m = re.exec(str))) {
+    names.push(...m[1].trim().split(/\s+/));
+  }
+  return names;
+}
+
+export function buildTrackTokens(tokens) {
+  const trackTokens = [];
+  for (let i = 0; i < tokens.length; ) {
+    const token = tokens[i];
+
+    if (/^\[[^\]]+\]$/.test(token)) {
+      const brackets = [token];
+      i++;
+      while (i < tokens.length && /^\[[^\]]+\]$/.test(tokens[i])) {
+        brackets.push(tokens[i]);
+        i++;
+      }
+
+      if (i < tokens.length) {
+        trackTokens.push(`${brackets.join(' ')} ${tokens[i]}`);
+        i++;
+      } else {
+        trackTokens.push(brackets.join(' '));
+      }
+    } else {
+      trackTokens.push(token);
+      i++;
+    }
+  }
+  return trackTokens;
+}
+
+export function isValueInvalidForLineNames(value) {
+  const tokens = tokenizeGridColumns(value);
+  const trackTokens = buildTrackTokens(tokens);
+
+  if (!trackTokens.length) return false;
+
+  const invalidTrack = trackTokens.find((token) => {
+    let names = extractBracketNames(token);
+
+    if ((!names || !names.length) && /repeat\s*\(/i.test(token)) {
+      names = extractAllBracketNamesFromString(value);
+    }
+
+    if (!names || !names.length) return true;
+
+    return names.some((n) => ['span', 'auto'].includes(n));
+  });
+
+  return Boolean(invalidTrack);
+}

package/src/rules/use-defensive-css/index.js

@@ -1,58 +1,17 @@
 import stylelint from 'stylelint';
 
 import { ruleName, ruleMessages, ruleMeta } from './base.js';
-import { findShorthandBackgroundRepeat } from '../../utils/findShorthandBackgroundRepeat.js';
-import { findVendorPrefixes } from '../../utils/findVendorPrefixes.js';
-import { findCustomProperties } from '../../utils/findCustomProperties.js';
 
-const defaultBackgroundRepeatProps = {
-  hasBackgroundImage: false,
-  isMissingBackgroundRepeat: true,
-  nodeToReport: undefined,
-};
-const defaultFlexWrappingProps = {
-  isDisplayFlex: false,
-  isFlexRow: true,
-  isMissingFlexWrap: true,
-  nodeToReport: undefined,
-};
-const defaultScrollbarGutterProps = {
-  hasOverflow: false,
-  hasScrollbarGutter: false,
-  nodeToReport: undefined,
-};
-const defaultScrollChainingProps = {
-  hasOverflow: false,
-  hasOverscrollBehavior: false,
-  nodeToReport: undefined,
-};
+import { accidentalHover } from './accidental-hover/index.js';
+import { backgroundRepeat } from './background-repeat/index.js';
+import { customPropertyFallbacks } from './custom-property-fallbacks/index.js';
+import { flexWrapping } from './flex-wrapping/index.js';
+import { gridLineNames } from './grid-line-names/index.js';
+import { scrollChaining } from './scroll-chaining/index.js';
+import { scrollbarGutter } from './scrollbar-gutter/index.js';
+import { vendorPrefixGrouping } from './vendor-prefix-grouping/index.js';
 
-let backgroundRepeatProps = { ...defaultBackgroundRepeatProps };
-let flexWrappingProps = { ...defaultFlexWrappingProps };
-let scrollbarGutterProps = { ...defaultScrollbarGutterProps };
-let scrollChainingProps = { ...defaultScrollChainingProps };
 let isLastStyleDeclaration = false;
-let isWrappedInHoverAtRule = false;
-
-const overflowProperties = [
-  'overflow',
-  'overflow-x',
-  'overflow-y',
-  'overflow-inline',
-  'overflow-block',
-];
-
-function traverseParentRules(parent) {
-  if (parent.parent.type === 'root') {
-    return;
-  }
-
-  if (parent.parent.params && /hover(: hover)?/.test(parent.parent.params)) {
-    isWrappedInHoverAtRule = true;
-  } else {
-    traverseParentRules(parent.parent);
-  }
-}
 
 const ruleFunction = (_, options) => {
   return (root, result) => {
@@ -69,208 +28,42 @@ const ruleFunction = (_, options) => {
 
       /* ACCIDENTAL HOVER */
       if (options?.['accidental-hover']) {
-        const parent = decl.parent;
-        const selector = parent.selector;
-        const isHoverSelector = selector?.includes(':hover');
-        isWrappedInHoverAtRule = false;
-
-        // If the :hover selector is inside a :not() selector, ignore it
-        if (/:not\(([^)]*:hover[^)]*)\)/g.test(selector)) {
-          return;
-        }
-
-        if (isHoverSelector) {
-          traverseParentRules(parent);
-
-          if (!isWrappedInHoverAtRule) {
-            stylelint.utils.report({
-              message: ruleMessages.accidentalHover(),
-              node: decl.parent,
-              result,
-              ruleName,
-            });
-          }
-        }
+        accidentalHover({ decl, result });
       }
 
       /* BACKGROUND REPEAT  */
       if (options?.['background-repeat']) {
-        if (decl.prop === 'background' && decl.value.includes('url(')) {
-          backgroundRepeatProps.hasBackgroundImage = true;
-          backgroundRepeatProps.isMissingBackgroundRepeat =
-            !findShorthandBackgroundRepeat(decl.value);
-          backgroundRepeatProps.nodeToReport = decl;
-        }
-
-        if (decl.prop === 'background-image' && decl.value.includes('url(')) {
-          backgroundRepeatProps.hasBackgroundImage = true;
-          backgroundRepeatProps.nodeToReport = decl;
-        }
-
-        if (decl.prop === 'background-repeat') {
-          backgroundRepeatProps.isMissingBackgroundRepeat = false;
-        }
-
-        if (isLastStyleDeclaration) {
-          if (Object.values(backgroundRepeatProps).every((prop) => prop)) {
-            stylelint.utils.report({
-              message: ruleMessages.backgroundRepeat(),
-              node: backgroundRepeatProps.nodeToReport,
-              result,
-              ruleName,
-            });
-          }
-
-          backgroundRepeatProps = { ...defaultBackgroundRepeatProps };
-        }
+        backgroundRepeat({ decl, isLastStyleDeclaration, result });
       }
 
       /* CUSTOM PROPERTY FALLBACKS */
       if (options?.['custom-property-fallbacks']) {
-        const propertiesWithoutFallback = findCustomProperties(decl.value);
-
-        if (propertiesWithoutFallback.length) {
-          if (Array.isArray(options?.['custom-property-fallbacks'])) {
-            if (options['custom-property-fallbacks'][0]) {
-              const patterns = options['custom-property-fallbacks'][1].ignore;
-              const patternMatched = propertiesWithoutFallback.some(
-                (property) => {
-                  return patterns.some((pattern) =>
-                    typeof pattern === 'string'
-                      ? new RegExp(pattern).test(property)
-                      : pattern.test(property),
-                  );
-                },
-              );
-
-              if (patternMatched) {
-                return;
-              }
-            } else {
-              return;
-            }
-          }
-
-          stylelint.utils.report({
-            message: ruleMessages.customPropertyFallbacks(),
-            node: decl,
-            result,
-            ruleName,
-          });
-        }
+        customPropertyFallbacks({ decl, options, result });
       }
 
       /* FLEX WRAPPING */
       if (options?.['flex-wrapping']) {
-        if (decl.prop === 'display' && decl.value.includes('flex')) {
-          flexWrappingProps.isDisplayFlex = true;
-          flexWrappingProps.nodeToReport = decl;
-        }
-
-        if (decl.prop === 'flex-flow' && decl.value.includes('column')) {
-          flexWrappingProps.isFlexRow = false;
-          flexWrappingProps.isMissingFlexWrap = false;
-        }
-
-        if (decl.prop === 'flex-direction' && decl.value.includes('column')) {
-          flexWrappingProps.isFlexRow = false;
-        }
-
-        if (
-          decl.prop === 'flex-wrap' ||
-          (decl.prop === 'flex-flow' && decl.value.includes('wrap'))
-        ) {
-          flexWrappingProps.isMissingFlexWrap = false;
-        }
-
-        if (isLastStyleDeclaration) {
-          if (Object.values(flexWrappingProps).every((prop) => prop)) {
-            stylelint.utils.report({
-              message: ruleMessages.flexWrapping(),
-              node: flexWrappingProps.nodeToReport,
-              result,
-              ruleName,
-            });
-          }
+        flexWrapping({ decl, isLastStyleDeclaration, result });
+      }
 
-          flexWrappingProps = { ...defaultFlexWrappingProps };
-        }
+      /* GRID LINE NAMES */
+      if (options?.['grid-line-names']) {
+        gridLineNames({ decl, options, result });
       }
 
       /* SCROLL CHAINING */
       if (options?.['scroll-chaining']) {
-        if (
-          overflowProperties.includes(decl.prop) &&
-          (decl.value.includes('auto') || decl.value.includes('scroll'))
-        ) {
-          scrollChainingProps.hasOverflow = true;
-          scrollChainingProps.nodeToReport = decl;
-        }
-
-        if (decl.prop.includes('overscroll-behavior')) {
-          scrollChainingProps.hasOverscrollBehavior = true;
-        }
-
-        if (isLastStyleDeclaration) {
-          if (
-            scrollChainingProps.hasOverflow &&
-            !scrollChainingProps.hasOverscrollBehavior
-          ) {
-            stylelint.utils.report({
-              message: ruleMessages.scrollChaining(),
-              node: scrollChainingProps.nodeToReport,
-              result,
-              ruleName,
-            });
-          }
-
-          scrollChainingProps = { ...defaultScrollChainingProps };
-        }
+        scrollChaining({ decl, isLastStyleDeclaration, result });
       }
 
       /* SCROLLBAR GUTTER */
       if (options?.['scrollbar-gutter']) {
-        if (
-          overflowProperties.includes(decl.prop) &&
-          (decl.value.includes('auto') || decl.value.includes('scroll'))
-        ) {
-          scrollbarGutterProps.hasOverflow = true;
-          scrollbarGutterProps.nodeToReport = decl;
-        }
-
-        if (decl.prop.includes('scrollbar-gutter')) {
-          scrollbarGutterProps.hasScrollbarGutter = true;
-        }
-
-        if (isLastStyleDeclaration) {
-          if (
-            scrollbarGutterProps.hasOverflow &&
-            !scrollbarGutterProps.hasScrollbarGutter
-          ) {
-            stylelint.utils.report({
-              message: ruleMessages.scrollbarGutter(),
-              node: scrollbarGutterProps.nodeToReport,
-              result,
-              ruleName,
-            });
-          }
-
-          scrollbarGutterProps = { ...defaultScrollbarGutterProps };
-        }
+        scrollbarGutter({ decl, isLastStyleDeclaration, result });
       }
 
       /* VENDOR PREFIX GROUPING */
       if (options?.['vendor-prefix-grouping']) {
-        const hasMultiplePrefixes = findVendorPrefixes(decl.parent.selector);
-
-        if (hasMultiplePrefixes) {
-          stylelint.utils.report({
-            message: ruleMessages.vendorPrefixWGrouping(),
-            node: decl.parent,
-            result,
-            ruleName,
-          });
-        }
+        vendorPrefixGrouping({ decl, result });
       }
 
       return;

package/src/rules/use-defensive-css/scroll-chaining/index.js

@@ -0,0 +1,41 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+import { overflowProperties } from '../../../utils/overflow.js';
+
+const defaultScrollChainingProps = {
+  hasOverflow: false,
+  hasOverscrollBehavior: false,
+  nodeToReport: undefined,
+};
+
+let scrollChainingProps = { ...defaultScrollChainingProps };
+
+export function scrollChaining({ decl, isLastStyleDeclaration, result }) {
+  if (
+    overflowProperties.includes(decl.prop) &&
+    (decl.value.includes('auto') || decl.value.includes('scroll'))
+  ) {
+    scrollChainingProps.hasOverflow = true;
+    scrollChainingProps.nodeToReport = decl;
+  }
+
+  if (decl.prop.includes('overscroll-behavior')) {
+    scrollChainingProps.hasOverscrollBehavior = true;
+  }
+
+  if (isLastStyleDeclaration) {
+    if (
+      scrollChainingProps.hasOverflow &&
+      !scrollChainingProps.hasOverscrollBehavior
+    ) {
+      stylelint.utils.report({
+        message: ruleMessages.scrollChaining(),
+        node: scrollChainingProps.nodeToReport,
+        result,
+        ruleName,
+      });
+    }
+
+    scrollChainingProps = { ...defaultScrollChainingProps };
+  }
+}

package/src/rules/use-defensive-css/scrollbar-gutter/index.js

@@ -0,0 +1,41 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+import { overflowProperties } from '../../../utils/overflow.js';
+
+const defaultScrollbarGutterProps = {
+  hasOverflow: false,
+  hasScrollbarGutter: false,
+  nodeToReport: undefined,
+};
+
+let scrollbarGutterProps = { ...defaultScrollbarGutterProps };
+
+export function scrollbarGutter({ decl, isLastStyleDeclaration, result }) {
+  if (
+    overflowProperties.includes(decl.prop) &&
+    (decl.value.includes('auto') || decl.value.includes('scroll'))
+  ) {
+    scrollbarGutterProps.hasOverflow = true;
+    scrollbarGutterProps.nodeToReport = decl;
+  }
+
+  if (decl.prop.includes('scrollbar-gutter')) {
+    scrollbarGutterProps.hasScrollbarGutter = true;
+  }
+
+  if (isLastStyleDeclaration) {
+    if (
+      scrollbarGutterProps.hasOverflow &&
+      !scrollbarGutterProps.hasScrollbarGutter
+    ) {
+      stylelint.utils.report({
+        message: ruleMessages.scrollbarGutter(),
+        node: scrollbarGutterProps.nodeToReport,
+        result,
+        ruleName,
+      });
+    }
+
+    scrollbarGutterProps = { ...defaultScrollbarGutterProps };
+  }
+}

package/src/rules/use-defensive-css/vendor-prefix-grouping/index.js

@@ -0,0 +1,16 @@
+import stylelint from 'stylelint';
+import { ruleMessages, ruleName } from '../base.js';
+import { findVendorPrefixes } from './utils.js';
+
+export function vendorPrefixGrouping({ decl, result }) {
+  const hasMultiplePrefixes = findVendorPrefixes(decl.parent.selector);
+
+  if (hasMultiplePrefixes) {
+    stylelint.utils.report({
+      message: ruleMessages.vendorPrefixWGrouping(),
+      node: decl.parent,
+      result,
+      ruleName,
+    });
+  }
+}

package/src/utils/overflow.js

@@ -0,0 +1,7 @@
+export const overflowProperties = [
+  'overflow',
+  'overflow-x',
+  'overflow-y',
+  'overflow-inline',
+  'overflow-block',
+];