@nordcraft/search 1.0.79 → 1.0.80

package/src/rules/issues/events/duplicateEventTriggerRule.test.ts

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

package/src/rules/issues/formulas/duplicateFormulaArgumentNameRule.test.ts

@@ -106,7 +106,7 @@ describe('duplicateFormulaArgumentNameRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 
   test('should detect multiple duplicates', () => {
@@ -175,6 +175,6 @@ describe('duplicateFormulaArgumentNameRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/formulas/noReferenceProjectFormulaRule.test.ts

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

package/src/rules/issues/formulas/unknownComponentFormulaInputRule.test.ts

@@ -89,7 +89,7 @@ describe('unknownComponentFormulaInput', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
   test('should not detect @toddle.parent/item path formulas', () => {
     const problems = Array.from(
@@ -136,6 +136,6 @@ describe('unknownComponentFormulaInput', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/formulas/unknownProjectFormulaInputRule.test.ts

@@ -70,7 +70,7 @@ describe('unknownProjectFormulaInput', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
   test('should not detect @toddle.parent/item path formulas', () => {
     const problems = Array.from(
@@ -107,6 +107,6 @@ describe('unknownProjectFormulaInput', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

package/src/rules/issues/formulas/unknownProjectFormulaRule.test.ts

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

package/src/rules/issues/formulas/unknownRepeatIndexFormulaRule.test.ts

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

package/src/rules/issues/formulas/unknownRepeatItemFormulaRule.test.ts

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

package/src/rules/issues/logic/noStaticNodeCondition.test.ts

@@ -127,7 +127,7 @@ describe('noStaticNodeCondition', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 
   test('should fix static truthy condition by removing the condition', () => {

package/src/rules/issues/logic/noUnnecessaryConditionFalsy.test.ts

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

package/src/rules/issues/logic/noUnnecessaryConditionTruthy.test.ts

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

package/src/rules/issues/miscellaneous/requireExtensionRule.test.ts

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

package/src/rules/issues/miscellaneous/unknownCookieRule.test.ts

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

package/src/rules/issues/routing/duplicateRouteRule.test.ts

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

package/src/rules/issues/routing/duplicateUrlParameterRule.test.ts

@@ -130,6 +130,6 @@ describe('duplicateUrlParameterRule', () => {
         rules: [duplicateUrlParameterRule],
       }),
     )
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 })

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

@@ -57,7 +57,7 @@ describe('noReferenceGlobalCSSVariableRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(0)
+    expect(problems).toBeEmpty()
   })
 
   test('should report global CSS variables that are never used', () => {
@@ -243,4 +243,62 @@ describe('noReferenceGlobalCSSVariableRule', () => {
     expect(problems[0].details).toEqual({ name: '--local-color' })
     expect(problems[1].details).toEqual({ name: '--a-third-local-color' })
   })
+
+  test('should not report when variable is used in package components', () => {
+    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: {},
+                },
+              },
+            },
+          },
+          formulas: {},
+          components: {},
+          packages: [
+            {
+              manifest: {
+                name: 'Test Package',
+                commit: '',
+              },
+              components: {
+                PackageComponent: {
+                  name: 'PackageComponent',
+                  nodes: {
+                    root: {
+                      tag: 'div',
+                      type: 'element',
+                      attrs: {},
+                      style: {
+                        color: 'var(--global-color)',
+                      },
+                      events: {},
+                      classes: {},
+                      children: [],
+                    },
+                  },
+                  formulas: {},
+                  apis: {},
+                  attributes: {},
+                  variables: {},
+                },
+              },
+            },
+          ] as any,
+        },
+        rules: [noReferenceGlobalCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toBeEmpty()
+  })
 })

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

@@ -28,12 +28,11 @@ export const noReferenceGlobalCSSVariableRule: Rule<{
               ;[{ style: node.style }, ...(node.variants ?? [])].forEach(
                 ({ style }) => {
                   Object.values(style ?? {}).forEach((styleValue) => {
-                    if (typeof styleValue !== 'string') {
-                      return
+                    if (typeof styleValue === 'string') {
+                      styleValue.matchAll(REGEX).forEach(([_, varName]) => {
+                        vars.add(varName)
+                      })
                     }
-                    styleValue.matchAll(REGEX).forEach(([_, varName]) => {
-                      vars.add(varName)
-                    })
                   })
                 },
               )
@@ -45,6 +44,34 @@ export const noReferenceGlobalCSSVariableRule: Rule<{
       },
     )
 
+    const usedCSSVariablesInPackageComponents = memo(
+      'css-variables-used-in-package-components',
+      () => {
+        const vars = new Set<string>()
+        Object.values(files.packages ?? {}).forEach((pkg) => {
+          Object.values(pkg?.components ?? {}).forEach((component) => {
+            Object.values(component?.nodes ?? {}).forEach((node) => {
+              if (node.type === 'element' || node.type === 'component') {
+                ;[{ style: node.style }, ...(node.variants ?? [])].forEach(
+                  ({ style }) => {
+                    Object.values(style ?? {}).forEach((styleValue) => {
+                      if (typeof styleValue === 'string') {
+                        styleValue.matchAll(REGEX).forEach(([_, varName]) => {
+                          vars.add(varName)
+                        })
+                      }
+                    })
+                  },
+                )
+              }
+            })
+          })
+        })
+
+        return vars
+      },
+    )
+
     const usedCSSVariablesInCSSVariables = memo(
       'css-variables-used-in-css-variables',
       () => {
@@ -52,13 +79,11 @@ export const noReferenceGlobalCSSVariableRule: Rule<{
         Object.values(theme.propertyDefinitions ?? {}).forEach((propDef) => {
           ;[...Object.values(propDef.values), propDef.initialValue].forEach(
             (val) => {
-              if (typeof val !== 'string') {
-                return
+              if (typeof val === 'string') {
+                val.matchAll(REGEX).forEach(([_, varName]) => {
+                  vars.add(varName)
+                })
               }
-
-              val.matchAll(REGEX).forEach(([_, varName]) => {
-                vars.add(varName)
-              })
             },
           )
         })
@@ -69,7 +94,8 @@ export const noReferenceGlobalCSSVariableRule: Rule<{
 
     if (
       usedCSSVariablesInCSSVariables.has(value.key) ||
-      usedCSSVariablesInComponents.has(value.key)
+      usedCSSVariablesInComponents.has(value.key) ||
+      usedCSSVariablesInPackageComponents.has(value.key)
     ) {
       return
     }

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()
+  })
+})