@nordcraft/search 1.0.85 → 1.0.86

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

@@ -28,13 +28,24 @@ export const noStaticNodeCondition: Rule<{
     if (isStatic) {
       // - if truthy: "Condition is always true, you can safely remove the condition as it will always be rendered."
       // - if falsy: "Condition is always false, you can safely remove the entire node as it will never be rendered."
-      report(
+      report({
         path,
-        {
+        info: {
+          title:
+            Boolean(result) === true
+              ? `Unnecessary show/hide, value is always truthy`
+              : `Unnecessary show/hide, value is always falsy`,
+          description:
+            Boolean(result) === true
+              ? `Condition always evaluates to **show** the element. Consider removing the show/hide formula.`
+              : `Condition always evaluates to **hide** the element. Consider removing the element node.`,
+        },
+        details: {
           result,
         },
-        Boolean(result) === true ? ['remove-condition'] : ['remove-node'],
-      )
+        fixes:
+          Boolean(result) === true ? ['remove-condition'] : ['remove-node'],
+      })
     }
   },
   fixes: {

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

@@ -16,7 +16,14 @@ export const noUnnecessaryConditionFalsy: Rule = {
         return isStatic && Boolean(result) === false
       })
     ) {
-      report(path)
+      report({
+        path,
+        info: {
+          title: 'Unnecessary condition',
+          description:
+            '**And condition** is always falsy. Consider replacing it with a single *false* node.',
+        },
+      })
     }
   },
 }

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

@@ -21,7 +21,14 @@ export const noUnnecessaryConditionTruthy: Rule = {
         return isStatic && Boolean(result) === true
       })
     ) {
-      report(path)
+      report({
+        path,
+        info: {
+          title: 'Unnecessary condition',
+          description:
+            '**Or condition** is always truthy. Consider replacing it with a single *true* node.',
+        },
+      })
     }
   },
 }

package/src/rules/issues/miscellaneous/noReferenceNodeRule.ts

@@ -25,7 +25,15 @@ export const noReferenceNodeRule: Rule<{ node: string }> = {
     )
 
     if (nodeId !== 'root' && !referencedNodesInComponent.has(nodeId)) {
-      report(path, { node: nodeId }, ['delete-orphan-node'])
+      report({
+        path,
+        info: {
+          title: `Orphan node/element was found`,
+          description: `A node is declared, but it is not included in any other element, including the root element. This node can safely be removed.`,
+        },
+        details: { node: nodeId },
+        fixes: ['delete-orphan-node'],
+      })
     }
   },
   fixes: {

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

@@ -16,6 +16,13 @@ export const requireExtensionRule: Rule<{
     ) {
       return
     }
-    report(path)
+    report({
+      path,
+      info: {
+        title: 'Browser plugin recommended',
+        description:
+          '**Toddle browser plugin** is recommended for working with cookies. [Install extension](https://chromewebstore.google.com/detail/toddle/hfhgjncckomifajhndceigiaiojhlllp?hl=en)',
+      },
+    })
   },
 }

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

@@ -27,7 +27,14 @@ export const unknownCookieRule: Rule<{
     }
     const cookie = state.cookiesAvailable?.find((c) => c.name === formula.value)
     if (!cookie) {
-      report(path, { name: formula.value })
+      report({
+        path,
+        info: {
+          title: 'Unknown cookie',
+          description: `**${formula.value}** is not found in the browser extension cookies.`,
+        },
+        details: { name: formula.value },
+      })
     }
   },
 }

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

