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.

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

Throw an error when compiling a cssMap object where we expect a css or nested cssMap object. #1774

Conversation

kylorhall-atlassian
Copy link
Collaborator

What is this change?

Fixes #1642

Example of code that silently fails today, using styles directly:

import { cssMap } from '@compiled/react';
const styles = cssMap({ root: { padding: 8 } });
export default () => <div css={styles} />;

What we expect to see instead, using styles.root instead:

import { cssMap } from '@compiled/react';
const styles = cssMap({ root: { padding: 8 } });
export default () => <div css={styles.root} />;

PR checklist

  • Updated or added applicable tests
  • Updated the documentation in website/ n/a
  • Added a changeset (if making any changes that affect Compiled's behaviour)

Sorry, something went wrong.

Copy link

changeset-bot bot commented Dec 23, 2024

🦋 Changeset detected

Latest commit: ded9265

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@compiled/babel-plugin Minor
@compiled/parcel-transformer Patch
@compiled/webpack-loader Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Dec 23, 2024

Deploy Preview for compiled-css-in-js canceled.

Name Link
🔨 Latest commit 83a41ed
🔍 Latest deploy log https://app.netlify.com/sites/compiled-css-in-js/deploys/6768db84bec71a0008f3be64

@kylorhall-atlassian
Copy link
Collaborator Author

Hitting an edge-case in the built tests, may circle back.

Unverified

This user has not yet uploaded their public signing key.
…s` or nested `cssMap` object.

Fixes #1642

Example of code that silently fails today, using `styles` directly:
```tsx
import { cssMap } from '@compiled/react';
const styles = cssMap({ root: { padding: 8 } });
export default () => <div css={styles} />;
```

What we expect to see instead, using `styles.root` instead:
```tsx
import { cssMap } from '@compiled/react';
const styles = cssMap({ root: { padding: 8 } });
export default () => <div css={styles.root} />;
```
@kylorhall-atlassian kylorhall-atlassian changed the base branch from master to kylorhall/fix-cssMap-define-before-use December 31, 2024 03:37

Unverified

This user has not yet uploaded their public signing key.
… called

 Also, just update the tests which muddy `cssMap` vs. `css` scope — technically a missed scenario, but one that we shouldn't hit as this throws an error if compiled in one go.
@kylorhall-atlassian kylorhall-atlassian force-pushed the kylorhall/error-when-using-cssMap-direct branch from 83a41ed to ded9265 Compare December 31, 2024 04:01
@kylorhall-atlassian kylorhall-atlassian marked this pull request as ready for review December 31, 2024 04:02
@kylorhall-atlassian kylorhall-atlassian merged commit 46c75db into kylorhall/fix-cssMap-define-before-use Dec 31, 2024
10 checks passed
@kylorhall-atlassian kylorhall-atlassian deleted the kylorhall/error-when-using-cssMap-direct branch December 31, 2024 04:07
kylorhall-atlassian added a commit that referenced this pull request Dec 31, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
…on in a few common edge-cases. (#1773)

* Fix `@compiled/babel-plugin` to not require `cssMap()` to be called prior to use.

Example: this code failed before for no reason other than the fact that our `state.cssMap` was generated _after_ `JSXElement` and `JSXOpeningElement` were ran.

```tsx
import { cssMap } from "@compiled/react";
export default () => <div css={styles.root} />;
const styles = cssMap({ root: { padding: 8 } });
```

* Attempt to resolve 'cssMap' calls when we hit a MemberExpression that does not have this defined.

* Throw an error when compiling a `cssMap` object where we expect a `css` or nested `cssMap` object. (#1774)

* Throw an error when compiling a `cssMap` object where we expect a `css` or nested `cssMap` object.

Fixes #1642

Example of code that silently fails today, using `styles` directly:
```tsx
import { cssMap } from '@compiled/react';
const styles = cssMap({ root: { padding: 8 } });
export default () => <div css={styles} />;
```

What we expect to see instead, using `styles.root` instead:
```tsx
import { cssMap } from '@compiled/react';
const styles = cssMap({ root: { padding: 8 } });
export default () => <div css={styles.root} />;
```

* Handle the scenario where we use `css={styles}` before `cssMap()` is called

 Also, just update the tests which muddy `cssMap` vs. `css` scope — technically a missed scenario, but one that we shouldn't hit as this throws an error if compiled in one go.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Types on css={…} don't block using the top-level object from cssMap()
1 participant