or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

babel-macro.md build-integration.md component-styling.md external-css.md index.md style-registry.md

tile.json

tessl/npm-styled-jsx

Full CSS support for JSX without compromises, providing scoped component-friendly CSS with server-side rendering support

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/styled-jsx@5.1.x

To install, run

npx @tessl/cli install tessl/npm-styled-jsx@5.1.0

styled-jsx

styled-jsx provides full CSS support for JSX without compromises, enabling developers to write scoped, component-friendly CSS directly within JSX components. It offers complete CSS capabilities with automatic scoping, server-side rendering support, and a compact 3kb gzipped runtime.

Package Information

Package Name: styled-jsx
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install styled-jsx

Core Imports

import { StyleRegistry, createStyleRegistry, useStyleRegistry } from "styled-jsx";

For CSS utilities:

import css from "styled-jsx/css";

For style component (usually auto-imported by Babel):

import JSXStyle from "styled-jsx/style";

For babel macro support:

import { resolve } from "styled-jsx/macro";

Basic Usage

// Basic scoped styles
function Button({ children }) {
  return (
    <button>
      {children}
      <style jsx>{`
        button {
          padding: 20px;
          background: #eee;
          color: #999;
          border: none;
          border-radius: 4px;
        }
      `}</style>
    </button>
  );
}

// Global styles
function App() {
  return (
    <div>
      <Button>Click me</Button>
      <style jsx global>{`
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }
      `}</style>
    </div>
  );
}

Architecture

styled-jsx is built around several key concepts:

Scoped Styles: CSS is automatically scoped to components using unique class names
Style Registry: Manages style injection, deduplication, and server-side rendering
Babel Transformation: Compile-time processing transforms styled-jsx syntax into optimized runtime code
External CSS Support: css.resolve and css.global provide utilities for styles outside JSX
SSR Integration: Full server-side rendering support with style extraction and hydration

Capabilities

Component Scoped Styles

Core CSS-in-JS functionality for writing scoped styles directly in JSX components. Perfect for component-level styling with full CSS support.

// JSX Style Tag (transformed by Babel)
<style jsx>{`/* CSS */`}</style>
<style jsx global>{`/* Global CSS */`}</style>

Component Styling

Style Registry Management

Server-side rendering and style management system for handling style injection, deduplication, and extraction.

function StyleRegistry({
  children,
  registry
}: {
  children: JSX.Element | import('react').ReactNode;
  registry?: StyledJsxStyleRegistry;
}): JSX.Element;

function createStyleRegistry(): StyledJsxStyleRegistry;

function useStyleRegistry(): StyledJsxStyleRegistry;

interface StyledJsxStyleRegistry {
  styles(options?: { nonce?: string }): JSX.Element[];
  flush(): void;
  add(props: any): void;
  remove(props: any): void;
}

Style Registry

External CSS Utilities

CSS utilities for creating styles outside of JSX components, including scoped class generation and global style definition.

function css(chunks: TemplateStringsArray, ...args: any[]): JSX.Element;

namespace css {
  function global(
    chunks: TemplateStringsArray,
    ...args: any[]
  ): JSX.Element;
  
  function resolve(
    chunks: TemplateStringsArray,
    ...args: any[]
  ): { className: string; styles: JSX.Element };
}

External CSS

Babel Macro Support

Babel macro functionality for using css.resolve without babel configuration, supporting the babel-plugin-macros ecosystem.

function resolve(
  chunks: TemplateStringsArray,
  ...args: any[]
): {
  className: string;
  styles: JSX.Element;
}

Babel Macro

Build Tool Integration

Babel plugin and webpack loader for transforming styled-jsx syntax and processing external CSS files.

// Babel plugin (styled-jsx/babel)
module.exports = function styledJsxBabelPlugin(options?: {
  optimizeForSpeed?: boolean;
  sourceMaps?: boolean;
  styleModule?: string;
  vendorPrefixes?: boolean;
  plugins?: Array<any>;
}): any;

// Webpack loader (styled-jsx/webpack)  
module.exports = {
  loader: string; // Path to webpack loader
}

Build Integration

Types

interface StyledJsxStyleRegistry {
  /** Get array of style elements for rendering */
  styles(options?: { nonce?: string }): JSX.Element[];
  /** Clear all styles from registry */
  flush(): void;
  /** Add style to registry */
  add(props: any): void;
  /** Remove style from registry */
  remove(props: any): void;
}

// React module augmentation for jsx and global props
declare module 'react' {
  interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}