or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

component-rules.md index.md plugin-configuration.md style-quality-rules.md stylesheet-rules.md

tile.json

Style Quality Rules

Rules that enforce style quality standards including inline style detection, color literal prevention, and style array optimization.

Capabilities

No Inline Styles Rule

Detects JSX components with inline styles that contain literal values, encouraging the use of StyleSheet for better performance and maintainability.

/**
 * ESLint rule that detects inline styles with literal values
 * Helps maintain performance by encouraging StyleSheet usage over inline objects
 */
module.exports = {
  meta: {
    schema: [] // No configuration options
  },
  create: function(context) {
    // Returns ESLint visitors object with:
    // - JSXAttribute: Analyzes style attributes for inline object expressions
    // - 'Program:exit': Reports all detected inline styles
  }
};

Usage Examples:

// These would trigger the rule
function BadComponent() {
  return (
    <View style={{ flex: 1, backgroundColor: 'red' }}> {/* Inline style with literals */}
      <Text style={{ fontSize: 16, color: 'blue' }}>Hello</Text> {/* Another inline style */}
    </View>
  );
}

// Better approach - use StyleSheet
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'red' },
  text: { fontSize: 16, color: 'blue' },
});

function GoodComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello</Text>
    </View>
  );
}

No Color Literals Rule

Detects StyleSheet rules and inline styles containing color literals instead of variables, promoting consistent color usage across the app.

/**
 * ESLint rule that detects color literals in styles
 * Encourages using color variables/constants for consistency and maintainability
 */
module.exports = {
  meta: {
    schema: [] // No configuration options
  },
  create: function(context) {
    // Returns ESLint visitors object with:
    // - CallExpression: Analyzes StyleSheet.create calls for color literals
    // - JSXAttribute: Analyzes inline style attributes for color literals
    // - 'Program:exit': Reports all detected color literals
  }
};

Usage Examples:

// These would trigger the rule
const badStyles = StyleSheet.create({
  container: {
    backgroundColor: '#FF0000', // Color literal
    borderColor: 'red',         // Color literal
  },
  text: {
    color: '#333333',          // Color literal
  },
});

// Inline styles also trigger the rule
<View style={{ backgroundColor: '#FF0000' }} />

// Better approach - use color constants
const Colors = {
  primary: '#FF0000',
  border: 'red',
  text: '#333333',
};

const goodStyles = StyleSheet.create({
  container: {
    backgroundColor: Colors.primary,
    borderColor: Colors.border,
  },
  text: {
    color: Colors.text,
  },
});

No Single Element Style Arrays Rule

Prevents single-element style arrays that cause unnecessary re-renders due to array identity changes on each render.

/**
 * ESLint rule that prevents single-element style arrays
 * Helps optimize performance by avoiding unnecessary re-renders from array identity changes
 */
module.exports = {
  meta: {
    fixable: "code", // Supports auto-fixing
    docs: {
      description: "Disallow single element style arrays. These cause unnecessary re-renders as the identity of the array always changes",
      category: "Stylistic Issues",
      recommended: false,
      url: ""
    }
  },
  create: function(context) {
    // Returns ESLint visitors object with:
    // - JSXAttribute: Analyzes JSX style attributes for single-element arrays
  }
};

Usage Examples:

// This would trigger the rule and be auto-fixed
function BadComponent() {
  return (
    <View style={[styles.container]} /> {/* Single-element array - unnecessary */}
  );
}

// Auto-fixed to:
function GoodComponent() {
  return (
    <View style={styles.container} /> {/* Direct style reference - better performance */}
  );
}

// Multiple elements are fine
function AcceptableComponent() {
  return (
    <View style={[styles.container, styles.active]} /> {/* Multiple elements - array needed */}
  );
}

Error Messages

No Inline Styles Messages

// Error format: "Inline style: {expression}"
"Inline style: { flex: 1, backgroundColor: 'red' }"
"Inline style: { fontSize: 16, color: 'blue' }"

No Color Literals Messages

// Error format: "Color literal: {expression}"
"Color literal: '#FF0000'"
"Color literal: 'red'"
"Color literal: '#333333'"

No Single Element Style Arrays Messages

// Error message
"Single element style arrays are not necessary and cause unnecessary re-renders"

Performance Impact

These rules help optimize React Native performance in several ways:

Inline Styles Performance

Problem: Inline styles create new objects on every render, causing unnecessary re-renders
Solution: StyleSheet.create() creates optimized, reusable style objects
Benefit: Reduced memory allocation and faster reconciliation

Color Literals Maintainability

Problem: Hardcoded colors scattered throughout the codebase make theme changes difficult
Solution: Centralized color constants enable easy theme switching and consistent branding
Benefit: Better maintainability and design system consistency

Single Element Arrays Performance

Problem: Arrays with one element still create new array instances on each render
Solution: Direct style references avoid unnecessary array creation
Benefit: Slightly better performance and cleaner code

Integration Examples

With Theme Systems

// Define theme colors
const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#FF3B30',
    background: '#F2F2F7',
    text: '#000000',
  },
};

// Use in StyleSheet (compliant with no-color-literals)
const styles = StyleSheet.create({
  container: {
    backgroundColor: theme.colors.background,
    borderColor: theme.colors.primary,
  },
  text: {
    color: theme.colors.text,
  },
});

With Styled Components Libraries

These rules work with various styling approaches when properly configured:

// styled-components (requires appropriate ESLint configuration)
const StyledView = styled.View`
  background-color: ${props => props.theme.colors.primary};
  border-color: ${props => props.theme.colors.border};
`;

// Emotion (with css prop)
const emotionStyles = css`
  background-color: ${theme.colors.primary};
  color: ${theme.colors.text};
`;

Version

Tile

Files