tessl/npm-radium

A set of tools to manage inline styles on React elements with support for pseudo-classes, media queries, and keyframe animations.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Style Components

Name: tessl/npm-radium
Author: tessl

React components for rendering CSS rules and managing global styles within Radium applications.

Capabilities

Style Component

Renders CSS rules as an HTML <style> element with automatic vendor prefixing and optional scoping.

/**
 * Component that renders CSS rules as a style element
 */
const Style: React.ComponentType<StyleProps>;

interface StyleProps {
  /** CSS rules object to render */
  rules: { [selector: string]: object | { [mediaQuery: string]: object } };
  /** Optional selector to scope all CSS rules */
  scopeSelector?: string;
  /** Optional Radium configuration */
  radiumConfig?: RadiumConfig;
}

Usage Examples:

import { Style } from 'radium';

// Basic CSS rules
<Style rules={{
  body: {
    margin: 0,
    fontFamily: 'Helvetica Neue, Arial, sans-serif'
  },
  'h1, h2, h3': {
    fontWeight: 'bold'
  }
}} />

// With media queries
<Style rules={{
  '.container': {
    padding: '1rem'
  },
  mediaQueries: {
    '(min-width: 768px)': {
      '.container': {
        padding: '2rem'
      }
    }
  }
}} />

// With scoping
<div className="my-component">
  <Style
    scopeSelector=".my-component"
    rules={{
      h1: { fontSize: '2em' },
      p: { lineHeight: 1.5 }
    }}
  />
</div>

StyleRoot Component

Root wrapper component that manages global styles and provides necessary context for keyframes and media queries.

/**
 * Root component for managing global Radium styles
 * Must wrap components that use keyframes or media queries
 */
const StyleRoot: React.ComponentType<StyleRootProps>;

interface StyleRootProps {
  /** Child components */
  children: React.ReactNode;
  /** Optional Radium configuration */
  radiumConfig?: RadiumConfig;
  /** All other div props are forwarded */
  [key: string]: any;
}

Usage Examples:

import { StyleRoot } from 'radium';

// Basic usage
function App() {
  return (
    <StyleRoot>
      <Header />
      <Main />
      <Footer />
    </StyleRoot>
  );
}

// With configuration
<StyleRoot radiumConfig={{ userAgent: 'custom-agent' }}>
  <MyApp />
</StyleRoot>

// With additional props (forwarded to div)
<StyleRoot className="app-root" style={{ minHeight: '100vh' }}>
  <MyApp />
</StyleRoot>

Style Object Format

The rules prop accepts CSS rules in JavaScript object format with special handling for media queries.

interface StyleRules {
  /** Regular CSS selectors */
  [selector: string]: CSSProperties | MediaQueryRules;
  /** Special media queries object */
  mediaQueries?: {
    [query: string]: StyleRules;
  };
}

interface CSSProperties {
  [property: string]: string | number;
}

interface MediaQueryRules {
  [selector: string]: CSSProperties;
}

Usage Examples:

const complexRules = {
  // Regular styles
  '.button': {
    padding: '0.5rem 1rem',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  },
  
  // Multiple selectors
  'h1, h2, h3': {
    fontFamily: 'Arial, sans-serif',
    margin: '0 0 1rem 0'
  },
  
  // Media queries
  mediaQueries: {
    '(min-width: 768px)': {
      '.button': {
        padding: '0.75rem 1.5rem'
      }
    },
    '(prefers-color-scheme: dark)': {
      '.button': {
        backgroundColor: '#333',
        color: '#fff'
      }
    }
  }
};

Context Integration

StyleRoot provides context that other Radium components depend on for proper functionality.

interface StyleKeeperContext {
  /** Internal style keeper instance */
  styleKeeper: StyleKeeper;
}

interface RadiumConfigContext {
  /** Configuration passed down through context */
  config: RadiumConfig;
}

Important Notes

StyleRoot Requirements

Required for components using keyframes animations
Required for components using media queries
Must not be used directly on elements with media queries or keyframes - wrap in separate components instead

// ❌ This doesn't work
<StyleRoot>
  <div style={{'@media print': {color: 'black'}}} />
</StyleRoot>

// ✅ This works
const PrintableDiv = () => (
  <div style={{'@media print': {color: 'black'}}} />
);

<StyleRoot>
  <PrintableDiv />
</StyleRoot>

Style Content Handling

For properties like content that require quoted strings, you must add explicit quotes:

const rules = {
  '.tooltip::after': {
    content: "'Tooltip text'"  // Note the extra quotes
  }
};

Types

interface StyleProps {
  rules: StyleRules;
  scopeSelector?: string;
  radiumConfig?: RadiumConfig;
}

interface StyleRootProps {
  children: React.ReactNode;
  radiumConfig?: RadiumConfig;
  [key: string]: any;
}

interface StyleRules {
  [selector: string]: CSSProperties | MediaQueryRules;
  mediaQueries?: {
    [query: string]: StyleRules;
  };
}

Install with Tessl CLI