Skip to content

Commit

Permalink
Update website limitations from recent fixes and findings (#1792)
Browse files Browse the repository at this point in the history
  • Loading branch information
kylorhall-atlassian authored Feb 3, 2025
1 parent 393b72c commit 3e597b1
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 32 deletions.
57 changes: 26 additions & 31 deletions website/packages/docs/src/pages/limitations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion website/packages/docs/src/pages/migrating.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).

0 comments on commit 3e597b1

Please sign in to comment.