@nordcraft/search 1.0.79 → 1.0.81

package/src/rules/issues/style/unknownCSSVariable.test.ts

@@ -0,0 +1,364 @@
+import { describe, expect, test } from 'bun:test'
+import { searchProject } from '../../../searchProject'
+import { unknownCSSVariableRule } from './unknownCSSVariable'
+
+describe('unknownCSSVariableRule', () => {
+  test('should not report CSS variables that are defined in the global theme', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {
+                '--global-color': {
+                  syntax: { type: 'primitive', name: 'color' },
+                  description: 'A global color',
+                  inherits: true,
+                  initialValue: 'blue',
+                  values: {},
+                },
+                '--local-margin': {
+                  syntax: { type: 'primitive', name: 'length-percentage' },
+                  description: 'A local margin',
+                  inherits: true,
+                  initialValue: '10px',
+                  values: {},
+                },
+              },
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'var(--global-color)',
+                    margin: 'calc(var(--local-margin) + 5px)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toBeEmpty()
+  })
+
+  test('should not report CSS variables that are defined in ancestors', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {},
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {},
+                  events: {},
+                  classes: {},
+                  children: ['child'],
+                  customProperties: {
+                    '--local-color': {
+                      formula: {
+                        type: 'value',
+                        value: 'blue',
+                      },
+                    },
+                  },
+                },
+                child: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  customProperties: {
+                    '--own-color': {
+                      formula: {
+                        type: 'value',
+                        value: 'red',
+                      },
+                    },
+                  },
+                  style: {
+                    margin: 'var(--local-color)',
+                    color: 'var(--own-color)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toBeEmpty()
+  })
+
+  test('should report CSS variables that are not defined globally or locally', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {},
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'var(--undefined-global)',
+                    margin: 'var(--undefined-local)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(2)
+    expect(problems[0].details).toEqual({ name: '--undefined-global' })
+    expect(problems[1].details).toEqual({ name: '--undefined-local' })
+  })
+
+  test('should report problem if local variable is used in parent but only defined in child', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {},
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'var(--child-only-variable)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: ['child'],
+                },
+                child: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  customProperties: {
+                    '--child-only-variable': {
+                      formula: {
+                        type: 'value',
+                        value: 'red',
+                      },
+                    },
+                  },
+                  style: {},
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+  })
+
+  test('should not report when legacy style variables are used', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {},
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  'style-variables': [
+                    {
+                      name: 'legacy-variable',
+                      formula: {
+                        type: 'value',
+                        value: '10px',
+                      },
+                      category: 'spacing',
+                    },
+                  ],
+                  style: {
+                    margin: 'var(--legacy-variable)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toBeEmpty()
+  })
+
+  test('should not report when declared in a style', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+              propertyDefinitions: {},
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    '--declared-in-style': '10px',
+                    margin: 'var(--declared-in-style)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toBeEmpty()
+  })
+
+  test('should not report when a legacy theme exists (no propertyDefinitions)', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          themes: {
+            Default: {
+              fonts: [],
+            },
+          },
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'var(--legacy-theme-variable)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toBeEmpty()
+  })
+})

package/src/rules/issues/style/unknownCSSVariable.ts

