@nordcraft/search 1.0.87 → 1.0.88

package/dist/rules/issues/style/invalidStyleSyntaxRule.js

@@ -8,6 +8,22 @@ export const invalidStyleSyntaxRule = {
         if (nodeType !== 'style-declaration') {
             return;
         }
+        // Check for variable/formula references: Variables., Formulas., Event., Attributes., Apis., Parameters., ListItem., URLParameters.
+        if (typeof value.styleValue === 'string') {
+            const hasVariableReference = /\b(Variables|Formulas|Event|Attributes|Apis|Parameters|ListItem|URLParameters)\.\w+/i.test(value.styleValue);
+            if (hasVariableReference) {
+                report({
+                    path,
+                    info: {
+                        title: `Formulas detected in style declaration`,
+                        description: `The style declaration for the property "${value.styleProperty}" contains Nordcraft formula syntax (e.g., references like "Variables.xxx", "Event.xxx", "Attributes.xxx", etc.). Formulas should not be used directly in CSS style values. Use style-variables or computed styles instead.`,
+                    },
+                    details: { property: value.styleProperty },
+                    fixes: ['delete-style-property'],
+                });
+                return;
+            }
+        }
         const valid = memo(`valid-style-${value.styleProperty}:${value.styleValue}`, () => {
             try {
                 parse(`${value.styleProperty}: ${value.styleValue}`);

package/dist/rules/issues/style/invalidStyleSyntaxRule.js.map

@@ -1 +1 @@
-{"version":3,"file":"invalidStyleSyntaxRule.js","sourceRoot":"","sources":["../../../../src/rules/issues/style/invalidStyleSyntaxRule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,MAAM,CAAC,MAAM,sBAAsB,GAE9B;IACH,IAAI,EAAE,sBAAsB;IAC5B,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;QAClD,IAAI,QAAQ,KAAK,mBAAmB,EAAE,CAAC;YACrC,OAAM;QACR,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAChB,eAAe,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,UAAU,EAAE,EACxD,GAAG,EAAE,CAAC;YACJ,IAAI,CAAC;gBACH,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC,CAAA;gBACpD,OAAO,IAAI,CAAA;YACb,CAAC;YAAC,MAAM,CAAC;gBACP,OAAO,KAAK,CAAA;YACd,CAAC;QAAA,CACF,CACF,CAAA;QACD,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,MAAM,CAAC;gBACL,IAAI;gBACJ,IAAI,EAAE;oBACJ,KAAK,EAAE,2BAA2B;oBAClC,WAAW,EAAE,2CAA2C,KAAK,CAAC,aAAa,kIAAkI;iBAC9M;gBACD,OAAO,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE;gBAC1C,KAAK,EAAE,CAAC,uBAAuB,CAAC;aACjC,CAAC,CAAA;QACJ,CAAC;IAAA,CACF;IACD,KAAK,EAAE;QACL,uBAAuB,EAAE,iBAAiB;KAC3C;CACF,CAAA"}
+{"version":3,"file":"invalidStyleSyntaxRule.js","sourceRoot":"","sources":["../../../../src/rules/issues/style/invalidStyleSyntaxRule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,MAAM,CAAC,MAAM,sBAAsB,GAE9B;IACH,IAAI,EAAE,sBAAsB;IAC5B,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;QAClD,IAAI,QAAQ,KAAK,mBAAmB,EAAE,CAAC;YACrC,OAAM;QACR,CAAC;QAED,mIAAmI;QACnI,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACzC,MAAM,oBAAoB,GACxB,sFAAsF,CAAC,IAAI,CACzF,KAAK,CAAC,UAAU,CACjB,CAAA;YACH,IAAI,oBAAoB,EAAE,CAAC;gBACzB,MAAM,CAAC;oBACL,IAAI;oBACJ,IAAI,EAAE;wBACJ,KAAK,EAAE,wCAAwC;wBAC/C,WAAW,EAAE,2CAA2C,KAAK,CAAC,aAAa,6NAA6N;qBACzS;oBACD,OAAO,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE;oBAC1C,KAAK,EAAE,CAAC,uBAAuB,CAAC;iBACjC,CAAC,CAAA;gBACF,OAAM;YACR,CAAC;QACH,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAChB,eAAe,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,UAAU,EAAE,EACxD,GAAG,EAAE,CAAC;YACJ,IAAI,CAAC;gBACH,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC,CAAA;gBACpD,OAAO,IAAI,CAAA;YACb,CAAC;YAAC,MAAM,CAAC;gBACP,OAAO,KAAK,CAAA;YACd,CAAC;QAAA,CACF,CACF,CAAA;QACD,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,MAAM,CAAC;gBACL,IAAI;gBACJ,IAAI,EAAE;oBACJ,KAAK,EAAE,2BAA2B;oBAClC,WAAW,EAAE,2CAA2C,KAAK,CAAC,aAAa,kIAAkI;iBAC9M;gBACD,OAAO,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE;gBAC1C,KAAK,EAAE,CAAC,uBAAuB,CAAC;aACjC,CAAC,CAAA;QACJ,CAAC;IAAA,CACF;IACD,KAAK,EAAE;QACL,uBAAuB,EAAE,iBAAiB;KAC3C;CACF,CAAA"}

package/package.json

@@ -10,8 +10,8 @@
 "directory": "packages/search"
 },
 "dependencies": {
-"@nordcraft/ssr": "1.0.87",
-"@nordcraft/core": "1.0.87",
+"@nordcraft/ssr": "1.0.88",
+"@nordcraft/core": "1.0.88",
 "jsondiffpatch": "0.7.3",
 "postcss": "8.5.6",
 "zod": "4.2.1"
@@ -26,5 +26,5 @@
 "test:watch:only": "bun test --watch --only"
 },
 "files": ["dist", "src"],
-"version": "1.0.87"
+"version": "1.0.88"
 }

package/src/rules/issues/actions/unknownActionEventRule.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable inclusive-language/use-inclusive-words */
 import type { CustomActionModel } from '@nordcraft/core/dist/component/component.types'
 import { describe, expect, test } from 'bun:test'
 import { fixProject } from '../../../fixProject'

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

@@ -42,7 +42,6 @@ describe('find noReferenceEventRule', () => {
               events: [
                 {
                   name: 'unused-event',
-                  // eslint-disable-next-line inclusive-language/use-inclusive-words
                   dummyEvent: {
                     name: 'Name',
                   },
@@ -120,7 +119,6 @@ describe('find noReferenceEventRule', () => {
               events: [
                 {
                   name: 'known-event',
-                  // eslint-disable-next-line inclusive-language/use-inclusive-words
                   dummyEvent: {
                     name: 'Name',
                   },
@@ -130,7 +128,6 @@ describe('find noReferenceEventRule', () => {
                 },
                 {
                   name: 'used-event',
-                  // eslint-disable-next-line inclusive-language/use-inclusive-words
                   dummyEvent: {
                     name: 'Name',
                   },
@@ -184,7 +181,6 @@ describe('fix noReferenceEventRule', () => {
           events: [
             {
               name: 'unused-event',
-              // eslint-disable-next-line inclusive-language/use-inclusive-words
               dummyEvent: {
                 name: 'Name',
               },

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

@@ -66,7 +66,6 @@ describe('unknownEvent', () => {
               events: [
                 {
                   name: 'known-event',
-                  // eslint-disable-next-line inclusive-language/use-inclusive-words
                   dummyEvent: {
                     name: 'Name',
                   },
@@ -94,7 +93,6 @@ describe('unknownEvent', () => {
                   events: [
                     {
                       name: 'known-event',
-                      // eslint-disable-next-line inclusive-language/use-inclusive-words
                       dummyEvent: {
                         name: 'Name',
                       },
@@ -187,7 +185,6 @@ describe('unknownEvent', () => {
               events: [
                 {
                   name: 'known-event',
-                  // eslint-disable-next-line inclusive-language/use-inclusive-words
                   dummyEvent: {
                     name: 'Name',
                   },
@@ -215,7 +212,6 @@ describe('unknownEvent', () => {
                   events: [
                     {
                       name: 'known-event',
-                      // eslint-disable-next-line inclusive-language/use-inclusive-words
                       dummyEvent: {
                         name: 'Name',
                       },

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

@@ -40,7 +40,6 @@ describe('unknownTriggerEventRule', () => {
               events: [
                 {
                   name: 'known-event',
-                  // eslint-disable-next-line inclusive-language/use-inclusive-words
                   dummyEvent: {
                     name: 'Name',
                   },
@@ -97,7 +96,6 @@ describe('unknownTriggerEventRule', () => {
               events: [
                 {
                   name: 'known-event',
-                  // eslint-disable-next-line inclusive-language/use-inclusive-words
                   dummyEvent: {
                     name: 'Name',
                   },

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

@@ -203,6 +203,298 @@ describe('find invalidStyleSyntaxRule', () => {
   })
 })
 
+describe('find formulas in style syntax', () => {
+  test('should find Variables. references in style syntax', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    transform: 'translateX(Variables.offsetX)',
+                    width: '100px',
+                    height: 'Variables.height',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toMatchObject([
+      {
+        code: 'invalid style syntax',
+        path: ['components', 'test', 'nodes', 'root', 'style', 'transform'],
+        details: { property: 'transform' },
+      },
+      {
+        code: 'invalid style syntax',
+        path: ['components', 'test', 'nodes', 'root', 'style', 'height'],
+        details: { property: 'height' },
+      },
+    ])
+  })
+
+  test('should find Formulas., Event., Attributes., Apis., Parameters., ListItem., URLParameters. references', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    color: 'Formulas.getColor()',
+                    top: 'Event.clientY',
+                    margin: 'Attributes.margin',
+                    background: 'Apis.getBackground()',
+                    fontSize: 'Parameters.size',
+                    backgroundColor: 'ListItem.color',
+                    width: 'URLParameters.width',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(7)
+    expect(problems.map((p) => p.details.property)).toEqual([
+      'color',
+      'top',
+      'margin',
+      'background',
+      'fontSize',
+      'backgroundColor',
+      'width',
+    ])
+  })
+
+  test('should not find formulas in valid CSS values', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    width: '100px',
+                    height: '50%',
+                    color: '#ffffff',
+                    backgroundColor: 'var(--my-var)',
+                    transform: 'translateX(10px)',
+                    margin: '10px 20px',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+
+  test('should not find formulas in numeric style values', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    opacity: 0.5,
+                    zIndex: 10,
+                    flex: 1,
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+
+  test('should find formulas in variant styles', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    width: '100px',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                  variants: [
+                    {
+                      style: {
+                        transform: 'translateX(Variables.offsetX)',
+                        color: 'Event.color',
+                      },
+                      hover: true,
+                    },
+                  ],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toMatchObject([
+      {
+        code: 'invalid style syntax',
+        path: [
+          'components',
+          'test',
+          'nodes',
+          'root',
+          'variants',
+          0,
+          'style',
+          'transform',
+        ],
+        details: { property: 'transform' },
+      },
+      {
+        code: 'invalid style syntax',
+        path: [
+          'components',
+          'test',
+          'nodes',
+          'root',
+          'variants',
+          0,
+          'style',
+          'color',
+        ],
+        details: { property: 'color' },
+      },
+    ])
+  })
+
+  test('should handle case-insensitive matching for formulas', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  tag: 'div',
+                  type: 'element',
+                  attrs: {},
+                  style: {
+                    width: 'VARIABLES.offsetX',
+                    height: 'variables.height',
+                    color: 'FORMULAS.getColor()',
+                  },
+                  events: {},
+                  classes: {},
+                  children: [],
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [invalidStyleSyntaxRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(3)
+    expect(problems.map((p) => p.details.property)).toEqual([
+      'width',
+      'height',
+      'color',
+    ])
+  })
+})
+
 describe('fix invalidStyleSyntaxRule', () => {
   test('should remove an invalid style property', () => {
     const files: ProjectFiles = {
@@ -248,6 +540,49 @@ describe('fix invalidStyleSyntaxRule', () => {
       }
     `)
   })
+  test('should remove a style property with formula syntax', () => {
+    const files: ProjectFiles = {
+      formulas: {},
+      components: {
+        test: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'div',
+              type: 'element',
+              attrs: {},
+              style: {
+                width: '100px',
+                transform: 'translateX(Variables.offsetX)',
+                height: '50px',
+                color: 'Variables.color',
+              },
+              events: {},
+              classes: {},
+              children: [],
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedFiles = fixProject({
+      files,
+      rule: invalidStyleSyntaxRule,
+      fixType: 'delete-style-property',
+    })
+    expect((fixedFiles.components.test!.nodes?.root as ElementNodeModel).style)
+      .toMatchInlineSnapshot(`
+      {
+        "height": "50px",
+        "width": "100px",
+      }
+    `)
+  })
+
   test('should remove an invalid style variant style property', () => {
     const files: ProjectFiles = {
       formulas: {},
@@ -300,4 +635,55 @@ describe('fix invalidStyleSyntaxRule', () => {
       }
     `)
   })
+
+  test('should remove a variant style property with formula syntax', () => {
+    const files: ProjectFiles = {
+      formulas: {},
+      components: {
+        test: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'div',
+              type: 'element',
+              attrs: {},
+              style: {},
+              events: {},
+              classes: {},
+              children: [],
+              variants: [
+                {
+                  style: {
+                    width: '100px',
+                    transform: 'translateX(Variables.offsetX)',
+                    height: '50px',
+                    color: 'Event.color',
+                  },
+                  hover: true,
+                },
+              ],
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedFiles = fixProject({
+      files,
+      rule: invalidStyleSyntaxRule,
+      fixType: 'delete-style-property',
+    })
+    expect(
+      (fixedFiles.components.test!.nodes?.root as ElementNodeModel)
+        .variants?.[0].style,
+    ).toMatchInlineSnapshot(`
+      {
+        "height": "50px",
+        "width": "100px",
+      }
+    `)
+  })
 })

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

@@ -12,6 +12,27 @@ export const invalidStyleSyntaxRule: Rule<{
     if (nodeType !== 'style-declaration') {
       return
     }
+
+    // Check for variable/formula references: Variables., Formulas., Event., Attributes., Apis., Parameters., ListItem., URLParameters.
+    if (typeof value.styleValue === 'string') {
+      const hasVariableReference =
+        /\b(Variables|Formulas|Event|Attributes|Apis|Parameters|ListItem|URLParameters)\.\w+/i.test(
+          value.styleValue,
+        )
+      if (hasVariableReference) {
+        report({
+          path,
+          info: {
+            title: `Formulas detected in style declaration`,
+            description: `The style declaration for the property "${value.styleProperty}" contains Nordcraft formula syntax (e.g., references like "Variables.xxx", "Event.xxx", "Attributes.xxx", etc.). Formulas should not be used directly in CSS style values. Use style-variables or computed styles instead.`,
+          },
+          details: { property: value.styleProperty },
+          fixes: ['delete-style-property'],
+        })
+        return
+      }
+    }
+
     const valid = memo(
       `valid-style-${value.styleProperty}:${value.styleValue}`,
       () => {