@nordcraft/search 1.0.88 → 1.0.90

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

@@ -1,4 +1,6 @@
+import type { ProjectFiles } from '@nordcraft/ssr/dist/src/ssr.types'
 import { describe, expect, test } from 'bun:test'
+import { fixProject } from '../../../fixProject'
 import { searchProject } from '../../../searchProject'
 import { unknownCSSVariableRule } from './unknownCSSVariable'
 
@@ -171,7 +173,7 @@ describe('unknownCSSVariableRule', () => {
     expect(problems[1].details).toEqual({ name: '--undefined-local' })
   })
 
-  test('should not report when legacy style variables are used', () => {
+  test('should report problem if local variable is used in parent but only defined in child', () => {
     const problems = Array.from(
       searchProject({
         files: {
@@ -190,19 +192,26 @@ describe('unknownCSSVariableRule', () => {
                   tag: 'div',
                   type: 'element',
                   attrs: {},
-                  'style-variables': [
-                    {
-                      name: 'legacy-variable',
+                  style: {
+                    color: 'var(--child-only-variable)',
+                  },
+                  events: {},
+                  classes: {},
+                  children: ['child'],
+                },
+                child: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  customProperties: {
+                    '--child-only-variable': {
                       formula: {
                         type: 'value',
-                        value: '10px',
+                        value: 'red',
                       },
-                      category: 'spacing',
                     },
-                  ],
-                  style: {
-                    margin: 'var(--legacy-variable)',
                   },
+                  style: {},
                   events: {},
                   classes: {},
                   children: [],
@@ -219,10 +228,10 @@ describe('unknownCSSVariableRule', () => {
       }),
     )
 
-    expect(problems).toBeEmpty()
+    expect(problems).toHaveLength(1)
   })
 
-  test('should not report when declared in a style', () => {
+  test('should not report when legacy style variables are used', () => {
     const problems = Array.from(
       searchProject({
         files: {
@@ -241,9 +250,18 @@ describe('unknownCSSVariableRule', () => {
                   tag: 'div',
                   type: 'element',
                   attrs: {},
+                  'style-variables': [
+                    {
+                      name: 'legacy-variable',
+                      formula: {
+                        type: 'value',
+                        value: '10px',
+                      },
+                      category: 'spacing',
+                    },
+                  ],
                   style: {
-                    '--declared-in-style': '10px',
-                    margin: 'var(--declared-in-style)',
+                    margin: 'var(--legacy-variable)',
                   },
                   events: {},
                   classes: {},
@@ -264,13 +282,14 @@ describe('unknownCSSVariableRule', () => {
     expect(problems).toBeEmpty()
   })
 
-  test('should not report when a legacy theme exists (no propertyDefinitions)', () => {
+  test('should not report when declared in a style', () => {
     const problems = Array.from(
       searchProject({
         files: {
           themes: {
             Default: {
               fonts: [],
+              propertyDefinitions: {},
             },
           },
           formulas: {},
@@ -283,7 +302,8 @@ describe('unknownCSSVariableRule', () => {
                   type: 'element',
                   attrs: {},
                   style: {
-                    color: 'var(--legacy-theme-variable)',
+                    '--declared-in-style': '10px',
+                    margin: 'var(--declared-in-style)',
                   },
                   events: {},
                   classes: {},
@@ -304,32 +324,26 @@ describe('unknownCSSVariableRule', () => {
     expect(problems).toBeEmpty()
   })
 
-  test('should not report if CSS variable is defined in any other component or self', () => {
+  test('should not report when a legacy theme exists (no propertyDefinitions)', () => {
     const problems = Array.from(
       searchProject({
         files: {
           themes: {
             Default: {
               fonts: [],
-              propertyDefinitions: {},
             },
           },
           formulas: {},
           components: {
-            componentA: {
-              name: 'componentA',
+            test: {
+              name: 'test',
               nodes: {
                 root: {
                   tag: 'div',
                   type: 'element',
-                  customProperties: {
-                    '--variable-in-a': {
-                      formula: { type: 'value', value: 'red' },
-                    },
-                  },
                   attrs: {},
                   style: {
-                    color: 'var(--variable-in-a)',
+                    color: 'var(--legacy-theme-variable)',
                   },
                   events: {},
                   classes: {},
@@ -341,32 +355,81 @@ describe('unknownCSSVariableRule', () => {
               attributes: {},
               variables: {},
             },
-            componentB: {
-              name: 'componentB',
-              nodes: {
-                root: {
-                  tag: 'div',
-                  type: 'element',
-                  attrs: {},
-                  style: {
-                    color: 'var(--variable-in-a)',
-                  },
-                  events: {},
-                  classes: {},
-                  children: [],
-                },
+          },
+        },
+        rules: [unknownCSSVariableRule],
+      }),
+    )
+
+    expect(problems).toBeEmpty()
+  })
+
+  test('fix should add variable to theme', () => {
+    const files: ProjectFiles = {
+      themes: {
+        Default: {
+          fonts: [],
+          propertyDefinitions: {},
+        },
+      },
+      formulas: {},
+      components: {
+        test: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'div',
+              type: 'element',
+              attrs: {},
+              style: {
+                color: 'var(--new-theme-variable)',
               },
-              formulas: {},
-              apis: {},
-              attributes: {},
-              variables: {},
+              events: {},
+              classes: {},
+              children: [],
             },
           },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
         },
+      },
+    }
+    const problems = Array.from(
+      searchProject({
+        files,
         rules: [unknownCSSVariableRule],
       }),
     )
 
-    expect(problems).toBeEmpty()
+    expect(problems).toHaveLength(1)
+
+    const fixedProject = fixProject({
+      files,
+      rule: unknownCSSVariableRule,
+      fixType: 'add-to-theme',
+    })
+
+    expect(
+      Object.keys(fixedProject.themes?.Default.propertyDefinitions ?? {}),
+    ).toHaveLength(1)
+    expect(fixedProject.themes?.Default.propertyDefinitions).toHaveProperty(
+      '--new-theme-variable',
+    )
+    expect(
+      fixedProject.themes?.Default.propertyDefinitions?.[
+        '--new-theme-variable'
+      ],
+    ).toEqual({
+      syntax: {
+        type: 'primitive',
+        name: '*',
+      },
+      inherits: true,
+      initialValue: '',
+      values: {},
+      description: '',
+    })
   })
 })

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

@@ -1,10 +1,14 @@
-import type { Rule } from '../../../types'
+import type { CustomPropertyDefinition } from '@nordcraft/core/dist/styling/theme'
+import type { FixFunction, Rule, StyleNode } from '../../../types'
 
 const REGEX = /var\(\s*(--[\w-]+)/g
 
-export const unknownCSSVariableRule: Rule<{
-  name: string
-}> = {
+export const unknownCSSVariableRule: Rule<
+  {
+    name: string
+  },
+  StyleNode
+> = {
   code: 'unknown css variable',
   level: 'warning',
   category: 'Unknown Reference',
@@ -30,69 +34,120 @@ export const unknownCSSVariableRule: Rule<{
       return
     }
 
-    const allCssVariableDeclarations = memo(
-      `all-css-variables-declarations`,
+    const themeCssVariables = theme.propertyDefinitions
+    const [_fileType, componentName, _nodes, nodeName] = path
+    const localCssVariables = memo(
+      `component-css-variables-${componentName}-${nodeName}`,
       () => {
-        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
-            }
+        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) => {
-                cssVariableKeys.add(varName)
+          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)
               })
-              Object.values(node.variants ?? {}).forEach((variant) => {
-                Object.keys(variant.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}`)
               })
+            }
 
-              // Also add legacy style variables
-              if (node.type === 'element' && node['style-variables']) {
-                node['style-variables'].forEach((styleVar) => {
-                  cssVariableKeys.add(`--${styleVar.name}`)
-                })
+            // Add if declared in any parent styles object
+            Object.keys(node.style ?? {}).forEach((styleKey) => {
+              if (styleKey.startsWith('--')) {
+                vars.add(styleKey)
               }
-
-              // Add if declared in any parent styles object
-              Object.keys(node.style ?? {}).forEach((styleKey) => {
+            })
+            Object.values(node.variants ?? {}).forEach((variant) => {
+              Object.keys(variant.style ?? {}).forEach((styleKey) => {
                 if (styleKey.startsWith('--')) {
-                  cssVariableKeys.add(styleKey)
+                  vars.add(styleKey)
                 }
               })
-              Object.values(node.variants ?? {}).forEach((variant) => {
-                Object.keys(variant.style ?? {}).forEach((styleKey) => {
-                  if (styleKey.startsWith('--')) {
-                    cssVariableKeys.add(styleKey)
-                  }
-                })
-              })
-            }
-          })
-        })
-        return cssVariableKeys
+            })
+          }
+
+          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 (allCssVariableDeclarations.has(varName) === false) {
+      if (!(varName in themeCssVariables) && !localCssVariables.has(varName)) {
         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.`,
+            description: `The CSS variable **${varName}** is not declared in any parent element or theme. CSS variables must be declared in an ancestor element or in your global theme.`,
           },
           details: { name: varName },
+          fixes: ['add-to-theme'],
         })
       }
     }
   },
+  fixes: {
+    'add-to-theme': addToThemeFix,
+  },
+}
+
+export type AddToThemeFix = 'add-to-theme'
+
+function addToThemeFix(
+  args: Parameters<FixFunction<StyleNode, { name: string }>>[0],
+): ReturnType<FixFunction<StyleNode, { name: string }>> {
+  const varName = args.details?.name
+  if (typeof varName !== 'string' || !args.data.files.themes?.Default) {
+    return args.data.files
+  }
+
+  const definition: CustomPropertyDefinition = {
+    syntax: {
+      type: 'primitive',
+      name: '*',
+    },
+    inherits: true,
+    initialValue: '',
+    values: {},
+    description: '',
+  } as const
+
+  // Add the variable to the theme with Any (*) syntax type
+  return {
+    ...args.data.files,
+    themes: {
+      ...args.data.files.themes,
+      Default: {
+        ...args.data.files.themes.Default,
+        propertyDefinitions: {
+          ...args.data.files.themes.Default.propertyDefinitions,
+          [varName]: definition,
+        },
+      },
+    },
+  }
 }

package/src/searchProject.ts

@@ -210,6 +210,29 @@ export function* searchProject({
     state,
     fixOptions: fixOptions as any,
   })
+
+  if (files.packages) {
+    for (const key in files.packages) {
+      const pkg = files.packages[key]
+      if (pkg) {
+        yield* visitNode({
+          args: {
+            nodeType: 'project-package',
+            value: pkg,
+            packageName: key,
+            path: ['packages', key],
+            rules,
+            files,
+            pathsToVisit,
+            useExactPaths,
+            memo,
+          },
+          state,
+          fixOptions: fixOptions as any,
+        })
+      }
+    }
+  }
 }
 
 function visitNode(args: {
@@ -345,6 +368,7 @@ function* visitNode({
     case 'project-config':
     case 'project-theme':
     case 'project-theme-property':
+    case 'project-package':
     case 'style-declaration':
     case 'style-variable':
     case 'style-variant':

package/src/types.ts

@@ -27,6 +27,7 @@ import type { StyleVariant } from '@nordcraft/core/dist/styling/variantSelector'
 import type { Nullable, PluginAction } from '@nordcraft/core/dist/types'
 import type {
   ApiService,
+  InstalledPackage,
   ProjectFiles,
   Route,
   ToddleProject,
@@ -50,8 +51,10 @@ import type { NoReferenceComponentFormulaRuleFix } from './rules/issues/formulas
 import type { NoReferenceProjectFormulaRuleFix } from './rules/issues/formulas/noReferenceProjectFormulaRule'
 import type { NoStaticNodeConditionRuleFix } from './rules/issues/logic/noStaticNodeCondition'
 import type { NoReferenceNodeRuleFix } from './rules/issues/miscellaneous/noReferenceNodeRule'
+import type { NoReferenceProjectPackageRuleFix } from './rules/issues/miscellaneous/noReferencePackageRule'
 import type { InvalidStyleSyntaxRuleFix } from './rules/issues/style/invalidStyleSyntaxRule'
 import type { LegacyStyleVariableRuleFix } from './rules/issues/style/legacyStyleVariableRule'
+import type { AddToThemeFix } from './rules/issues/style/unknownCSSVariable'
 import type { NoReferenceVariableRuleFix } from './rules/issues/variables/noReferenceVariableRule'
 import type { NoPostNavigateActionRuleFix } from './rules/issues/workflows/noPostNavigateAction'
 
@@ -90,6 +93,7 @@ export type Code =
   | 'no-reference node'
   | 'no-reference project action'
   | 'no-reference project formula'
+  | 'no-reference project package'
   | 'no-reference variable'
   | 'no-static-node-condition'
   | 'no-unnecessary-condition-falsy'
@@ -375,6 +379,12 @@ export type ProjectConfigNode = {
   value: unknown
 } & Base
 
+export type ProjectPackageNode = {
+  nodeType: 'project-package'
+  value: InstalledPackage
+  packageName: string
+} & Base
+
 export type StyleVariantNode = {
   nodeType: 'style-variant'
   value: {
@@ -434,11 +444,13 @@ export type NodeType =
   | ProjectRoute
   | ProjectThemeNode
   | ProjectThemePropertyNode
+  | ProjectPackageNode
   | StyleNode
   | StyleVariableNode
   | StyleVariantNode
 
 export type FixType =
+  | AddToThemeFix
   | ChangeDataTypeFix
   | DeleteFetchInputFix
   | InvalidStyleSyntaxRuleFix
@@ -461,6 +473,7 @@ export type FixType =
   | UnknownActionEventRuleFix
   | UnknownApiServiceRuleFix
   | UnknownComponentAttributeRuleFix
+  | NoReferenceProjectPackageRuleFix
 
 interface ReportedIssueInfo {
   title: string