or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

import-migration.md index.md jsx-import.md no-vanilla.md package-renaming.md styled-import.md syntax-preference.md

tile.json

@emotion/eslint-plugin

@emotion/eslint-plugin provides ESLint rules specifically designed for emotion, a CSS-in-JS library. It offers linting rules to help developers migrate from older versions of emotion to newer ones, enforce proper imports, and maintain code quality when using emotion's CSS-in-JS features.

Package Information

Package Name: @emotion/eslint-plugin
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install @emotion/eslint-plugin --save-dev

Core Imports

The plugin is used through ESLint configuration rather than direct imports:

{
  "plugins": ["@emotion"],
  "rules": {
    "@emotion/jsx-import": "error",
    "@emotion/no-vanilla": "error",
    "@emotion/import-from-emotion": "error",
    "@emotion/styled-import": "error",
    "@emotion/syntax-preference": ["error", "object"],
    "@emotion/pkg-renaming": "error"
  }
}

Basic Usage

Configure the plugin in your .eslintrc configuration file:

{
  "plugins": ["@emotion"],
  "rules": {
    "@emotion/jsx-import": "error"
  }
}

For Emotion 11 migration, enable the pkg-renaming rule:

{
  "rules": {
    "@emotion/pkg-renaming": "error"
  }
}

For comprehensive Emotion 10 to 11 migration:

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

Architecture

The plugin is built around:

Rule System: Six ESLint rules targeting different emotion usage patterns
Migration Support: Automated fixes for emotion version migrations
Type Safety: Built with TypeScript and @typescript-eslint/utils
ESLint Integration: Standard ESLint plugin architecture with fixable rules

Capabilities

JSX Import Management

Ensures proper jsx import and pragma setup when using the css prop with emotion/react.

interface JSXImportRule {
  name: "jsx-import";
  fixable: true;
  schema: Array<JSXConfig | string>;
  messages: {
    cssProp: string;
    cssPropWithPragma: string;
    templateLiterals: string;
  };
}

interface JSXConfig {
  runtime: string;
  importSource?: string;
}

JSX Import Rule

Styled Import Validation

Ensures styled components are imported from the correct @emotion/styled package.

interface StyledImportRule {
  name: "styled-import";
  fixable: true;
  messages: {
    incorrectImport: string;
  };
}

Styled Import Rule

Emotion Import Migration

Migrates imports from legacy react-emotion to modern @emotion packages.

interface ImportFromEmotionRule {
  name: "import-from-emotion";
  fixable: true;
  messages: {
    incorrectImport: string;
  };
}

Import Migration Rule

Vanilla Emotion Prevention

Prevents usage of vanilla @emotion/css in React applications.

interface NoVanillaRule {
  name: "no-vanilla";
  fixable: false;
  messages: {
    vanillaEmotion: string;
  };
}

No Vanilla Rule

CSS Syntax Preference

Enforces consistent CSS syntax choice between string and object styles.

interface SyntaxPreferenceRule {
  name: "syntax-preference";
  fixable: false;
  schema: [('string' | 'object')?];
  messages: {
    preferStringStyle: string;
    preferObjectStyle: string;
    preferWrappingWithCSS: string;
    emptyCssProp: string;
  };
}

Syntax Preference Rule

Package Renaming (Emotion 11 Codemods)

Automates migration of package names from Emotion 10 to Emotion 11.

interface PkgRenamingRule {
  name: "pkg-renaming";
  fixable: true;
  messages: {
    renamePackage: string;
    exportChange: string;
    emotionTheming: string;
  };
}

Package Renaming Rule

Types

interface ESLintRule {
  name: string;
  meta: {
    docs: {
      description: string;
      recommended: boolean;
    };
    fixable?: "code" | "whitespace";
    messages: Record<string, string>;
    schema: any[];
    type: "problem" | "suggestion" | "layout";
  };
  defaultOptions: any[];
  create(context: RuleContext): RuleListener;
}

interface RuleContext {
  getSourceCode(): SourceCode;
  getFilename(): string;
  getScope(): Scope;
  settings: Record<string, any>;
  options: any[];
  report(descriptor: ReportDescriptor): void;
}

interface ReportDescriptor {
  node: ESTreeNode;
  messageId: string;
  data?: Record<string, any>;
  fix?: (fixer: RuleFixer) => Fix | Fix[] | null;
}