inspect-output

name	inspect-output
description	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.

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

// 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:

npx tsx inspect.ts

Inspect Build Output

After building, examine the generated CSS:

# 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):

@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:

@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:

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

Variant Layers

Single variants (stitches.onevar):

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

Responsive variants (stitches.resonevar):

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

Compound variants (stitches.allvar):

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

Inline Layer (stitches.inline)

Styles from css prop:

@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:

/* 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

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:

# 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:

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

Check the component is receiving the variant class:

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

Token not resolving?

Verify the token exists in themed layer:

grep "colors-primary" dist/stitches.css

Check token syntax uses $:

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

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

Programmatic Inspection

Using the Plugin Common API

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

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.