@nordcraft/search 1.0.78 → 1.0.80

package/src/rules/issues/style/styleRules.index.ts

@@ -1,9 +1,11 @@
 import { invalidStyleSyntaxRule } from './invalidStyleSyntaxRule'
 import { noReferenceGlobalCSSVariableRule } from './noReferenceGlobalCSSVariable'
 import { unknownClassnameRule } from './unknownClassnameRule'
+import { unknownCSSVariableRule } from './unknownCSSVariable'
 
 export default [
   invalidStyleSyntaxRule,
   unknownClassnameRule,
+  unknownCSSVariableRule,
   noReferenceGlobalCSSVariableRule,
 ]

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/noPostNavigateAction.ts

@@ -1,5 +1,5 @@
 import { get, set } from '@nordcraft/core/dist/utils/collections'
-import type { ActionModelNode, Rule } from '../../../types'
+import type { ActionModelNode, FixFunctionArgs, Rule } from '../../../types'
 
 export const noPostNavigateAction: Rule<{ parameter: string }> = {
   code: 'no post navigate action',
@@ -13,7 +13,7 @@ export const noPostNavigateAction: Rule<{ parameter: string }> = {
     ) {
       return
     }
-    const actionsArrayPath = path.slice(0, -1).map((p) => String(p))
+    const actionsArrayPath = path.slice(0, -1)
     const actions = get(files, actionsArrayPath)
     if (!Array.isArray(actions)) {
       return
@@ -29,8 +29,10 @@ export const noPostNavigateAction: Rule<{ parameter: string }> = {
     }
   },
   fixes: {
-    'delete-following-actions': ({ path, files }: ActionModelNode) => {
-      const actionsArrayPath = path.slice(0, -1).map((p) => String(p))
+    'delete-following-actions': ({
+      data: { path, files },
+    }: FixFunctionArgs<ActionModelNode>) => {
+      const actionsArrayPath = path.slice(0, -1)
       const actions = get(files, actionsArrayPath)
       const actionIndex = path.at(-1)
       if (actionIndex === undefined || !Array.isArray(actions)) {

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

@@ -284,8 +284,7 @@ function* visitNode({
               const ruleFixes = rule.fixes[fixOptions.fixType]?.(
                 // We must use the path from the report, not the original path
                 // because the report might be for a subpath
-                { ...data, path },
-                state,
+                { data: { ...data, path }, details, state },
               )
               if (ruleFixes) {
                 fixedFiles = ruleFixes

package/src/types.d.ts

@@ -34,6 +34,7 @@ import type { NoReferenceApiServiceRuleFix } from './rules/issues/apis/noReferen
 import type { UnknownApiServiceRuleFix } from './rules/issues/apis/unknownApiServiceRule'
 import type { NoReferenceAttributeRuleFix } from './rules/issues/attributes/noReferenceAttributeRule'
 import type { UnknownComponentAttributeRuleFix } from './rules/issues/attributes/unknownComponentAttributeRule'
+import type { ChangeDataTypeFix } from './rules/issues/components/invalidComponentStructureRule'
 import type { NoReferenceComponentRuleFix } from './rules/issues/components/noReferenceComponentRule'
 import type { NoReferenceEventRuleFix } from './rules/issues/events/noReferenceEventRule'
 import type { LegacyFormulaRuleFix } from './rules/issues/formulas/legacyFormulaRule'
@@ -57,6 +58,7 @@ type Code =
   | 'invalid api proxy cookie setting'
   | 'invalid element child'
   | 'invalid style syntax'
+  | 'invalid component structure'
   | 'legacy action'
   | 'legacy api'
   | 'legacy formula'
@@ -118,6 +120,7 @@ type Code =
   | 'unknown url parameter'
   | 'unknown variable setter'
   | 'unknown variable'
+  | 'unknown css variable'
   | 'unknown trigger workflow parameter'
   | 'unknown workflow parameter'
 
@@ -401,6 +404,7 @@ export type NodeType =
   | StyleVariantNode
 
 type FixType =
+  | ChangeDataTypeFix
   | InvalidStyleSyntaxRuleFix
   | LegacyActionRuleFix
   | LegacyFormulaRuleFix
@@ -433,7 +437,12 @@ export interface Rule<T = unknown, V = NodeType> {
   fixes?: Partial<Record<FixType, FixFunction>>
 }
 
-export type FixFunction<T extends NodeType> = (
-  data: T,
-  state?: ApplicationState,
+interface FixFunctionArgs<Data extends NodeType, Details = unknown> {
+  data: Data
+  details?: Details
+  state?: ApplicationState
+}
+
+export type FixFunction<Data extends NodeType, Details = unknown> = (
+  args: FixFunctionArgs<Data, Details>,
 ) => ProjectFiles | void

package/src/util/removeUnused.fix.ts

@@ -2,13 +2,14 @@ import type { NodeModel } from '@nordcraft/core/dist/component/component.types'
 import { get, omit, set } from '@nordcraft/core/dist/utils/collections'
 import type { FixFunction, NodeType } from '../types'
 
-export const removeFromPathFix: FixFunction<NodeType> = ({ path, files }) =>
-  omit(files, path)
+export const removeFromPathFix: FixFunction<NodeType> = ({
+  data: { path, files },
+}) => omit(files, path)
 
 /**
  * Same as removeFromPathFix, but also cleans up any references to the removed node.
  */
-export const removeNodeFromPathFix: FixFunction<NodeType> = (data) => {
+export const removeNodeFromPathFix: FixFunction<NodeType> = ({ data }) => {
   const nodeId = String(data.path[data.path.length - 1])
   const componentNodesPath = data.path.slice(0, -1).map(String)
   const nodes = structuredClone(get(data.files, componentNodesPath)) as Record<