@@ -40,12 +40,24 @@ export const duplicateRouteRule: Rule<{
     })
     const match = allRoutes.get(getRouteKey(value.route?.path))
     if (match && match.length > 1) {
-      report([...path, 'route', 'path'], {
-        name: value.name,
-        type: 'page',
-        duplicates: match
-          .filter((m) => m !== value.name)
-          .map((name) => ({ name, type: 'page' })),
+      const duplicates = match
+        .filter((m) => m !== value.name)
+        .map((name) => ({ name, type: 'page' as const }))
+      report({
+        path: [...path, 'route', 'path'],
+        info: {
+          title: 'Duplicate route declaration',
+          description: `The page **${
+            value.name
+          }** has the same route/path declared as the pages/routes below. Route declarations must be unique.${duplicates
+            .map((d) => `\n- ${d.name} (${d.type})`)
+            .join('')}`,
+        },
+        details: {
+          name: value.name,
+          type: 'page',
+          duplicates,
+        },
       })
     }
   },

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

@@ -17,13 +17,27 @@ export const duplicateUrlParameterRule: Rule<{ name: string }> = {
     const pathNames = new Set<string>()
     value.route.path.forEach((p, i) => {
       if (pathNames.has(p.name)) {
-        report([...path, 'route', 'path', i], { name: p.name })
+        report({
+          path: [...path, 'route', 'path', i],
+          info: {
+            title: 'Duplicate URL parameter',
+            description: `**${p.name}** appears multiple times in the path/query parameters. This may lead to unexpected behavior. Consider consolidating them into a single parameter or renaming them.`,
+          },
+          details: { name: p.name },
+        })
       }
       pathNames.add(p.name)
     })
     Object.keys(value.route.query).forEach((key) => {
       if (pathNames.has(key)) {
-        report([...path, 'route', 'query', key], { name: key })
+        report({
+          path: [...path, 'route', 'query', key],
+          info: {
+            title: 'Duplicate URL parameter',
+            description: `**${key}** appears multiple times in the path/query parameters. This may lead to unexpected behavior. Consider consolidating them into a single parameter or renaming them.`,
+          },
+          details: { name: key },
+        })
       }
     })
   },

package/src/rules/issues/routing/unknownSetUrlParameterRule.ts

@@ -27,7 +27,14 @@ export const unknownSetUrlParameterRule: Rule<{
       )
     const parameterName = args.value.parameter
     if (!isValidParameter(parameterName)) {
-      report(args.path, { name: parameterName })
+      report({
+        path: args.path,
+        info: {
+          title: 'Unknown URL parameter update',
+          description: `**${parameterName}** does not exist as a path- or query-parameter and cannot be set/updated.`,
+        },
+        details: { name: parameterName },
+      })
     }
   },
 }

package/src/rules/issues/routing/unknownSetUrlParametersRule.ts

@@ -27,7 +27,14 @@ export const unknownSetUrlParametersRule: Rule<{
       )
     for (const key of Object.keys(args.value.parameters ?? {})) {
       if (!isValidParameter(key)) {
-        report([...args.path, 'parameters', key], { name: key })
+        report({
+          path: [...args.path, 'parameters', key],
+          info: {
+            title: 'Unknown URL parameter update',
+            description: `**${key}** does not exist as a path- or query-parameter and cannot be set/updated.`,
+          },
+          details: { name: key },
+        })
       }
     }
   },

package/src/rules/issues/routing/unknownUrlParameterRule.ts

@@ -22,7 +22,14 @@ export const unknownUrlParameterRule: Rule<{
       !component?.route?.query?.[parameterKey] &&
       !component?.route?.path?.some((p) => p.name === parameterKey)
     ) {
-      report(path, { name: parameterKey })
+      report({
+        path,
+        info: {
+          title: 'Unknown URL parameter',
+          description: `**${parameterKey}** does not exist as a path- or query-parameter. Using an unknown URL parameter will always return *Null*.`,
+        },
+        details: { name: parameterKey },
+      })
     }
   },
 }

package/src/rules/issues/slots/unknownComponentSlotRule.ts

