No Vanilla Rule

The no-vanilla rule prevents usage of vanilla @emotion/css in React applications, encouraging the use of @emotion/react instead.

Capabilities

Vanilla Emotion Detection

Detects and reports usage of @emotion/css package imports in React contexts.

/**
 * Rule for preventing vanilla emotion usage in React applications
 * Reports @emotion/css imports as violations
 */
interface NoVanillaRuleConfig {
  name: "no-vanilla";
  fixable: false; // Only reports, no auto-fix
  schema: never[]; // No configuration options
  messages: {
    vanillaEmotion: string;
  };
}

Rule Behavior

The rule:

• Detects imports from '@emotion/css' package
• Reports violations without auto-fixing
• Encourages migration to @emotion/react for React applications
• Helps maintain consistency in React emotion usage

Usage Examples

Basic Configuration

{
  "rules": {
    "@emotion/no-vanilla": "error"
  }  
}

Code Examples

Incorrect code for this rule:

import { css } from '@emotion/css';

const styles = css`
  color: hotpink;
  background: white;
`;

Correct code for this rule:

import { css } from '@emotion/react';

const styles = css`
  color: hotpink;
  background: white;
`;

React Context Usage

In React applications, prefer @emotion/react:

Avoid:

import { css } from '@emotion/css';

function MyComponent() {
  return <div className={css`color: red;`}>Hello</div>;
}

Prefer:

import { css } from '@emotion/react';

function MyComponent() {
  return <div css={css`color: red;`}>Hello</div>;
}

Error Messages

• vanillaEmotion: "Vanilla emotion should not be used"

Migration Context

This rule is part of the Emotion 10 to 11 migration guidelines. Use with other migration rules:

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

Rationale

The rule enforces these benefits:

• React Integration: @emotion/react provides better React integration
• CSS Prop Support: Enables the css prop in JSX
• SSR Support: Better server-side rendering capabilities
• Developer Experience: Consistent API across React emotion usage

When Not To Use

Disable this rule if:

• You're not using React (vanilla emotion is appropriate for non-React apps)
• You specifically need vanilla emotion for certain use cases
• You're in a mixed environment with both React and non-React code
• You're migrating gradually and need both packages temporarily

Alternative Solutions

Instead of @emotion/css, consider:

• @emotion/react for React applications
• @emotion/styled for styled components
• Framework-specific emotion packages for other frameworks