Styled Import Rule

The styled-import rule ensures that styled components are imported from the correct @emotion/styled package instead of the legacy react-emotion package.

Capabilities

Styled Import Validation

Validates and auto-fixes styled component imports to use the modern @emotion/styled package.

/**
 * Rule for ensuring styled is imported from @emotion/styled
 * Automatically fixes imports from legacy react-emotion package
 */
interface StyledImportRuleConfig {
  name: "styled-import";
  fixable: true;
  schema: never[]; // No configuration options
  messages: {
    incorrectImport: string;
  };
}

Rule Behavior

The rule:

• Detects imports from 'react-emotion' package
• Reports violation when styled is imported from legacy package
• Auto-fixes by replacing import source with '@emotion/styled'
• Only fixes simple default import cases for safety

Usage Examples

Basic Configuration

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

Code Examples

Incorrect code for this rule:

import styled from 'react-emotion';

const Button = styled.button`
  background: blue;
  color: white;
`;

Correct code for this rule:

import styled from '@emotion/styled';

const Button = styled.button`
  background: blue;
  color: white;
`;

Auto-Fix Behavior

The rule will automatically fix simple default imports:

Before:

import styled from 'react-emotion';

After (auto-fixed):

import styled from '@emotion/styled';

Note: Complex import patterns (destructured imports, namespace imports) are reported but not auto-fixed for safety reasons.

Error Messages

• incorrectImport: "styled should be imported from @emotion/styled"

Migration Context

This rule is part of the Emotion 10 to 11 migration toolkit. It helps migrate from:

• react-emotion → @emotion/styled

Use alongside other migration rules:

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

When Not To Use

Disable this rule if:

• You're not migrating from Emotion 10
• You're still using react-emotion intentionally
• You have custom build processes that handle the import mapping