@@ -43,7 +43,14 @@ export const unknownComponentSlotRule: Rule<{ slotName: string }> = {
       const usedSlot = childNode?.slot ?? 'default'
 
       if (!usableSlots.includes(usedSlot)) {
-        report([path[0], path[1], path[2], child], { slotName: usedSlot })
+        report({
+          path: [path[0], path[1], path[2], child],
+          info: {
+            title: 'Unknown component slot',
+            description: `**${usedSlot}** slot name does not exist as a slot on the parent component.`,
+          },
+          details: { slotName: usedSlot },
+        })
       }
     })
   },

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

@@ -24,7 +24,15 @@ export const invalidStyleSyntaxRule: Rule<{
       },
     )
     if (!valid) {
-      report(path, { property: value.styleProperty }, ['delete-style-property'])
+      report({
+        path,
+        info: {
+          title: `Invalid style declaration`,
+          description: `The style declaration for the property "${value.styleProperty}" is invalid. This can lead to unforeseen styling behavior across other elements. Please fix the style declaration or remove it.`,
+        },
+        details: { property: value.styleProperty },
+        fixes: ['delete-style-property'],
+      })
     }
   },
   fixes: {

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

@@ -29,9 +29,15 @@ export const legacyStyleVariableRule: Rule<
       return
     }
 
-    report(data.path, { name: data.value.styleVariable.name }, [
-      'replace-legacy-style-variable',
-    ])
+    report({
+      path: data.path,
+      info: {
+        title: `Legacy style variable`,
+        description: `Style variable **--${data.value.styleVariable.name}** can be replaced with the newer CSS variable system. Consider removing the style variable and create a new CSS variable with the same name.`,
+      },
+      details: { name: data.value.styleVariable.name },
+      fixes: ['replace-legacy-style-variable'],
+    })
   },
   fixes: {
     'replace-legacy-style-variable': replaceLegacyStyleVariable,

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

@@ -14,6 +14,12 @@ export const legacyThemeRule: Rule = {
       return
     }
 
-    report(data.path, undefined, [])
+    report({
+      path: data.path,
+      info: {
+        title: `Legacy theme`,
+        description: `You are using an older Nordcraft theme system. Migrate your theme to the newest version to enable multi-theme support and more.`,
+      },
+    })
   },
 }

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

@@ -99,6 +99,13 @@ export const noReferenceGlobalCSSVariableRule: Rule<{
     ) {
       return
     }
-    report(path, { name: value.key })
+    report({
+      path,
+      info: {
+        title: `Unused CSS variable`,
+        description: `**${value.key}** is never used in any style or other CSS variable. Consider removing it.`,
+      },
+      details: { name: value.key },
+    })
   },
 }

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

@@ -171,7 +171,7 @@ describe('unknownCSSVariableRule', () => {
     expect(problems[1].details).toEqual({ name: '--undefined-local' })
   })
 
