@drskillissue/ganko 0.1.25 → 0.1.26

package/dist/eslint-plugin.js

@@ -14,7 +14,7 @@ import {
   rules3,
   runCrossFileRules,
   runPhases
-} from "./chunk-64TMAKYI.js";
+} from "./chunk-XVYCT2RS.js";
 import "./chunk-EGRHWZRV.js";
 
 // src/eslint-adapter.ts

package/dist/index.cjs

@@ -31524,6 +31524,19 @@ function formatAlignmentCauses(findings) {
   }
   return out;
 }
+function formatPrimaryFix(findings) {
+  if (findings.length === 0) return "";
+  let best = null;
+  for (let i = 0; i < findings.length; i++) {
+    const finding = findings[i];
+    if (!finding) continue;
+    if (best === null || finding.weight > best.weight) {
+      best = finding;
+    }
+  }
+  if (best === null) return "";
+  return best.fix;
+}
 function compareAscii(left, right) {
   if (left < right) return -1;
   if (left > right) return 1;
@@ -34858,9 +34871,6 @@ var COMPOSITION_LABELS = {
   [4 /* BlockSegmented */]: "block-segmented",
   [5 /* Unknown */]: "unknown"
 };
-function formatCompositionClassification(classification) {
-  return COMPOSITION_LABELS[classification];
-}
 function formatCompositionFixSuggestion(subjectFingerprint) {
   if (subjectFingerprint.classification === 2 /* MixedUnmitigated */) {
     if (subjectFingerprint.hasVerticalAlignMitigation) {
@@ -38539,6 +38549,7 @@ function buildFindingsFromAtoms(atoms, input, evidence) {
     const next = {
       kind: factor.kind,
       message: factor.message,
+      fix: factor.fix,
       weight
     };
     const existing = byKind.get(factor.kind);
@@ -38552,48 +38563,48 @@ function buildFindingsFromAtoms(atoms, input, evidence) {
   }
   return [...byKind.values()];
 }
-function toFindingFactor(factorId, input, evidence) {
+function toFindingFactor(factorId, input, _evidence) {
   switch (factorId) {
     case "offset-delta":
       return {
         kind: "offset-delta",
-        message: "explicit block-axis offset differs from sibling cohort"
+        message: "block-axis offset differs from siblings",
+        fix: "normalize margin/padding to match sibling cohort"
       };
     case "declared-offset-delta":
       return {
         kind: "declared-offset-delta",
-        message: "declared block-axis offset differs from sibling cohort"
+        message: "declared block-axis offset differs from siblings",
+        fix: "remove or unify the offset"
       };
     case "baseline-conflict":
       return {
         kind: "baseline-conflict",
-        message: "baseline/line-height signals conflict between siblings"
+        message: "baseline/line-height mismatch between siblings",
+        fix: "unify line-height or add vertical-align"
       };
     case "context-conflict":
       return {
         kind: "context-conflict",
-        message: "container and child alignment settings conflict"
+        message: "container and child alignment conflict",
+        fix: "check align-items on the parent"
       };
     case "replaced-control-risk":
       return {
         kind: "replaced-control-risk",
-        message: "replaced/control baseline behavior differs from neighboring text"
+        message: "replaced element baseline differs from text siblings",
+        fix: "add vertical-align: middle to the replaced element"
       };
     case "content-composition-conflict":
       return {
         kind: "content-composition-conflict",
-        message: formatContentCompositionFinding(input, evidence)
+        message: "content composition differs from siblings",
+        fix: formatCompositionFixSuggestion(input.subjectContentComposition)
       };
     default:
       return null;
   }
 }
-function formatContentCompositionFinding(input, evidence) {
-  const subjectClassification = formatCompositionClassification(input.subjectContentComposition.classification);
-  const majorityClassification = formatCompositionClassification(evidence.majorityClassification);
-  const fixSuggestion = formatCompositionFixSuggestion(input.subjectContentComposition);
-  return `siblings have identical CSS but different content composition (subject: ${subjectClassification}, majority: ${majorityClassification}; fix: ${fixSuggestion})`;
-}
 function round(value2) {
   return Math.round(value2 * 1e3) / 1e3;
 }
@@ -39269,7 +39280,7 @@ var jsxStylePolicy = defineCrossRule({
 
 // src/cross-file/rules/css-layout-sibling-alignment-outlier.ts
 var messages143 = {
-  misalignedSibling: "Element '{{subject}}' appears vertically misaligned relative to sibling cohort in '{{parent}}' (context {{context}}, severity {{severity}}, confidence {{confidence}}{{offsetClause}}; causes: {{causes}})."
+  misalignedSibling: "Vertically misaligned '{{subject}}' in '{{parent}}'.{{fix}}{{offsetClause}}"
 };
 var MIN_CONFIDENCE_THRESHOLD = 0.48;
 var MIN_OFFSET_PX_THRESHOLD = 2;
@@ -39294,6 +39305,7 @@ var siblingAlignmentDetector = {
         severity: decision.evaluation.severity,
         confidence: decision.evaluation.confidence,
         causes: formatAlignmentCauses(decision.evaluation.signalFindings),
+        primaryFix: formatPrimaryFix(decision.evaluation.signalFindings),
         contextKind: decision.evaluation.contextKind,
         contextCertainty: decision.evaluation.contextCertainty,
         estimatedOffsetPx: decision.evaluation.estimatedOffsetPx,
@@ -39376,8 +39388,11 @@ var cssLayoutSiblingAlignmentOutlier = defineCrossRule({
       const confidence = formatFixed(detection.evidence.confidence);
       const offset = detection.evidence.estimatedOffsetPx;
       const hasOffset = offset !== null && Math.abs(offset) > 0.25;
-      const offsetClause = hasOffset ? `, estimated offset ${formatFixed(offset)}px` : "";
+      const offsetClause = hasOffset ? ` Estimated offset: ${formatFixed(offset)}px.` : "";
       const causes = detection.evidence.causes.length === 0 ? "alignment signals indicate an outlier" : detection.evidence.causes.join("; ");
+      const primaryFix = detection.evidence.primaryFix;
+      const firstChar = primaryFix.length > 0 ? primaryFix[0] : void 0;
+      const fix = firstChar !== void 0 ? ` ${firstChar.toUpperCase()}${primaryFix.slice(1)}.` : "";
       if (log.enabled) {
         log.debug(
           `${logPrefix} EMIT: severity=${severity} confidence=${confidence} offset=${offset?.toFixed(2) ?? "null"} posterior=[${detection.evidence.posteriorLower.toFixed(3)},${detection.evidence.posteriorUpper.toFixed(3)}] evidenceMass=${detection.evidence.evidenceMass.toFixed(3)} topFactors=[${detection.evidence.topFactors.join(",")}] causes=[${causes}]`
@@ -39392,11 +39407,8 @@ var cssLayoutSiblingAlignmentOutlier = defineCrossRule({
           resolveMessage(messages143.misalignedSibling, {
             subject,
             parent,
-            context: detection.evidence.contextKind,
-            severity,
-            confidence,
-            offsetClause,
-            causes
+            fix,
+            offsetClause
           }),
           "warn"
         )
@@ -41486,7 +41498,7 @@ var RULES = [
     "category": "css-layout",
     "plugin": "cross-file",
     "messages": {
-      "misalignedSibling": "Element '{{subject}}' appears vertically misaligned relative to sibling cohort in '{{parent}}' (context {{context}}, severity {{severity}}, confidence {{confidence}}{{offsetClause}}; causes: {{causes}})."
+      "misalignedSibling": "Vertically misaligned '{{subject}}' in '{{parent}}'.{{fix}}{{offsetClause}}"
     }
   },
   {
@@ -42729,7 +42741,7 @@ var RULES_BY_CATEGORY = {
   "css-animation": [{ "id": "css-no-discrete-transition", "severity": "error", "description": "Disallow transitions on discrete CSS properties.", "fixable": false, "category": "css-animation", "plugin": "css", "messages": { "discreteTransition": "Property `{{property}}` is discrete and should not be transitioned." } }, { "id": "css-no-empty-keyframes", "severity": "error", "description": "Disallow empty @keyframes rules.", "fixable": false, "category": "css-animation", "plugin": "css", "messages": { "emptyKeyframes": "@keyframes `{{name}}` has no effective keyframes." } }, { "id": "no-layout-property-animation", "severity": "warn", "description": "Disallow animating layout-affecting properties.", "fixable": false, "category": "css-animation", "plugin": "css", "messages": { "avoidLayoutAnimation": "Avoid animating layout property `{{property}}`. Prefer transform or opacity to reduce layout thrashing." } }, { "id": "no-transition-all", "severity": "warn", "description": "Disallow transition: all and transition-property: all.", "fixable": false, "category": "css-animation", "plugin": "css", "messages": { "avoidTransitionAll": "Avoid `transition: all`. Transition specific properties to reduce unnecessary style and paint work." } }, { "id": "no-unknown-animation-name", "severity": "error", "description": "Disallow animation names that do not match declared keyframes.", "fixable": false, "category": "css-animation", "plugin": "css", "messages": { "unknownAnimationName": "Animation name `{{name}}` in `{{property}}` does not match any declared @keyframes." } }, { "id": "no-unused-keyframes", "severity": "warn", "description": "Disallow unused @keyframes declarations.", "fixable": false, "category": "css-animation", "plugin": "css", "messages": { "unusedKeyframes": "@keyframes `{{name}}` is never referenced by animation declarations." } }],
   "css-cascade": [{ "id": "declaration-no-overridden-within-rule", "severity": "warn", "description": "Disallow duplicate declarations of the same property within a single rule block.", "fixable": false, "category": "css-cascade", "plugin": "css", "messages": { "overriddenWithinRule": "Declaration `{{property}}` is overridden later in the same rule. Keep one final declaration per property." } }, { "id": "media-query-overlap-conflict", "severity": "warn", "description": "Disallow conflicting declarations in partially overlapping media queries.", "fixable": false, "category": "css-cascade", "plugin": "css", "messages": { "mediaOverlapConflict": "Overlapping media queries set different `{{property}}` values for `{{selector}}` in the same overlap range." } }, { "id": "no-descending-specificity-conflict", "severity": "warn", "description": "Disallow lower-specificity selectors after higher-specificity selectors for the same property.", "fixable": false, "category": "css-cascade", "plugin": "css", "messages": { "descendingSpecificity": "Lower-specificity selector `{{laterSelector}}` appears after `{{earlierSelector}}` for `{{property}}`, creating brittle cascade behavior." } }, { "id": "no-layer-order-inversion", "severity": "warn", "description": "Disallow source-order assumptions that are inverted by layer precedence.", "fixable": false, "category": "css-cascade", "plugin": "css", "messages": { "layerOrderInversion": "Declaration for `{{property}}` in selector `{{selector}}` appears later but is overridden by an earlier declaration due to @layer precedence." } }, { "id": "no-redundant-override-pairs", "severity": "warn", "description": "Disallow declarations that are deterministically overridden in the same selector context.", "fixable": false, "category": "css-cascade", "plugin": "css", "messages": { "redundantOverride": "Declaration `{{property}}` is always overridden later by the same selector in the same cascade context." } }],
   "css-jsx": [{ "id": "css-no-unreferenced-component-class", "severity": "warn", "description": "Detect CSS classes that are never referenced by static JSX class attributes.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "unreferencedClass": "CSS class '{{className}}' is defined but not referenced by static JSX class attributes" } }, { "id": "jsx-classlist-boolean-values", "severity": "error", "description": "Require classList values to be boolean-like expressions.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "nonBooleanValue": "classList value for `{{name}}` must be boolean." } }, { "id": "jsx-classlist-no-accessor-reference", "severity": "error", "description": "Disallow passing accessor references directly as classList values.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "accessorReference": "Signal accessor `{{name}}` must be called in classList value (use {{name}}())." } }, { "id": "jsx-classlist-no-constant-literals", "severity": "warn", "description": "Disallow classList entries with constant true/false values.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "constantEntry": "classList entry `{{name}}: {{value}}` is constant; move it to static class." } }, { "id": "jsx-classlist-static-keys", "severity": "error", "description": "Require classList keys to be static and non-computed.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "nonStaticKey": "classList key must be statically known for reliable class mapping." } }, { "id": "jsx-layout-classlist-geometry-toggle", "severity": "warn", "description": "Flag classList-driven class toggles that map to layout-affecting CSS geometry changes.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "classListGeometryToggle": "classList toggles '{{className}}', and matching CSS changes layout-affecting '{{property}}', which can cause CLS." } }, { "id": "jsx-layout-fill-image-parent-must-be-sized", "severity": "warn", "description": "Require stable parent size and positioning for fill-image component usage.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "unsizedFillParent": "Fill-image component '{{component}}' is inside a parent without stable size/position; add parent sizing (height/min-height/aspect-ratio) and non-static position to avoid CLS." } }, { "id": "jsx-layout-picture-source-ratio-consistency", "severity": "warn", "description": "Require consistent intrinsic aspect ratios across <picture> sources and fallback image.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "inconsistentPictureRatio": "`<picture>` source ratio {{sourceRatio}} differs from fallback img ratio {{imgRatio}}, which can cause reserved-space mismatch and CLS." } }, { "id": "jsx-layout-unstable-style-toggle", "severity": "warn", "description": "Flag dynamic inline style values on layout-sensitive properties that can trigger CLS.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "unstableLayoutStyleToggle": "Dynamic style value for '{{property}}' can toggle layout geometry at runtime and cause CLS." } }, { "id": "jsx-no-duplicate-class-token-class-classlist", "severity": "warn", "description": "Disallow duplicate class tokens between class and classList on the same JSX element.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "duplicateClassToken": "Class token `{{name}}` appears in both class and classList." } }, { "id": "jsx-no-undefined-css-class", "severity": "error", "description": "Detect undefined CSS class names in JSX", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "undefinedClass": "CSS class '{{className}}' is not defined in project CSS files" } }, { "id": "jsx-style-kebab-case-keys", "severity": "error", "description": "Require kebab-case keys in JSX style object literals.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "kebabStyleKey": "Style key `{{name}}` should be `{{kebab}}` in Solid style objects." } }, { "id": "jsx-style-no-function-values", "severity": "error", "description": "Disallow function values in JSX style objects.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "functionStyleValue": "Style value for `{{name}}` is a function; pass computed value instead." } }, { "id": "jsx-style-no-unused-custom-prop", "severity": "warn", "description": "Detect inline style custom properties that are never consumed by CSS var() references.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "unusedInlineVar": "Inline custom property `{{name}}` is never read via var({{name}})." } }, { "id": "jsx-style-policy", "severity": "warn", "description": "Enforce accessibility policy thresholds on inline JSX style objects.", "fixable": false, "category": "css-jsx", "plugin": "cross-file", "messages": { "fontTooSmall": "Inline style `{{prop}}: {{value}}` ({{resolved}}px) is below the minimum `{{min}}px` for policy `{{policy}}`.", "lineHeightTooSmall": "Inline style `line-height: {{value}}` is below the minimum `{{min}}` for policy `{{policy}}`.", "heightTooSmall": "Inline style `{{prop}}: {{value}}` ({{resolved}}px) is below the minimum `{{min}}px` for interactive elements in policy `{{policy}}`.", "letterSpacingTooSmall": "Inline style `letter-spacing: {{value}}` ({{resolved}}em) is below the minimum `{{min}}em` for policy `{{policy}}`.", "wordSpacingTooSmall": "Inline style `word-spacing: {{value}}` ({{resolved}}em) is below the minimum `{{min}}em` for policy `{{policy}}`." } }],
-  "css-layout": [{ "id": "css-layout-animation-layout-property", "severity": "warn", "description": "Disallow keyframe animations that mutate layout-affecting properties and can trigger CLS.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "animationLayoutProperty": "Animation '{{animation}}' mutates layout-affecting '{{property}}', which can trigger CLS. Prefer transform/opacity or reserve geometry." } }, { "id": "css-layout-box-sizing-toggle-with-chrome", "severity": "warn", "description": "Disallow conditional box-sizing mode toggles when box chrome contributes to geometry shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "boxSizingToggleWithChrome": "Conditional `box-sizing` toggle on '{{tag}}' combines with non-zero padding/border, which can shift layout and trigger CLS." } }, { "id": "css-layout-conditional-display-collapse", "severity": "warn", "description": "Disallow conditional display collapse in flow without reserved geometry.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "conditionalDisplayCollapse": "Conditional display sets '{{display}}' on '{{tag}}' without stable reserved space, which can collapse/expand layout and cause CLS." } }, { "id": "css-layout-conditional-offset-shift", "severity": "warn", "description": "Disallow conditional non-zero block-axis offsets that can trigger layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "conditionalOffsetShift": "Conditional style applies non-zero '{{property}}' offset ({{value}}), which can cause layout shifts when conditions toggle." } }, { "id": "css-layout-conditional-white-space-wrap-shift", "severity": "warn", "description": "Disallow conditional white-space wrapping mode toggles that can trigger CLS.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "conditionalWhiteSpaceShift": "Conditional white-space '{{whiteSpace}}' on '{{tag}}' can reflow text and shift siblings; keep wrapping behavior stable or reserve geometry." } }, { "id": "css-layout-content-visibility-no-intrinsic-size", "severity": "warn", "description": "Require intrinsic size reservation when using content-visibility auto to avoid late layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "missingIntrinsicSize": "`content-visibility: auto` on '{{tag}}' lacks intrinsic size reservation (`contain-intrinsic-size`/min-height/height/aspect-ratio), which can cause CLS." } }, { "id": "css-layout-dynamic-slot-no-reserved-space", "severity": "warn", "description": "Require reserved block space for dynamic content containers to avoid layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "dynamicSlotNoReservedSpace": "Dynamic content container '{{tag}}' does not reserve block space (min-height/height/aspect-ratio/contain-intrinsic-size), which can cause CLS." } }, { "id": "css-layout-font-swap-instability", "severity": "warn", "description": "Require metric overrides for swapping webfonts to reduce layout shifts during font load.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "unstableFontSwap": "`@font-face` for '{{family}}' uses `font-display: {{display}}` without metric overrides (for example `size-adjust`), which can cause CLS when the webfont swaps in." } }, { "id": "css-layout-overflow-anchor-instability", "severity": "warn", "description": "Disallow overflow-anchor none on dynamic or scrollable containers prone to visible layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "unstableOverflowAnchor": "Element '{{tag}}' sets `overflow-anchor: none` on a {{context}} container; disabling scroll anchoring can amplify visible layout shifts." } }, { "id": "css-layout-overflow-mode-toggle-instability", "severity": "warn", "description": "Disallow conditional overflow mode switches that can introduce scrollbar-induced layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "overflowModeToggle": "Conditional overflow mode changes scrolling ('{{overflow}}') on '{{tag}}' without `scrollbar-gutter: stable`, which can trigger CLS." } }, { "id": "css-layout-scrollbar-gutter-instability", "severity": "warn", "description": "Require stable scrollbar gutters for scrollable containers to reduce layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "missingScrollbarGutter": "Scrollable container '{{tag}}' uses overflow auto/scroll without `scrollbar-gutter: stable`, which can trigger CLS when scrollbars appear." } }, { "id": "css-layout-sibling-alignment-outlier", "severity": "warn", "description": "Detect vertical alignment outliers between sibling elements in shared layout containers.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "misalignedSibling": "Element '{{subject}}' appears vertically misaligned relative to sibling cohort in '{{parent}}' (context {{context}}, severity {{severity}}, confidence {{confidence}}{{offsetClause}}; causes: {{causes}})." } }, { "id": "css-layout-stateful-box-model-shift", "severity": "warn", "description": "Disallow stateful selector changes that alter element geometry and trigger layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "statefulBoxModelShift": "State selector '{{selector}}' changes layout-affecting '{{property}}'. Keep geometry stable across states to avoid CLS." } }, { "id": "css-layout-transition-layout-property", "severity": "warn", "description": "Disallow transitions that animate layout-affecting geometry properties.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "transitionLayoutProperty": "Transition '{{property}}' in '{{declaration}}' animates layout-affecting geometry. Prefer transform/opacity to avoid CLS." } }, { "id": "css-layout-unsized-replaced-element", "severity": "warn", "description": "Require stable reserved geometry for replaced media elements to prevent layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "unsizedReplacedElement": "Replaced element '{{tag}}' has no stable reserved size (width/height or aspect-ratio with a dimension), which can cause CLS." } }],
+  "css-layout": [{ "id": "css-layout-animation-layout-property", "severity": "warn", "description": "Disallow keyframe animations that mutate layout-affecting properties and can trigger CLS.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "animationLayoutProperty": "Animation '{{animation}}' mutates layout-affecting '{{property}}', which can trigger CLS. Prefer transform/opacity or reserve geometry." } }, { "id": "css-layout-box-sizing-toggle-with-chrome", "severity": "warn", "description": "Disallow conditional box-sizing mode toggles when box chrome contributes to geometry shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "boxSizingToggleWithChrome": "Conditional `box-sizing` toggle on '{{tag}}' combines with non-zero padding/border, which can shift layout and trigger CLS." } }, { "id": "css-layout-conditional-display-collapse", "severity": "warn", "description": "Disallow conditional display collapse in flow without reserved geometry.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "conditionalDisplayCollapse": "Conditional display sets '{{display}}' on '{{tag}}' without stable reserved space, which can collapse/expand layout and cause CLS." } }, { "id": "css-layout-conditional-offset-shift", "severity": "warn", "description": "Disallow conditional non-zero block-axis offsets that can trigger layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "conditionalOffsetShift": "Conditional style applies non-zero '{{property}}' offset ({{value}}), which can cause layout shifts when conditions toggle." } }, { "id": "css-layout-conditional-white-space-wrap-shift", "severity": "warn", "description": "Disallow conditional white-space wrapping mode toggles that can trigger CLS.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "conditionalWhiteSpaceShift": "Conditional white-space '{{whiteSpace}}' on '{{tag}}' can reflow text and shift siblings; keep wrapping behavior stable or reserve geometry." } }, { "id": "css-layout-content-visibility-no-intrinsic-size", "severity": "warn", "description": "Require intrinsic size reservation when using content-visibility auto to avoid late layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "missingIntrinsicSize": "`content-visibility: auto` on '{{tag}}' lacks intrinsic size reservation (`contain-intrinsic-size`/min-height/height/aspect-ratio), which can cause CLS." } }, { "id": "css-layout-dynamic-slot-no-reserved-space", "severity": "warn", "description": "Require reserved block space for dynamic content containers to avoid layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "dynamicSlotNoReservedSpace": "Dynamic content container '{{tag}}' does not reserve block space (min-height/height/aspect-ratio/contain-intrinsic-size), which can cause CLS." } }, { "id": "css-layout-font-swap-instability", "severity": "warn", "description": "Require metric overrides for swapping webfonts to reduce layout shifts during font load.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "unstableFontSwap": "`@font-face` for '{{family}}' uses `font-display: {{display}}` without metric overrides (for example `size-adjust`), which can cause CLS when the webfont swaps in." } }, { "id": "css-layout-overflow-anchor-instability", "severity": "warn", "description": "Disallow overflow-anchor none on dynamic or scrollable containers prone to visible layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "unstableOverflowAnchor": "Element '{{tag}}' sets `overflow-anchor: none` on a {{context}} container; disabling scroll anchoring can amplify visible layout shifts." } }, { "id": "css-layout-overflow-mode-toggle-instability", "severity": "warn", "description": "Disallow conditional overflow mode switches that can introduce scrollbar-induced layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "overflowModeToggle": "Conditional overflow mode changes scrolling ('{{overflow}}') on '{{tag}}' without `scrollbar-gutter: stable`, which can trigger CLS." } }, { "id": "css-layout-scrollbar-gutter-instability", "severity": "warn", "description": "Require stable scrollbar gutters for scrollable containers to reduce layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "missingScrollbarGutter": "Scrollable container '{{tag}}' uses overflow auto/scroll without `scrollbar-gutter: stable`, which can trigger CLS when scrollbars appear." } }, { "id": "css-layout-sibling-alignment-outlier", "severity": "warn", "description": "Detect vertical alignment outliers between sibling elements in shared layout containers.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "misalignedSibling": "Vertically misaligned '{{subject}}' in '{{parent}}'.{{fix}}{{offsetClause}}" } }, { "id": "css-layout-stateful-box-model-shift", "severity": "warn", "description": "Disallow stateful selector changes that alter element geometry and trigger layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "statefulBoxModelShift": "State selector '{{selector}}' changes layout-affecting '{{property}}'. Keep geometry stable across states to avoid CLS." } }, { "id": "css-layout-transition-layout-property", "severity": "warn", "description": "Disallow transitions that animate layout-affecting geometry properties.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "transitionLayoutProperty": "Transition '{{property}}' in '{{declaration}}' animates layout-affecting geometry. Prefer transform/opacity to avoid CLS." } }, { "id": "css-layout-unsized-replaced-element", "severity": "warn", "description": "Require stable reserved geometry for replaced media elements to prevent layout shifts.", "fixable": false, "category": "css-layout", "plugin": "cross-file", "messages": { "unsizedReplacedElement": "Replaced element '{{tag}}' has no stable reserved size (width/height or aspect-ratio with a dimension), which can cause CLS." } }],
   "css-property": [{ "id": "css-no-custom-property-cycle", "severity": "error", "description": "Disallow cycles in custom property references.", "fixable": false, "category": "css-property", "plugin": "css", "messages": { "variableCycle": "Custom property cycle detected involving `{{name}}`." } }, { "id": "css-no-hardcoded-z-index", "severity": "warn", "description": "Disallow hardcoded positive z-index literals.", "fixable": false, "category": "css-property", "plugin": "css", "messages": { "hardcodedZ": "Use a z-index token variable instead of literal `{{value}}`." } }, { "id": "css-no-legacy-vh-100", "severity": "warn", "description": "Disallow 100vh in viewport sizing declarations.", "fixable": false, "category": "css-property", "plugin": "css", "messages": { "avoidLegacyVh": "Use 100dvh/100svh instead of `100vh` for mobile-safe viewport sizing." } }, { "id": "css-z-index-requires-positioned-context", "severity": "warn", "description": "Require positioned context when using z-index.", "fixable": false, "category": "css-property", "plugin": "css", "messages": { "zIndexNoContext": "`z-index` has no guaranteed effect without a positioned context." } }, { "id": "no-important", "severity": "warn", "description": "Disallow !important declarations.", "fixable": false, "category": "css-property", "plugin": "css", "messages": { "avoidImportant": "Avoid `!important` on `{{property}}`. It increases override cost and usually signals specificity debt." } }, { "id": "no-unresolved-custom-properties", "severity": "error", "description": "Disallow unresolved custom property references.", "fixable": false, "category": "css-property", "plugin": "css", "messages": { "unresolvedCustomProperty": "Custom property reference `{{name}}` is unresolved in `{{property}}`. Define it or provide a fallback value." } }, { "id": "no-unused-custom-properties", "severity": "warn", "description": "Disallow unused CSS custom properties.", "fixable": false, "category": "css-property", "plugin": "css", "messages": { "unusedCustomProperty": "Custom property `{{name}}` is never referenced within the project CSS." } }],
   "css-selector": [{ "id": "no-complex-selectors", "severity": "warn", "description": "Disallow deep selectors that are expensive to match.", "fixable": false, "category": "css-selector", "plugin": "css", "messages": { "selectorTooDeep": "Selector `{{selector}}` has depth {{depth}}. Deep selectors increase style recalculation cost and are fragile across component rerenders." } }, { "id": "no-duplicate-selectors", "severity": "warn", "description": "Disallow duplicate selector blocks.", "fixable": false, "category": "css-selector", "plugin": "css", "messages": { "duplicateSelector": "Selector `{{selector}}` is duplicated {{count}} times. Merge declarations to avoid cascade ambiguity." } }, { "id": "no-id-selectors", "severity": "warn", "description": "Disallow ID selectors.", "fixable": false, "category": "css-selector", "plugin": "css", "messages": { "avoidId": "Avoid ID selector in `{{selector}}`. IDs raise specificity and make component-level styling harder to maintain." } }, { "id": "selector-max-attribute-and-universal", "severity": "off", "description": "Disallow selectors with attribute or universal selectors beyond configured limits.", "fixable": false, "category": "css-selector", "plugin": "css", "messages": { "tooManyAttributes": "Selector `{{selector}}` uses {{count}} attribute selector(s). Maximum allowed is {{max}}.", "tooManyUniversals": "Selector `{{selector}}` uses {{count}} universal selector(s). Maximum allowed is {{max}}." } }, { "id": "selector-max-specificity", "severity": "warn", "description": "Disallow selectors that exceed a specificity threshold.", "fixable": false, "category": "css-selector", "plugin": "css", "messages": { "maxSpecificity": "Selector `{{selector}}` specificity {{specificity}} exceeds max {{max}}. Reduce selector weight to keep the cascade predictable." } }],
   "css-structure": [{ "id": "css-no-empty-rule", "severity": "warn", "description": "Disallow empty CSS rules.", "fixable": false, "category": "css-structure", "plugin": "css", "messages": { "emptyRule": "Empty rule `{{selector}}` should be removed." } }, { "id": "css-no-unknown-container-name", "severity": "error", "description": "Disallow unknown named containers in @container queries.", "fixable": false, "category": "css-structure", "plugin": "css", "messages": { "unknownContainer": "Unknown container name `{{name}}` in @container query." } }, { "id": "css-no-unused-container-name", "severity": "warn", "description": "Disallow unused named containers.", "fixable": false, "category": "css-structure", "plugin": "css", "messages": { "unusedContainer": "Container name `{{name}}` is declared but never queried." } }, { "id": "layer-requirement-for-component-rules", "severity": "warn", "description": "Require style rules to be inside @layer when the file defines layers.", "fixable": false, "category": "css-structure", "plugin": "css", "messages": { "missingLayer": "Rule `{{selector}}` is not inside any @layer block while this file uses @layer. Place component rules inside an explicit layer." } }],