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

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.