Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update website limitations from recent fixes and findings #1792

Merged
merged 2 commits into from
Feb 3, 2025
Merged

Update website limitations from recent fixes and findings #1792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7996802
Update website limitations from recent fixes and findings
kylorhall-atlassian Feb 3, 2025
da8e8e3
Merge branch 'master' into kylorhall/doc-fixes
kylorhall-atlassian Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 26 additions & 31 deletions website/packages/docs/src/pages/limitations.mdx
View file
Open in desktop
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
View file
Open in desktop
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).
Loading