diff --git a/website/packages/docs/src/pages/limitations.mdx b/website/packages/docs/src/pages/limitations.mdx index 4ccd4f988..ad1b94ff0 100644 --- a/website/packages/docs/src/pages/limitations.mdx +++ b/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({
; ``` -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 =