Fix shorthand-property-sorting crashing when styles not initialised (#1765)

* Fix shorthand-property-sorting crashing when styles not initialised

* Add changeset

* Added changeset reminder

Author: dddlr

.changeset/purple-parrots-eat.md

@@ -0,0 +1,5 @@
+---
+'@compiled/eslint-plugin': patch
+---
+
+Fix shorthand-property-sorting crashing when variable in css prop is not initialised

.github/pull_request_template.md

@@ -20,3 +20,4 @@ I have...
 
 - [ ] Updated or added applicable tests
 - [ ] Updated the documentation in `website/`
+- [ ] Added a changeset (if making any changes that affect Compiled's behaviour)

packages/eslint-plugin/src/rules/shorthand-property-sorting/__tests__/rule.test.ts

@@ -286,6 +286,30 @@ tester.run('shorthand-property-sorting', shorthandFirst, {
         });
       `,
     },
+
+    //
+    // styles is not defined
+    //
+
+    {
+      // People really should not be doing this, so no point in handling this case.
+      //
+      // This test case is just to make sure the rule does not crash when it encounters
+      // this kind of edge case.
+      name: 'styles is not defined',
+      code: `
+        import { css, jsx } from '@compiled/react';
+
+        let styles;
+        const someCondition = true;
+        if (someCondition) {
+          styles = css({ top: 0 });
+        } else {
+          styles = css({ top: '2px' });
+        }
+        export const EmphasisText = ({ children }) => <span css={styles}>{children}</span>;
+      `,
+    },
   ]),
 
   invalid: includedImports.flatMap((imp) => [

packages/eslint-plugin/src/rules/shorthand-property-sorting/index.ts

@@ -85,7 +85,7 @@ const getVariableDefinition = (
     functionCall &&
     functionCall.defs.length &&
     functionCall.defs[0].node.type === 'VariableDeclarator' &&
-    functionCall.defs[0].node.init.type === 'CallExpression'
+    functionCall.defs[0].node.init?.type === 'CallExpression'
   ) {
     return functionCall.defs[0].node.init as CallExpression;
   }