@@ -0,0 +1,101 @@
+import type { Rule } from '../../../types'
+
+const REGEX = /var\(\s*(--[\w-]+)/g
+
+export const unknownCSSVariableRule: Rule<{
+  name: string
+}> = {
+  code: 'unknown css variable',
+  level: 'warning',
+  category: 'Unknown Reference',
+  visit: (report, { path, value, nodeType, files, memo }) => {
+    if (
+      nodeType !== 'style-declaration' ||
+      typeof value.styleValue !== 'string'
+    ) {
+      return
+    }
+
+    const theme = files.themes?.Default
+    // Issue rule only available for projects using v2 themes
+    if (theme?.propertyDefinitions === undefined) {
+      return
+    }
+
+    // Has a style property definition
+    const vars = [...value.styleValue.toString().matchAll(REGEX)].map(
+      ([_, varName]) => varName,
+    )
+    if (vars.length === 0) {
+      return
+    }
+
+    const themeCssVariables = theme.propertyDefinitions
+    const [_fileType, componentName, _nodes, nodeName] = path
+    const localCssVariables = memo(
+      `component-css-variables-${componentName}-${nodeName}`,
+      () => {
+        const vars = new Set<string>()
+        const component = files.components[componentName]
+        if (!component) {
+          return vars
+        }
+
+        const visitVars = (nodeName: string) => {
+          const node = component?.nodes?.[nodeName]
+          if (!node) {
+            return
+          }
+
+          if (node.type === 'component' || node.type === 'element') {
+            Object.keys(node.customProperties ?? {}).forEach((varName) => {
+              vars.add(varName)
+            })
+            Object.values(node.variants ?? {}).forEach((variant) => {
+              Object.keys(variant.customProperties ?? {}).forEach((varName) => {
+                vars.add(varName)
+              })
+            })
+
+            // Also add legacy style variables
+            if (node.type === 'element' && node['style-variables']) {
+              node['style-variables'].forEach((styleVar) => {
+                vars.add(`--${styleVar.name}`)
+              })
+            }
+
+            // Add if declared in any parent styles object
+            Object.keys(node.style ?? {}).forEach((styleKey) => {
+              if (styleKey.startsWith('--')) {
+                vars.add(styleKey)
+              }
+            })
+            Object.values(node.variants ?? {}).forEach((variant) => {
+              Object.keys(variant.style ?? {}).forEach((styleKey) => {
+                if (styleKey.startsWith('--')) {
+                  vars.add(styleKey)
+                }
+              })
+            })
+          }
+
+          const parent = Object.entries(component.nodes ?? {}).find(([_, n]) =>
+            n.children?.includes(nodeName),
+          )
+          if (parent) {
+            visitVars(parent[0])
+          }
+        }
+
+        visitVars(nodeName.toString())
+        return vars
+      },
+    )
+
+    for (const varName of vars) {
+      if (!(varName in themeCssVariables) && !localCssVariables.has(varName)) {
+        report(path, { name: varName })
+      }
+    }
+  },
+}

package/src/rules/issues/workflows/duplicateWorkflowParameterRule.test.ts

@@ -101,6 +101,6 @@ describe('duplicateWorkflowParameterRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/workflows/noPostNavigateAction.test.ts

@@ -457,7 +457,7 @@ describe('find noPostNavigateAction', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })
 

package/src/rules/issues/workflows/unknownContextProviderWorkflowRule.test.ts

@@ -142,6 +142,6 @@ describe('unknownContextProviderWorkflowRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/workflows/unknownContextWorkflowRule.test.ts

@@ -88,6 +88,6 @@ describe('unknownContextWorkflowRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/workflows/unknownTriggerWorkflowParameterRule.test.ts

@@ -126,7 +126,7 @@ describe('unknownTriggerWorkflowParameterRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
   test('should detect unknown workflow parameters in context workflows', () => {
     const problems = Array.from(
@@ -300,7 +300,7 @@ describe('unknownTriggerWorkflowParameterRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
   test('should detect unknown workflow parameters in context workflows from packages', () => {
     const problems = Array.from(
@@ -480,6 +480,6 @@ describe('unknownTriggerWorkflowParameterRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/workflows/unknownTriggerWorkflowRule.test.ts

@@ -100,6 +100,6 @@ describe('unknownTriggerWorkflowRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/workflows/unknownWorkflowParameterRule.test.ts

@@ -111,6 +111,6 @@ describe('unknownWorkflowParameterRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/searchProject.ts

@@ -548,7 +548,13 @@ function* visitNode({
       for (const {
         path: formulaPath,
         formula,
+        packageName,
       } of component.formulasInComponent()) {
+        if (packageName && packageName !== 'root') {
+          // Skip reporting issues from inside package formulas
+          continue
+        }
+
         yield* visitNode({
           args: {
             nodeType: 'formula',
@@ -644,7 +650,13 @@ function* visitNode({
         for (const {
           path: formulaPath,
           formula: f,
+          packageName,
         } of formula.formulasInFormula()) {
+          if (packageName && packageName !== 'root') {
+            // Skip reporting issues from inside package formulas
+            continue
+          }
+
           yield* visitNode({
             args: {
               nodeType: 'formula',

package/src/types.d.ts

@@ -120,6 +120,7 @@ type Code =
   | 'unknown url parameter'
   | 'unknown variable setter'
   | 'unknown variable'
+  | 'unknown css variable'
   | 'unknown trigger workflow parameter'
   | 'unknown workflow parameter'