Skip to content

Releases: Salmela/emotion-solid2

Release 2.1.0

28 Nov 18:27
f2ff36c

Choose a tag to compare

Overview

Version 2.1.0 includes three bug fixes that improve compatibility with SolidJS and fix issues with server-side rendering and style inheritance.

Changes

1. Server-Side Rendering Fix (PR tqwewe#8 - commit 54ea1a1)

Fixed an issue where styles weren't being rendered correctly when using server-side rendering (SSR) or static site generation (SSG). The code was using a React-specific approach that doesn't work with SolidJS, and has been updated to use Solid's proper method for rendering styles.

2. Style Inheritance Fix (PR tqwewe#9 - commit a6c262f)

Fixed a bug that prevented styles from being properly inherited when extending one styled component from another. The issue was caused by an incorrect check that blocked style imports.

3. Class Name Prop Fix (PR tqwewe#10 - commit 984610c)

Fixed a compatibility issue where the library was using React's className prop instead of SolidJS's class prop. This caused problems when extending styled components and passing class names through props. The library now correctly uses class as SolidJS expects.

Summary

These changes improve SolidJS compatibility by:

  • Fixing server-side rendering support
  • Enabling proper style inheritance between styled components
  • Using correct SolidJS prop conventions

Release 2.0.0

22 Nov 11:48

Choose a tag to compare

Overview

This document summarizes all changes made in the improved branch compared to the main branch. The changes include major feature additions, bug fixes, type improvements, and test coverage enhancements.

Major Features

1. Theme Support

  • New file: src/theme.tsx - Implements theme context and provider
  • Added ThemeProvider component that accepts a theme signal
  • Added useTheme() hook for accessing theme in styled components
  • Theme is now accessible in styled component style functions via props.theme
  • Theme updates reactively when the signal changes
  • Documented in README with usage examples

2. Type System Improvements

  • Improved TypeScript types for styled components
  • Fixed typing issues with styled element attributes
  • Added proper types for CreateStyledFunction interface
  • Improved Interpolations type to be generic over Props
  • Better type inference for extending styled components
  • Fixed typing of process global variable

Bug Fixes & Performance

1. Re-render Optimization

  • Removed unnecessary Object.values(props) calls that caused unnecessary re-renders
  • Optimized className handling with memoization
  • Improved memoization of registered styles

2. Ref Handling

  • Fixed ref props to work correctly with styled components
  • Removed ref parameter from withEmotionCache (now handled by SolidJS directly)

3. Component Extension

  • Fixed behavior when extending other styled components
  • Properly forwards props when extending components

Testing Infrastructure

New Test Files

  • tests/base.spec.tsx - Comprehensive tests for styled components:
    • Basic styling functionality
    • Props interpolation
    • Signal reactivity
    • Ref support
    • Component extension
    • Children rendering
    • Re-render optimization
  • tests/theme.spec.tsx - Tests for theme functionality:
    • ThemeProvider usage
    • useTheme hook
    • Theme reactivity in styled components
  • tests/helper.tsx - Test rendering helper utility
  • tests/setup.ts - Test setup for process.env

Code Quality Improvements

1. Code Organization

  • Moved rendering helper to separate file (tests/helper.tsx)
  • Better separation of concerns

2. Configuration

  • Added .nvmrc file for Node version management
  • Updated .gitignore to include vim cache files
  • Updated package.json dependencies
  • Added env.d.ts for TypeScript environment types

3. Documentation

  • Added theming documentation to README
  • Included usage examples for ThemeProvider