Styled Components

LogicStamp Context provides specialized support for CSS-in-JS libraries, including styled-components and Emotion, extracting styled component declarations and styling patterns.

Styled Components Detection

LogicStamp automatically detects CSS-in-JS usage using AST-based extraction for accurate pattern matching:

Library imports: Detects imports from styled-components, @emotion/styled, and @emotion/react
Styled syntax: Recognizes styled.div, styled(Component), styled('div'), and template literal patterns
Precise matching: Only matches styled-components/Emotion imports (avoids false positives from MUI's styled or custom functions)
Theme usage: Identifies theme provider and theme hook usage via AST traversal
CSS prop: Detects css prop usage (Emotion) in JSX attributes

What Gets Extracted

Styled component declarations are detected and extracted:

import styled from 'styled-components';

const Button = styled.button`
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;

  &:hover {
    background-color: #0056b3;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
`;

function MyComponent() {
  return <Button>Click me</Button>;
}

Extracted information:

Styled component names: Button
Base element or component: button (extracted from AST)
CSS properties used
Pseudo-selectors: :hover, :disabled

String Literal Styled Components

Styled components using string literals are also detected:

import styled from 'styled-components';

const Box = styled('div')`
  padding: 1rem;
  margin: 1rem;
`;

const Wrapper = styled("section")`
  max-width: 1200px;
  margin: 0 auto;
`;

Extracted:

String literal element names: div, section
Component declarations
Styling patterns

Styled Component Extensions

Extended styled components are detected:

import styled from 'styled-components';

const BaseButton = styled.button`
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

const PrimaryButton = styled(BaseButton)`
  background-color: #007bff;
  color: white;

  &:hover {
    background-color: #0056b3;
  }
`;

const SecondaryButton = styled(BaseButton)`
  background-color: #6c757d;
  color: white;

  &:hover {
    background-color: #545b62;
  }
`;

Extracted:

Component inheritance patterns
Extended component relationships
Variant component structures

Styled Component with Props

Props-based styling is detected:

import styled from 'styled-components';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

const Button = styled.button<ButtonProps>`
  padding: ${props => {
    switch (props.size) {
      case 'sm': return '8px 16px';
      case 'lg': return '16px 32px';
      default: return '12px 24px';
    }
  }};
  background-color: ${props => 
    props.variant === 'primary' ? '#007bff' : '#6c757d'
  };
  color: white;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

Extracted:

Props-based styling patterns
Conditional styling logic
Dynamic value generation

Theme Integration

Theme usage with styled-components is detected:

import styled, { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
  spacing: {
    sm: '8px',
    md: '16px',
    lg: '24px',
  },
};

const Button = styled.button`
  padding: ${props => props.theme.spacing.md};
  background-color: ${props => props.theme.colors.primary};
  color: white;
  border-radius: 4px;
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Click me</Button>
    </ThemeProvider>
  );
}

Extracted:

Theme provider usage
Theme access patterns (props.theme)
Theme structure (when detectable)

Emotion Styled

Emotion's styled API is also detected:

import styled from '@emotion/styled';

const Card = styled.div`
  padding: 24px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`;

const Title = styled.h2`
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
`;

Extracted:

Emotion styled components
Component declarations
Styling patterns

CSS Prop (Emotion)

Emotion's css prop is detected:

import { css } from '@emotion/react';

function MyComponent() {
  return (
    <div
      css={css`
        padding: 24px;
        background-color: white;
        border-radius: 8px;
      `}
    >
      Content
    </div>
  );
}

Extracted:

css prop usage
Inline CSS-in-JS styles
Template literal styles

Style Extraction

Style output shape: styled-components / Emotion data is under style.styleSources.styledComponents on the contract (see UIF contracts). Default --style-mode lean replaces the components array with componentCount. --style-mode full includes the sorted components array (capped in extraction). See Style mode: lean vs full.

When using stamp context --include-style, styled-components information is included.

Example (--style-mode full):

{
  "style": {
    "styleSources": {
      "styledComponents": {
        "components": ["button", "div", "section"],
        "usesTheme": true,
        "usesCssProp": false
      }
    },
    "summary": {
      "mode": "full",
      "sources": ["styled-components"]
    }
  }
}

Example (--style-mode lean, default):

{
  "style": {
    "styleSources": {
      "styledComponents": {
        "componentCount": 3,
        "usesTheme": true,
        "usesCssProp": false
      }
    },
    "summary": {
      "mode": "lean",
      "sources": ["styled-components"],
      "fullModeBytes": 180
    }
  }
}

Fields:

Full mode: components — array of base element/component names (e.g., "button", "div", "Button") from styled declarations, sorted and limited to 10
Lean mode: componentCount — number of styled targets (no name list)
usesTheme: Boolean when theme usage is detected (via props.theme, useTheme(), or theme references in template literals)
usesCssProp: Boolean when the css prop is used (Emotion)