JSX Import Rule

The jsx-import rule ensures that jsx from @emotion/react is imported when using the css prop. This rule can usually be auto-fixed so manual intervention is typically not required.

Capabilities

JSX Import Rule Configuration

Configures and validates jsx import requirements for emotion's css prop usage.

/**
 * Rule for ensuring jsx from @emotion/react is imported when using css prop
 * Supports both classic and automatic JSX runtime modes
 */
interface JSXImportRuleConfig {
  name: "jsx-import";
  fixable: true;
  schema: {
    type: "array";
    items: Array<JSXConfig | string>;
    uniqueItems: true;
    minItems: 0;
  };
  messages: {
    cssProp: string;
    cssPropWithPragma: string;
    templateLiterals: string;
  };
}

interface JSXConfig {
  runtime: "automatic";
  importSource?: string; // defaults to "@emotion/react"
}

Rule Behavior

The rule operates in two modes based on configuration:

Automatic JSX Runtime Mode (when JSXConfig with runtime: "automatic" is provided):

• Validates jsxImportSource pragma comments
• Ensures proper importSource is set (defaults to "@emotion/react")
• Auto-fixes missing or incorrect jsxImportSource pragmas

Classic JSX Runtime Mode (default):

• Validates jsx import from @emotion/react or @emotion/core
• Ensures jsx pragma is set correctly
• Auto-fixes missing jsx imports and pragma comments
• Handles template literal css prop usage

Usage Examples

Configuration for Automatic JSX Runtime

{
  "rules": {
    "@emotion/jsx-import": [
      "error", 
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  }
}

Configuration for Classic JSX Runtime

{
  "rules": {
    "@emotion/jsx-import": "error"
  }
}

Code Examples

Incorrect code for this rule:

// Missing jsx import and pragma
let element = (
  <div
    css={{
      color: 'green'
    }}
  />
);

Correct code for this rule:

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

let element = (
  <div
    css={{
      color: 'green'
    }}
  />
);

Automatic JSX Runtime example:

/** @jsxImportSource @emotion/react */
let element = (
  <div
    css={{
      color: 'green'
    }}
  />
);

Template Literal Handling

The rule also handles template literal css prop usage:

Before (triggers fix):

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

<div css={`color: hotpink;`} />

After (auto-fixed):

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

<div css={css`color: hotpink;`} />

Error Messages

• cssProp: "The css prop can only be used if jsxImportSource is set to {{ importSource }}"
• cssPropWithPragma: "The css prop can only be used if jsx from @emotion/react is imported and it is set as the jsx pragma"
• templateLiterals: "Template literals should be replaced with tagged template literals using `css` when using the css prop"

When Not To Use

Disable this rule if you are using:

• Babel plugin that automatically adds imports
• Build tools that handle jsx pragma setup
• Non-React environments where css prop is not used