Update website limitations from recent fixes and findings (#1792)

Author: kylorhall-atlassian

website/packages/docs/src/pages/limitations.mdx

@@ -6,9 +6,9 @@ section: 50-Guides
 
 The architecture or design of Compiled prevents some things that are possible with runtime libraries. There are also some features we would like to add to Compiled in the future that we have not yet.
 
-## Runtime styles
+## Dynamic selectors
 
-Styles can't be created at runtime which includes dynamic selectors as well.
+Styles with dynamic selectors can't be created (at runtime or extraction) and may result in missing styles. If the variable is a local static value instead it should work!
 
 ```jsx
 /** @jsxImportSource @compiled/react */
@@ -25,45 +25,40 @@ const styles = css({
 <div css={styles} />;
 ```
 
-If a dynamic value resolves to a static constant value however, it will work!
+## Mixing dynamic styles and indirect selectors
 
-## Overlapping styles, caused by media queries and other at-rules
-
-Media queries and other at-rules are sorted deterministically when stylesheet extraction is turned on. See [this page](/media-queries-and-other-at-rules) for more details of how the sorting works and what its limitations are.
+You cannot mix dynamic styles and indirect selectors (eg. `div + label` or `div ~ label`) as the dynamic value will not be applied to the indirect selector.
 
-## Unsupported features
-
-Below is a non-exhaustive list of features that Compiled does not support. Some are features we would like to add to Compiled at some point in the future, while others are features that we don't plan to implement.
-
-### Ternary operators
-
-There is a bug where ternary operators in the `css` prop won't work:
-
-```tsx
-/** @jsxImportSource @compiled/react */
-import { css } from '@compiled/react';
+Example, this will result in `label` not having the inline `props.margin` applied as it will not have access to the CSS variable we inject:
 
-const styles = css({ color: 'blue' });
-const otherStyles = css({ color: 'red' });
+```jsx
+export default (props) => {
+  const styles = css({
+    '& + label': {
+      margin: `8px ${props.margin}`,
+    },
+  });
 
-// build-time error
-const Component = <div css={isPrimary ? styles : otherStyles}>Hello</div>;
+  return (
+    <div>
+      <span css={styles}>Hello</span>
+      <label>world</label>
+    </div>
+  );
+};
 ```
 
-A workaround is to use the `&&` operator, which is supported:
+Additionally, this currently happens with certain non-dynamic styles in a typical babel setup for certain target outputs, but this may be less common.
 
-```tsx
-/** @jsxImportSource @compiled/react */
-import { css } from '@compiled/react';
+For more details, refer to the [Github Issue](https://github.com/atlassian-labs/compiled/issues/1789).
 
-const styles = css({ color: 'blue' });
-const otherStyles = css({ color: 'red' });
+## Overlapping styles, caused by media queries and other at-rules
 
-// build-time error
-const Component = <div css={[isPrimary && styles, !isPrimary && otherStyles]}>Hello</div>;
-```
+Media queries and other at-rules are sorted deterministically when stylesheet extraction is turned on. See [this page](/media-queries-and-other-at-rules) for more details of how the sorting works and what its limitations are.
 
-There is a [bug report on GitHub](https://github.com/atlassian-labs/compiled/issues/389) if you would like to stay updated.
+## Unsupported features
+
+Below is a non-exhaustive list of features that Compiled does not support. Some are features we would like to add to Compiled at some point in the future, while others are features that we don't plan to implement.
 
 ### Theming
 

website/packages/docs/src/pages/migrating.mdx

@@ -53,4 +53,4 @@ There exists a [codemod](/pkg-codemods#emotion-to-compiled) to streamline this.
 
 For features that aren't available due to the compile-time nature of the library, read our [limitations](/limitations).
 
-For Emotion-specific issues you may run into, see [Migrating from Emotion](/migrating-from-emotion).
+For Emotion-specific issues you may run into, see [Migrating from Emotion](/issues-with-emotion).