-  test('should report problem if local variable is used in parent but only defined in child', () => {
+  test('should not report when legacy style variables are used', () => {
     const problems = Array.from(
       searchProject({
         files: {
@@ -190,26 +190,19 @@ describe('unknownCSSVariableRule', () => {
                   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': {
+                  'style-variables': [
+                    {
+                      name: 'legacy-variable',
                       formula: {
                         type: 'value',
-                        value: 'red',
+                        value: '10px',
                       },
+                      category: 'spacing',
                     },
+                  ],
+                  style: {
+                    margin: 'var(--legacy-variable)',
                   },
-                  style: {},
                   events: {},
                   classes: {},
                   children: [],
@@ -226,10 +219,10 @@ describe('unknownCSSVariableRule', () => {
       }),
     )
 
-    expect(problems).toHaveLength(1)
+    expect(problems).toBeEmpty()
   })
 
-  test('should not report when legacy style variables are used', () => {
+  test('should not report when declared in a style', () => {
     const problems = Array.from(
       searchProject({
         files: {
@@ -248,18 +241,9 @@ describe('unknownCSSVariableRule', () => {
                   tag: 'div',
                   type: 'element',
                   attrs: {},
-                  'style-variables': [
-                    {
-                      name: 'legacy-variable',
-                      formula: {
-                        type: 'value',
-                        value: '10px',
-                      },
-                      category: 'spacing',
-                    },
-                  ],
                   style: {
-                    margin: 'var(--legacy-variable)',
+                    '--declared-in-style': '10px',
+                    margin: 'var(--declared-in-style)',
                   },
                   events: {},
                   classes: {},
@@ -280,14 +264,13 @@ describe('unknownCSSVariableRule', () => {
     expect(problems).toBeEmpty()
   })
 
-  test('should not report when declared in a style', () => {
+  test('should not report when a legacy theme exists (no propertyDefinitions)', () => {
     const problems = Array.from(
       searchProject({
         files: {
           themes: {
             Default: {
               fonts: [],
-              propertyDefinitions: {},
             },
           },
           formulas: {},
@@ -300,8 +283,7 @@ describe('unknownCSSVariableRule', () => {
                   type: 'element',
                   attrs: {},
                   style: {
-                    '--declared-in-style': '10px',
-                    margin: 'var(--declared-in-style)',
+                    color: 'var(--legacy-theme-variable)',
                   },
                   events: {},
                   classes: {},
@@ -322,26 +304,52 @@ describe('unknownCSSVariableRule', () => {
     expect(problems).toBeEmpty()
   })
 
-  test('should not report when a legacy theme exists (no propertyDefinitions)', () => {
+  test('should not report if CSS variable is defined in any other component or self', () => {
     const problems = Array.from(
       searchProject({
         files: {
           themes: {
             Default: {
               fonts: [],
+              propertyDefinitions: {},
             },
           },
           formulas: {},
           components: {
-            test: {
-              name: 'test',
+            componentA: {
+              name: 'componentA',
               nodes: {
                 root: {
                   tag: 'div',
                   type: 'element',
+                  customProperties: {
+                    '--variable-in-a': {
+                      formula: { type: 'value', value: 'red' },
+                    },
+                  },
                   attrs: {},
                   style: {
-                    color: 'var(--legacy-theme-variable)',
+                    color: 'var(--variable-in-a)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+            componentB: {
+              name: 'componentB',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'var(--variable-in-a)',
                   },
                   events: {},
                   classes: {},

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

@@ -30,71 +30,68 @@ export const unknownCSSVariableRule: Rule<{
       return
     }
 
-    const themeCssVariables = theme.propertyDefinitions
-    const [_fileType, componentName, _nodes, nodeName] = path
-    const localCssVariables = memo(
-      `component-css-variables-${componentName}-${nodeName}`,
+    const allCssVariableDeclarations = memo(
+      `all-css-variables-declarations`,
       () => {
-        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
-          }
+        const cssVariableKeys = new Set(
+          Object.keys(theme.propertyDefinitions ?? {}),
+        )
+        Object.values(files.components ?? {}).forEach((component) => {
+          Object.keys(component?.nodes ?? {}).forEach((nodeKey) => {
+            const node = component?.nodes?.[nodeKey]
+            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)
+            if (node.type === 'component' || node.type === 'element') {
+              Object.keys(node.customProperties ?? {}).forEach((varName) => {
+                cssVariableKeys.add(varName)
               })
-            })
-
-            // Also add legacy style variables
-            if (node.type === 'element' && node['style-variables']) {
-              node['style-variables'].forEach((styleVar) => {
-                vars.add(`--${styleVar.name}`)
+              Object.values(node.variants ?? {}).forEach((variant) => {
+                Object.keys(variant.customProperties ?? {}).forEach(
+                  (varName) => {
+                    cssVariableKeys.add(varName)
+                  },
+                )
               })
-            }
 
-            // Add if declared in any parent styles object
-            Object.keys(node.style ?? {}).forEach((styleKey) => {
-              if (styleKey.startsWith('--')) {
-                vars.add(styleKey)
+              // Also add legacy style variables
+              if (node.type === 'element' && node['style-variables']) {
+                node['style-variables'].forEach((styleVar) => {
+                  cssVariableKeys.add(`--${styleVar.name}`)
+                })
               }
-            })
-            Object.values(node.variants ?? {}).forEach((variant) => {
-              Object.keys(variant.style ?? {}).forEach((styleKey) => {
+
+              // Add if declared in any parent styles object
+              Object.keys(node.style ?? {}).forEach((styleKey) => {
                 if (styleKey.startsWith('--')) {
-                  vars.add(styleKey)
+                  cssVariableKeys.add(styleKey)
                 }
               })
-            })
-          }
-
-          const parent = Object.entries(component.nodes ?? {}).find(([_, n]) =>
-            n.children?.includes(nodeName),
-          )
-          if (parent) {
-            visitVars(parent[0])
-          }
-        }
-
-        visitVars(nodeName.toString())
-        return vars
+              Object.values(node.variants ?? {}).forEach((variant) => {
+                Object.keys(variant.style ?? {}).forEach((styleKey) => {
+                  if (styleKey.startsWith('--')) {
+                    cssVariableKeys.add(styleKey)
+                  }
+                })
+              })
+            }
+          })
+        })
+        return cssVariableKeys
       },
     )
 
     for (const varName of vars) {
-      if (!(varName in themeCssVariables) && !localCssVariables.has(varName)) {
-        report(path, { name: varName })
+      if (allCssVariableDeclarations.has(varName) === false) {
+        report({
+          path,
+          info: {
+            title: `Unknown CSS variable`,
+            description: `The CSS variable **${varName}** is not declared in any parent element or in your theme. The CSS variable must be declared in an ancestor element in its component or in your global theme.`,
+          },
+          details: { name: varName },
+        })
       }
     }
   },

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

@@ -16,6 +16,13 @@ export const unknownClassnameRule: Rule<{
     ) {
       return
     }
-    report(path, { name: value.variant.className })
+    report({
+      path,
+      info: {
+        title: 'Unknown classname',
+        description: `**${value.variant.className}** is not defined. Using an unknown classname will have no effect.`,
+      },
+      details: { name: value.variant.className },
+    })
   },
 }

package/src/rules/issues/variables/noReferenceVariableRule.ts

@@ -32,7 +32,14 @@ export const noReferenceVariableRule: Rule<void> = {
       return
     }
 
-    report(path, undefined, ['delete-variable'])
+    report({
+      path,
+      info: {
+        title: 'Unused variable',
+        description: `**${variableKey}** is set but never used by any formula. Consider removing it.`,
+      },
+      fixes: ['delete-variable'],
+    })
   },
   fixes: {
     'delete-variable': removeFromPathFix,

package/src/rules/issues/variables/unknownVariableRule.ts

@@ -19,7 +19,14 @@ export const unknownVariableRule: Rule<{
     const [, variableKey] = value.path
     const component = files.components[componentName]
     if (!component?.variables?.[variableKey]) {
-      report(path, { name: variableKey })
+      report({
+        path,
+        info: {
+          title: 'Unknown variable',
+          description: `**${variableKey}** does not exist. Make sure to define it before usage.`,
+        },
+        details: { name: variableKey },
+      })
     }
   },
 }

package/src/rules/issues/variables/unknownVariableSetterRule.ts

@@ -14,7 +14,14 @@ export const unknownVariableSetterRule: Rule<{
     const [, componentName] = path
     const component = files.components[componentName]
     if (!component?.variables?.[value.variable]) {
-      report(path, { name: value.variable })
+      report({
+        path,
+        info: {
+          title: 'Unknown variable setter',
+          description: `**${value.variable}** does not exist. Make sure to define it before setting.`,
+        },
+        details: { name: value.variable },
+      })
     }
   },
 }