Update docs

Author: anubra266

README.md

@@ -87,6 +87,7 @@ Where rules are included in the configs `recommended`, or `all` it is indicated
 | [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md)                       |               |
 | [`@pandacss/no-important`](docs/rules/no-important.md)                                   |               |
 | [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md)               | ✔️            |
+| [`@pandacss/no-invalid-nesting`](docs/rules/no-invalid-nesting.md)                       | ✔️            |
 | [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md)                   | ✔️            |
 | [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md)           |               |
 | [`@pandacss/prefer-longhand-properties`](docs/rules/prefer-longhand-properties.md)       |               |

docs/rules/no-invalid-nesting.md

@@ -0,0 +1,90 @@
+[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
+
+# no-invalid-nesting
+
+Warn against invalid nesting. i.e. nested styles that don't contain the `&` character.
+
+📋 This rule is enabled in `plugin:@pandacss/all`.
+
+📋 This rule is enabled in `plugin:@pandacss/recommended`.
+
+## Rule details
+
+❌ Examples of **incorrect** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({
+  ':hover': { marginLeft: '4px' },
+});
+```
+```js
+
+import { css } from './panda/css';
+
+function App() {
+  return (
+    <div
+      className={css({
+        '.dark ': { background: 'red.100' },
+      })}
+    />
+  );
+};
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App() {
+  return (
+    <Circle
+      css={{
+        '[data-focus]': { position: 'absolute' },
+      }}
+    />
+  );
+}
+```
+
+✔️ Examples of **correct** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({
+  '&:hover': { marginLeft: '4px' },
+});
+```
+```js
+
+import { css } from './panda/css';
+
+function App() {
+  return (
+    <div
+      className={css({
+        '.dark &': { background: 'red.100' },
+      })}
+    />
+  );
+};
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App() {
+  return (
+    <Circle
+      css={{
+        '&[data-focus]': { position: 'absolute' },
+      }}
+    />
+  );
+}
+```
+
+## Resources
+
+* [Rule source](/plugin/src/rules/no-invalid-nesting.ts)
+* [Test source](/tests/no-invalid-nesting.test.ts)

plugin/tests/no-invalid-nesting.test.ts

@@ -8,24 +8,38 @@ const valids = [
     code: javascript`
 import { css } from './panda/css';
 
-const styles = css({ '&:hover': { marginLeft: '4px' } })`,
+const styles = css({
+  '&:hover': { marginLeft: '4px' },
+})`,
   },
 
   {
     code: javascript`
 import { css } from './panda/css';
 
-function App(){
-  return  <div className={css({ '.dark &': { background: 'red.100' } })} />;
+function App() {
+  return (
+    <div
+      className={css({
+        '.dark &': { background: 'red.100' },
+      })}
+    />
+  );
 }`,
   },
 
   {
     code: javascript`
 import { Circle } from './panda/jsx';
 
-function App(){
-  return  <Circle css={{ '&[data-focus]': { position: 'absolute' } }} />;
+function App() {
+  return (
+    <Circle
+      css={{
+        '&[data-focus]': { position: 'absolute' },
+      }}
+    />
+  );
 }`,
   },
 ]
@@ -35,24 +49,38 @@ const invalids = [
     code: javascript`
 import { css } from './panda/css';
 
-const styles = css({ ':hover': { marginLeft: '4px' } })`,
+const styles = css({
+  ':hover': { marginLeft: '4px' },
+})`,
   },
 
   {
     code: javascript`
 import { css } from './panda/css';
 
-function App(){
-  return  <div className={css({ '.dark ': { background: 'red.100' } })} />;
+function App() {
+  return (
+    <div
+      className={css({
+        '.dark ': { background: 'red.100' },
+      })}
+    />
+  );
 }`,
   },
 
   {
     code: javascript`
 import { Circle } from './panda/jsx';
 
-function App(){
-  return  <Circle css={{ '[data-focus]': { position: 'absolute' } }} />;
+function App() {
+  return (
+    <Circle
+      css={{
+        '[data-focus]': { position: 'absolute' },
+      }}
+    />
+  );
 }`,
   },
 ]