atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.99k stars 67 forks source link

Add `ignoreIfImported` and `excludeReactComponents` options to `no-css-prop-without-css-function` ESLint rule #1560

Closed dddlr closed 11 months ago

dddlr commented 11 months ago

There are some edge cases that no-css-prop-without-css-function didn't handle well when used in a repository with both Emotion and Compiled. This PR provides some more configuration options that get around these edge cases:

Files that use Emotion

This is perfectly normal Emotion syntax:

/** @jsx jsx */
import { jsx } from '@emotion/react';

<div css={{ color: 'blue' }} />

We don't want to add Compiled to a file that already has Emotion in it. ignoreIfImported provides a way to exclude files that use Emotion, for example we can exclude any file that imports something from @emotion/react and @emotion/core.

Using css on atlaskit components

import Button from '@atlaskit/button';

<Button css={{ color: 'blue' }} />

@atlaskit components still use Emotion (as of writing :eyes:), so converting css={{ color: 'blue' }} to css={css({ color: 'blue' })} and importing import { css } from '@compiled/react' can cause type errors.

excludeReactComponents lets us get around this issue.

changeset-bot[bot] commented 11 months ago

🦋 Changeset detected

Latest commit: 52af34b4b87652429e46f1e60d1ecdd8bb246fb9

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

This PR includes changesets to release 1 package | Name | Type | | ----------------------- | ----- | | @compiled/eslint-plugin | Minor |

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