# Inspect Output

> This skill should be used when the user asks to "inspect CSS output", "show generated CSS", "debug styles", "see what CSS is generated", "view layer structure", or wants to understand what CSS Seams produces for a component.

- Skill: `artmsilva/inspect-output` (Agent Skill)
- Install (CLI): `npx skillmds@latest add artmsilva/inspect-output`
- Raw SKILL.md: https://api.skillmd.com/api/skills/artmsilva/inspect-output/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: artmsilva (https://skillmd.com/u/artmsilva)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/artmsilva/inspect-output

---


# Inspect Seams CSS Output

Analyze and display the CSS output generated by Seams for components, including layer structure, scope rules, and variant styles.

## Quick Inspection

### Inspect a Single Component

To inspect the CSS output for a styled component:

1. Create a test file that imports the component
2. Use the core API to generate CSS
3. Print the output

```typescript
// inspect.ts
import { createStitches } from "@artmsilva/seams-core";

const { css, getCssText } = createStitches({
  // Your config here
});

// Define the component styles
const buttonStyles = css({
  backgroundColor: "$colors$primary",
  padding: "$space$2",
  variants: {
    size: {
      sm: { fontSize: "$fontSizes$sm" },
      lg: { fontSize: "$fontSizes$lg" },
    },
  },
});

// Trigger CSS generation
buttonStyles({ size: "sm" });
buttonStyles({ size: "lg" });

// Output the CSS
console.log(getCssText());
```

Run with:

```bash
npx tsx inspect.ts
```

### Inspect Build Output

After building, examine the generated CSS:

```bash
# For Next.js
cat .next/static/css/*.css | grep -A 50 "@layer stitches"

# For Vite
cat dist/assets/*.css | grep -A 50 "@layer stitches"

# Or find the stitches.css file
find dist -name "stitches.css" -exec cat {} \;
```

## Understanding the Output Structure

### Layer Order

CSS is organized into layers (lowest to highest specificity):

```css
@layer stitches.themed,    /* 1. Theme CSS variables */
       stitches.global,    /* 2. globalCss() styles */
       stitches.styled,    /* 3. Base component styles */
       stitches.onevar,    /* 4. Single variant styles */
       stitches.resonevar, /* 5. Responsive variant styles */
       stitches.allvar,    /* 6. Compound variant styles */
       stitches.inline; /* 7. css prop styles */
```

### Theme Layer (`stitches.themed`)

Contains CSS custom properties from theme:

```css
@layer stitches.themed {
  :root {
    --colors-primary: #0070f3;
    --colors-secondary: #ff0080;
    --space-1: 4px;
    --space-2: 8px;
  }

  /* Additional themes */
  .t-dark {
    --colors-primary: #79b8ff;
  }
}
```

### Styled Layer (`stitches.styled`)

Base component styles with @scope:

```css
@layer stitches.styled {
  @scope (.c-Button-abc123) {
    :scope {
      background-color: var(--colors-primary);
      padding: var(--space-2);
    }
  }
}
```

### Variant Layers

Single variants (`stitches.onevar`):

```css
@layer stitches.onevar {
  @scope (.c-Button-abc123-def456-size-sm) {
    :scope {
      font-size: var(--fontSizes-sm);
    }
  }
}
```

Responsive variants (`stitches.resonevar`):

```css
@layer stitches.resonevar {
  @scope (.c-Button-abc123-ghi789-size-lg) {
    :scope {
      @media (min-width: 768px) {
        font-size: var(--fontSizes-lg);
      }
    }
  }
}
```

Compound variants (`stitches.allvar`):

```css
@layer stitches.allvar {
  @scope (.c-Button-abc123-jkl012-cv) {
    :scope {
      /* styles when multiple variants match */
    }
  }
}
```

### Inline Layer (`stitches.inline`)

Styles from `css` prop:

```css
@layer stitches.inline {
  @scope (.c-Button-abc123-mno345-css) {
    :scope {
      margin-top: 20px;
    }
  }
}
```

## Atomic CSS Mode

When `atomic: true` is enabled, the output structure changes:

```css
/* Standard mode: one class per component */
@layer seams.styled {
  .c-Button-abc123 {
    background-color: var(--colors-primary);
    padding: var(--space-2);
    border-radius: 6px;
  }
}

/* Atomic mode: one class per property-value pair */
@layer seams.styled {
  .s-xyz {
    background-color: var(--colors-primary);
  }
  .s-abc {
    padding: var(--space-2);
  }
  .s-def {
    border-radius: 6px;
  }
}
```

In atomic mode:

- Component className = `c-Button s-xyz s-abc s-def` (identifier + atomic classes)
- Identical declarations across components share the same `s-*` class
- The `c-Button` class has no CSS rules — it's only for selector targeting
- Variant atomic classes go into `seams.onevar`/`seams.resonevar`/`seams.allvar` layers
- Pseudo-class atoms include the modifier: `.s-ghi:hover { color: red }`
- Media query atoms are wrapped: `@media (...) { .s-jkl { font-size: 18px } }`

### Inspecting Atomic Output

```typescript
import { createStitches } from "@artmsilva/seams-core";

const { css, getCssText } = createStitches({ atomic: true });

const button = css({
  color: "$primary",
  "&:hover": { color: "$primaryDark" },
});

button({ size: "sm" });
console.log(getCssText());
// Check for s-* classes and deduplication
```

## Debugging Specific Issues

### Why isn't my style applying?

Check the layer order. Higher layers override lower:

```bash
# Search for the property in output
grep -n "background-color" dist/stitches.css
```

If the same property appears in multiple layers, the highest layer wins.

### Why is my variant not working?

Verify the variant class is being generated:

```bash
# Look for variant-specific classes
grep "size-sm" dist/stitches.css
```

Check the component is receiving the variant class:

```tsx
const result = buttonStyles({ size: "sm" });
console.log(result.className); // Should include variant class
```

### Token not resolving?

Verify the token exists in themed layer:

```bash
grep "colors-primary" dist/stitches.css
```

Check token syntax uses `$`:

```typescript
// Correct
{
  color: "$colors$primary";
}

// Wrong
{
  color: "colors.primary";
}
{
  color: "var(--colors-primary)";
} // Works but bypasses theme system
```

## Programmatic Inspection

### Using the Plugin Common API

```typescript
import { analyzeSource, extractCss, generateFullCss } from "@artmsilva/seams-plugin-common";

const source = `
import { styled } from '@artmsilva/seams-react';

const Button = styled('button', {
  backgroundColor: '$colors$primary',
});
`;

// Step 1: Analyze
const analysis = analyzeSource(source, "component.tsx");
console.log("Usages found:", analysis.usages.length);

// Step 2: Extract
const extraction = extractCss(analysis, {});
console.log("Rules extracted:", extraction.rules.length);

// Step 3: Generate
const css = generateFullCss(extraction, {
  useScope: true,
  useLayers: true,
});
console.log("Generated CSS:\n", css);
```

### Inspecting Class Names

```typescript
import { toHash } from "@artmsilva/seams-core";

// See how class names are generated
const styleHash = toHash({ backgroundColor: "$colors$primary" });
console.log("Hash:", styleHash); // e.g., "abc123"
// Full class: c-ComponentName-abc123
```

## Visual Inspection in Browser

1. Open DevTools → Elements
2. Select a styled component
3. Look at applied classes (e.g., `c-Button-abc123`)
4. In Styles panel, see which layer each rule comes from
5. Check "Computed" tab to see final values

## Additional Resources

See `references/layer-specificity.md` for detailed layer behavior.