Import Migration Rule

The import-from-emotion rule ensures that emotion's exports are imported directly from the appropriate @emotion packages rather than from the legacy react-emotion package.

Capabilities

Import Migration Validation

Migrates named exports from react-emotion to the correct modern @emotion packages.

/**
 * Rule for migrating imports from react-emotion to modern @emotion packages
 * Handles complex import patterns including mixed default and named exports
 */
interface ImportFromEmotionRuleConfig {
  name: "import-from-emotion";
  fixable: true;
  schema: never[]; // No configuration options
  messages: {
    incorrectImport: string;
  };
}

Rule Behavior

The rule:

• Detects imports from 'react-emotion' package
• Identifies imports that mix default (styled) with named exports
• Auto-fixes by splitting imports between @emotion/styled and emotion packages
• Handles import aliasing properly
• Preserves local variable names and aliases

Usage Examples

Basic Configuration

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

Code Examples

Incorrect code for this rule:

import styled, { css, keyframes } from 'react-emotion';

Correct code for this rule:

import styled from '@emotion/styled';
import { css, keyframes } from 'emotion';

Complex Import Handling

Before (with aliases):

import styled, { css as emotionCss, keyframes as kf } from 'react-emotion';

After (auto-fixed):

import styled from '@emotion/styled';
import { css as emotionCss, keyframes as kf } from 'emotion';

Import Pattern Support

The rule handles various import patterns:

1. Mixed imports (default + named):

   // Before
   import styled, { css } from 'react-emotion';
   
   // After  
   import styled from '@emotion/styled';
   import { css } from 'emotion';

2. Named-only imports:

   // Before
   import { css, keyframes } from 'react-emotion';
   
   // After
   import { css, keyframes } from 'emotion';

3. Namespace imports (reported but not auto-fixed):

   // Not auto-fixed for safety
   import * as emotion from 'react-emotion';

Error Messages

• incorrectImport: "emotion's exports should be imported directly from emotion rather than from react-emotion"

Migration Context

This rule is essential for Emotion 10 to 11 migration. It works alongside:

{
  "rules": {
    "@emotion/jsx-import": "error",
    "@emotion/no-vanilla": "error", 
    "@emotion/import-from-emotion": "error",
    "@emotion/styled-import": "error"
  }
}

The migration path:

• react-emotion default export → @emotion/styled
• react-emotion named exports → emotion package

Auto-Fix Logic

The rule uses sophisticated logic to handle import splitting:

1. Default specifier (styled): Goes to @emotion/styled
2. Named specifiers (css, keyframes, etc.): Go to emotion
3. Preserves aliases: css as emotionCss → css as emotionCss
4. Safe handling: Won't fix namespace imports to avoid breaking changes

When Not To Use

Disable this rule if:

• You're not migrating from Emotion 10
• You're still using react-emotion package intentionally
• You have custom module resolution that handles the mapping