Merge pull request #20 from DrSkillIssue/fix/mutually-exclusive-attribute-delta

fix: suppress false positives for css-layout-conditional-white-space-wrap-shift on mutually exclusive attribute dispatch

Author: DrSkillIssue

packages/ganko/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drskillissue/ganko",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Static analysis SDK for Solid.js — graphs, rules, ESLint adapter",
   "license": "MIT",
   "type": "module",

packages/ganko/src/cross-file/layout/build.ts

@@ -330,6 +330,7 @@ export function buildLayoutGraph(solids: readonly SolidGraph[], css: CSSGraph, l
     elements,
     appliesByNode,
     monitoredDeclarationsBySelectorId,
+    selectorsById,
   )
   const elementsWithConditionalOverflowDelta = buildConditionalDeltaSignalGroupElements(
     conditionalDeltaIndex.elementsWithConditionalDeltaBySignal,

packages/ganko/src/cross-file/layout/cascade-builder.ts

@@ -400,6 +400,7 @@ export function buildConditionalDeltaIndex(
   elements: readonly LayoutElementNode[],
   appliesByNode: ReadonlyMap<LayoutElementNode, readonly LayoutMatchEdge[]>,
   monitoredDeclarationsBySelectorId: ReadonlyMap<number, readonly MonitoredDeclaration[]>,
+  selectorsById: ReadonlyMap<number, SelectorEntity>,
 ): ConditionalDeltaIndex {
   const conditionalSignalDeltaFactsByNode = new Map<LayoutElementNode, ReadonlyMap<LayoutSignalName, LayoutConditionalSignalDeltaFact>>()
   const elementsWithConditionalDeltaBySignal = new Map<LayoutSignalName, LayoutElementNode[]>()
@@ -414,13 +415,25 @@ export function buildConditionalDeltaIndex(
 
     if (edges !== undefined && edges.length > 0) {
       const byProperty = new Map<LayoutSignalName, { conditional: Set<string>; unconditional: Set<string> }>()
+      // Lazily allocated. Tracks which attribute dispatch group each conditional (property, value)
+      // belongs to. Used to detect mutually exclusive attribute value selectors (e.g.
+      // [data-sizing="intrinsic"] vs [data-sizing="flex"]) where only one can match at a time.
+      let conditionalAttributeDispatch: Map<LayoutSignalName, Map<string, string>> | null = null
 
       for (let j = 0; j < edges.length; j++) {
         const currentEdge = edges[j]
         if (!currentEdge) continue
         const declarations = monitoredDeclarationsBySelectorId.get(currentEdge.selectorId)
         if (!declarations) continue
 
+        // Identify the dynamic attribute causing conditionality for this edge.
+        // A conditional match from a selector like [data-sizing="intrinsic"] on an element
+        // with data-sizing=null (dynamic) means the conditionality comes from data-sizing.
+        let conditionalAttributeName: string | null = null
+        if (currentEdge.conditionalMatch) {
+          conditionalAttributeName = identifyConditionalAttribute(currentEdge.selectorId, node, selectorsById)
+        }
+
         for (let k = 0; k < declarations.length; k++) {
           const declaration = declarations[k]
           if (!declaration) continue
@@ -440,6 +453,16 @@ export function buildConditionalDeltaIndex(
 
             if (declaration.guardProvenance.kind === LayoutSignalGuard.Conditional || currentEdge.conditionalMatch) {
               bucket.conditional.add(expandedEntry.value)
+              // Track the attribute dispatch source for this conditional value
+              if (conditionalAttributeName !== null && declaration.guardProvenance.kind !== LayoutSignalGuard.Conditional) {
+                if (conditionalAttributeDispatch === null) conditionalAttributeDispatch = new Map()
+                let dispatchMap = conditionalAttributeDispatch.get(property)
+                if (!dispatchMap) {
+                  dispatchMap = new Map()
+                  conditionalAttributeDispatch.set(property, dispatchMap)
+                }
+                dispatchMap.set(expandedEntry.value, conditionalAttributeName)
+              }
               continue
             }
             bucket.unconditional.add(expandedEntry.value)
@@ -467,6 +490,29 @@ export function buildConditionalDeltaIndex(
             }
           }
 
+          // Suppress delta when all conditional values come from mutually exclusive
+          // attribute value selectors on the same attribute. E.g., [data-sizing="intrinsic"]
+          // sets white-space:nowrap and [data-sizing="flex"] sets white-space:normal — these
+          // are mutually exclusive on the same element, so the property never actually shifts.
+          if (hasDelta && conditionalAttributeDispatch !== null) {
+            const dispatchMap = conditionalAttributeDispatch.get(property)
+            if (dispatchMap !== undefined && dispatchMap.size === conditionalValues.length) {
+              let singleAttribute: string | null = null
+              let allSameAttribute = true
+              for (const attrName of dispatchMap.values()) {
+                if (singleAttribute === null) {
+                  singleAttribute = attrName
+                } else if (singleAttribute !== attrName) {
+                  allSameAttribute = false
+                  break
+                }
+              }
+              if (allSameAttribute && singleAttribute !== null) {
+                hasDelta = false
+              }
+            }
+          }
+
           const scrollProfile = buildScrollValueProfile(property, conditionalValues, unconditionalValues)
 
           facts.set(property, {
@@ -571,6 +617,45 @@ export function buildConditionalDeltaSignalGroupElements(
   return out
 }
 
+/**
+ * Identify the single dynamic attribute on the element that caused a conditional
+ * selector match. Returns the attribute name if exactly one attribute constraint
+ * in the selector's subject compound targets a dynamic attribute (value=null) on
+ * the element with an `equals` operator. Returns null if the conditionality comes
+ * from multiple attributes, non-equals operators, or non-attribute sources.
+ */
+function identifyConditionalAttribute(
+  selectorId: number,
+  node: LayoutElementNode,
+  selectorsById: ReadonlyMap<number, SelectorEntity>,
+): string | null {
+  const selector = selectorsById.get(selectorId)
+  if (!selector) return null
+
+  const constraints = selector.anchor.attributes
+  let dynamicAttributeName: string | null = null
+
+  for (let i = 0; i < constraints.length; i++) {
+    const constraint = constraints[i]
+    if (!constraint) continue
+    if (constraint.operator !== "equals") continue
+    if (constraint.value === null) continue
+
+    // Check if this attribute is dynamic on the element.
+    // attributes.get returns undefined (absent), string (known), or null (dynamic).
+    // Only null (dynamic value) is the conditionality source.
+    const elementValue = node.attributes.get(constraint.name)
+    if (elementValue !== null) continue
+    if (dynamicAttributeName !== null && dynamicAttributeName !== constraint.name) {
+      // Multiple different dynamic attributes — can't determine single dispatch source
+      return null
+    }
+    dynamicAttributeName = constraint.name
+  }
+
+  return dynamicAttributeName
+}
+
 function buildScrollValueProfile(
   property: LayoutSignalName,
   conditionalValues: readonly string[],

packages/ganko/test/cross-file/layout-cls-rules.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest"
 import type { Diagnostic } from "../../src/diagnostic"
 import { analyzeCrossFileInput } from "../../src/cross-file"
-import { parseCode, lazyParseBatch } from "../solid/test-utils"
+import { parseCode } from "../solid/test-utils"
 
 interface CssFixture {
   readonly path: string
@@ -14,7 +14,6 @@ interface CssFixture {
  * The SolidInput is created lazily on first access and cached for reuse.
  */
 const tsxToSolidInput = new Map<string, ReturnType<typeof parseCode>>()
-let batchProgram: import("typescript").Program | null = null
 let batchFileCounter = 0
 
 function getOrCreateSolidInput(tsx: string): ReturnType<typeof parseCode> {
@@ -1627,6 +1626,29 @@ describe("CLS rule suite", () => {
     expect(diagnostics).toHaveLength(1)
   })
 
+  it("does not flag white-space wrap shifts from mutually exclusive attribute value selectors", () => {
+    const diagnostics = runRule(
+      "css-layout-conditional-white-space-wrap-shift",
+      `
+        import "./layout.css"
+        export function App() {
+          return (
+            <section>
+              <p class="cell" data-sizing={props.sizing}>content</p>
+              <p>peer</p>
+            </section>
+          )
+        }
+      `,
+      `
+        .cell[data-sizing="intrinsic"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .cell[data-sizing="flex"] { white-space: normal; word-break: break-word; }
+      `,
+    )
+
+    expect(diagnostics).toHaveLength(0)
+  })
+
   it("flags conditional inset-block shorthand offsets", () => {
     const diagnostics = runRule(
       "css-layout-conditional-offset-shift",

packages/ganko/test/solid/rules/avoid-object-spread-edge-cases.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from "vitest"
+import { describe, it, expect } from "vitest"
 import { lazyRuleBatch, applyAllFixes, at } from "../test-utils"
 import { avoidObjectSpread } from "../../../src/solid/rules/correctness"
 

packages/lsp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drskillissue/ganko-lsp",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Language server and CLI linter for Solid.js projects",
   "license": "MIT",
   "type": "commonjs",

packages/shared/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@drskillissue/ganko-shared",
   "private": true,
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Shared protocol types for the ganko toolchain",
   "license": "MIT",
   "type": "commonjs",

packages/vscode/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "displayName": "Ganko — Solid.js & CSS Linter",
   "description": "Static analysis for Solid.js and CSS",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "license": "MIT",
   "publisher": "ganko",
   "icon": "icon.png",