tessl/npm-tss-react

Type safe CSS-in-JS API heavily inspired by react-jss

—

Pending

Overview

Eval results

Files

Compatibility Mode

Name: tessl/npm-tss-react
Author: tessl

TSS-React provides compatibility layers and alternative implementations for specific use cases and migration scenarios. These exports provide enhanced compatibility with certain environments or legacy code patterns.

Capabilities

Compatibility Mode Entry Point

The tss-react/compat export provides the same API as the main entry point but uses an alternative withStyles implementation for enhanced compatibility.

// Import from tss-react/compat
import { 
  createTss, 
  createMakeStyles, 
  createWithStyles, 
  createMakeAndWithStyles,
  tss,
  useStyles,
  TssCacheProvider,
  GlobalStyles,
  keyframes
} from "tss-react/compat";

// Same types as main entry point
import type { 
  CSSInterpolation, 
  CSSObject, 
  Css, 
  Cx, 
  CxArg, 
  Tss 
} from "tss-react/compat";

Usage Example:

import { createWithStyles } from "tss-react/compat";
import { useTheme } from "@mui/material/styles";

const { withStyles } = createWithStyles({ useTheme });

// Compatible withStyles implementation
const StyledComponent = withStyles(MyComponent, (theme, props) => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(2)
  }
}));

Combined Factory Function

Creates both makeStyles and withStyles functions together with a shared cache provider.

/**
 * Creates makeStyles and withStyles functions with shared configuration
 * @param params Configuration object with theme hook and optional cache
 * @returns Object containing makeStyles, withStyles, and TssCacheProvider
 */
function createMakeAndWithStyles<Theme>(params: {
  useTheme: () => Theme;
  cache?: EmotionCache;
}): {
  makeStyles: MakeStylesFunction<Theme>;
  withStyles: WithStylesFunction<Theme>;
  TssCacheProvider: React.ComponentType<{ children: ReactNode }>;
};

Usage Example:

import { createMakeAndWithStyles } from "tss-react";
import { useTheme } from "@mui/material/styles";

const { makeStyles, withStyles, TssCacheProvider } = createMakeAndWithStyles({
  useTheme
});

// Use both APIs with consistent theming
const useStyles = makeStyles((theme) => ({
  container: {
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing(3)
  }
}));

const StyledButton = withStyles("button", (theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText
  }
}));

function App() {
  return (
    <TssCacheProvider>
      <MyComponents />
    </TssCacheProvider>
  );
}

MUI Compatibility Mode

Pre-configured MUI integration using compatibility mode withStyles implementation.

// Import from tss-react/mui-compat
import { makeStyles, withStyles, tss, useStyles } from "tss-react/mui-compat";

/**
 * MUI-compatible makeStyles using compatibility layer
 */
const makeStyles: MakeStylesFunction<Theme>;

/**
 * MUI-compatible withStyles using compatibility layer
 */
const withStyles: WithStylesFunction<Theme>;

/**
 * Pre-configured TSS instance (same as tss-react/mui)
 */
const tss: Tss<{ theme: Theme }, {}, never, MuiThemeStyleOverridesPluginParams, never>;

/**
 * Default useStyles hook (same as tss-react/mui)
 */
const useStyles: UseStyles<{ theme: Theme }, {}, string, MuiThemeStyleOverridesPluginParams>;

Usage Example:

import { makeStyles, withStyles } from "tss-react/mui-compat";
import { Button } from "@mui/material";

// Compatible makeStyles for migration scenarios
const useStyles = makeStyles((theme) => ({
  customButton: {
    backgroundColor: theme.palette.secondary.main,
    "&:hover": {
      backgroundColor: theme.palette.secondary.dark
    }
  }
}));

// Compatible withStyles for legacy components
const StyledButton = withStyles(Button, (theme) => ({
  root: {
    borderRadius: theme.shape.borderRadius * 2,
    textTransform: "none"
  }
}));

function MigratedComponent() {
  const classes = useStyles();
  return (
    <div>
      <Button className={classes.customButton}>
        Migrated Button
      </Button>
      <StyledButton variant="contained">
        Legacy Styled Button
      </StyledButton>
    </div>
  );
}

Compatibility Differences

WithStyles Implementation

The compatibility mode uses an alternative withStyles implementation (withStyles_compat.tsx) that provides enhanced compatibility for certain edge cases:

Class Component Support: Better handling of class components with complex inheritance patterns
Props Forwarding: Enhanced props forwarding behavior for specific component patterns
Theme Context: More robust theme context handling in complex component hierarchies

// Standard withStyles
import { createWithStyles } from "tss-react";

// Compatibility withStyles  
import { createWithStyles } from "tss-react/compat";

When to Use Compatibility Mode

Use compatibility mode when:

Migrating from @material-ui/core v4: Enhanced compatibility with legacy patterns
Complex Component Hierarchies: Better handling of deeply nested styled components
Third-party Component Integration: More reliable integration with external component libraries
SSR Edge Cases: Additional server-side rendering compatibility

Migration Guide

From @material-ui/core makeStyles

// Before (Material-UI v4)
import { makeStyles } from "@material-ui/core/styles";

// After (TSS-React compatibility)
import { makeStyles } from "tss-react/mui-compat";

// Same API, enhanced compatibility
const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.paper
  }
}));

From @material-ui/core withStyles

// Before (Material-UI v4)
import { withStyles } from "@material-ui/core/styles";

// After (TSS-React compatibility)
import { withStyles } from "tss-react/mui-compat";

// Enhanced compatibility for complex scenarios
const StyledComponent = withStyles(MyComponent, (theme) => ({
  root: {
    padding: theme.spacing(2)
  }
}));

Type Definitions

All compatibility exports use the same type definitions as the main entry point:

// Identical type interfaces
interface MakeStylesFunction<Theme> {
  <Params = void>(params?: { name?: string; uniqId?: string }): (
    cssObjectByRuleNameOrGetCssObjectByRuleName: 
      | Record<string, CSSObject>
      | ((theme: Theme, params: Params) => Record<string, CSSObject>)
  ) => (params: Params) => {
    classes: Record<string, string>;
    cx: Cx;
    css: Css;
    theme: Theme;
  };
}

interface WithStylesFunction<Theme> {
  <Component extends React.ComponentType<any>, Props = ComponentProps<Component>>(
    Component: Component,
    cssObjectByRuleNameOrGetCssObjectByRuleName:
      | Record<string, CSSObject>
      | ((theme: Theme, props: Props, classes: Record<string, string>) => Record<string, CSSObject>)
  ): ComponentType<Props>;
}

Performance Considerations

Compatibility mode maintains the same performance characteristics as the standard implementation:

Bundle Size: No significant size difference
Runtime Performance: Equivalent performance with additional compatibility checks
Memory Usage: Similar memory footprint with enhanced component lifecycle handling

Best Practices

Use Standard Mode First: Only use compatibility mode when specific compatibility issues are encountered
Test Thoroughly: Verify component behavior when switching between modes
Gradual Migration: Migrate components incrementally rather than switching entire applications at once
Monitor Performance: Profile components after migration to ensure expected performance

Install with Tessl CLI