tessl/npm-styled-jsx

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

—

Pending

Overview

Eval results

Files

Babel Macro

Name: tessl/npm-styled-jsx
Author: tessl

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

Capabilities

resolve Function (Named Export)

Babel macro version of css.resolve that works with babel-plugin-macros without requiring styled-jsx babel plugin configuration.

/**
 * Babel macro for css.resolve functionality
 * @param chunks - Template literal string chunks
 * @param args - Template literal interpolated values
 * @returns Object with className and styles (after macro transformation)
 */
function resolve(
  chunks: TemplateStringsArray,
  ...args: any[]
): {
  className: string;
  styles: JSX.Element;
}

Setup Requirements:

npm install styled-jsx babel-plugin-macros

Babel configuration:

{
  "plugins": ["babel-plugin-macros"]
}

Usage Examples:

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

// Basic macro usage
function MacroStyledComponent() {
  const { className, styles } = resolve`
    .button {
      background: #007bff;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    .button:hover {
      background: #0056b3;
    }
  `;
  
  return (
    <div>
      <button className={className}>Click me</button>
      {styles}
    </div>
  );
}

// Dynamic styles with interpolation
function DynamicMacroComponent({ color, size }) {
  const { className, styles } = resolve`
    .dynamic {
      color: ${color};
      font-size: ${size};
      padding: 8px 16px;
      border: 2px solid ${color};
      border-radius: 4px;
      background: transparent;
      transition: all 0.2s;
    }
    .dynamic:hover {
      background: ${color};
      color: white;
    }
  `;
  
  return (
    <div>
      <div className={className}>Dynamic styled content</div>
      {styles}
    </div>
  );
}

Default Export Macro

Default macro that provides css.resolve via member expression (css.resolve...).

/**
 * Default macro function providing css.resolve via member expression
 * Usage: import css from 'styled-jsx/macro'; css.resolve`...`
 */
const macro: {
  resolve(
    chunks: TemplateStringsArray,
    ...args: any[]
  ): { className: string; styles: JSX.Element };
};

Usage Examples:

import css from 'styled-jsx/macro';

// Using default export with member expression
function DefaultMacroComponent() {
  const { className, styles } = css.resolve`
    .card {
      background: white;
      border: 1px solid #e1e5e9;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .card:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
  `;
  
  return (
    <div>
      <div className={className}>Card content</div>
      {styles}
    </div>
  );
}

// Complex component with multiple resolved styles
function ComplexMacroComponent({ theme, isActive }) {
  const headerStyle = css.resolve`
    .header {
      background: ${theme.headerBg};
      color: ${theme.headerText};
      padding: 16px 20px;
      border-bottom: 1px solid ${theme.border};
      font-weight: 600;
    }
  `;
  
  const contentStyle = css.resolve`
    .content {
      padding: 20px;
      background: ${theme.contentBg};
      color: ${theme.contentText};
      min-height: 200px;
    }
  `;
  
  const buttonStyle = css.resolve`
    .button {
      background: ${isActive ? theme.primary : theme.secondary};
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 16px;
      transition: opacity 0.2s;
    }
    .button:hover {
      opacity: 0.9;
    }
    .button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  `;
  
  return (
    <div>
      <div className={headerStyle.className}>
        Component Header
      </div>
      <div className={contentStyle.className}>
        <p>Component content goes here</p>
        <button 
          className={buttonStyle.className}
          disabled={!isActive}
        >
          {isActive ? 'Active' : 'Inactive'}
        </button>
      </div>
      {headerStyle.styles}
      {contentStyle.styles}
      {buttonStyle.styles}
    </div>
  );
}

Macro vs Regular styled-jsx/css

Comparison between macro and regular styled-jsx/css usage patterns.

Regular styled-jsx/css (requires babel plugin):

// .babelrc
{
  "plugins": ["styled-jsx/babel"]
}

// Component
import css from 'styled-jsx/css';

const { className, styles } = css.resolve`
  .button { background: blue; }
`;

Macro version (only requires babel-plugin-macros):

// .babelrc  
{
  "plugins": ["babel-plugin-macros"]
}

// Component
import { resolve } from 'styled-jsx/macro';
// OR
import css from 'styled-jsx/macro';

const { className, styles } = resolve`
  .button { background: blue; }
`;
// OR
const { className, styles } = css.resolve`
  .button { background: blue; }
`;

Migration from css.resolve to Macro

Step-by-step migration guide from regular styled-jsx/css to macro version.

Before (styled-jsx/css):

import css from 'styled-jsx/css';

function Component() {
  const { className, styles } = css.resolve`
    .element {
      color: red;
      padding: 10px;
    }
  `;
  
  return (
    <div>
      <span className={className}>Text</span>
      {styles}
    </div>
  );
}

After (macro):

// Option 1: Named import
import { resolve } from 'styled-jsx/macro';

function Component() {
  const { className, styles } = resolve`
    .element {
      color: red;
      padding: 10px;
    }
  `;
  
  return (
    <div>
      <span className={className}>Text</span>
      {styles}
    </div>
  );
}

// Option 2: Default import with member expression
import css from 'styled-jsx/macro';

function Component() {
  const { className, styles } = css.resolve`
    .element {
      color: red;
      padding: 10px;
    }
  `;
  
  return (
    <div>
      <span className={className}>Text</span>
      {styles}
    </div>
  );
}

Macro Configuration

Babel plugin macros configuration options and advanced usage.

babel-plugin-macros configuration (optional):

// babel-plugin-macros.config.js
module.exports = {
  'styled-jsx': {
    // Macro-specific options can be configured here
    optimizeForSpeed: process.env.NODE_ENV === 'production',
    sourceMaps: process.env.NODE_ENV !== 'production'
  }
};

Usage with Create React App:

// No additional babel configuration needed
// Create React App includes babel-plugin-macros by default

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

function CRAComponent() {
  const { className, styles } = resolve`
    .cra-component {
      background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
      color: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
  `;
  
  return (
    <div>
      <div className={className}>
        This works in Create React App without ejecting!
      </div>
      {styles}
    </div>
  );
}

Integration with TypeScript:

// Works with TypeScript out of the box
import { resolve } from 'styled-jsx/macro';

interface ThemeProps {
  primary: string;
  secondary: string;
}

function TypeScriptMacroComponent({ theme }: { theme: ThemeProps }) {
  const { className, styles } = resolve`
    .themed {
      background: ${theme.primary};
      color: ${theme.secondary};
      padding: 16px;
      border-radius: 4px;
    }
  `;
  
  return (
    <div>
      <div className={className}>
        TypeScript + Macro = ❤️
      </div>
      {styles}
    </div>
  );
}

Install with Tessl CLI