Inspect Stitches RSC CSS Output
Analyze and display the CSS output generated by Stitches RSC 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:
- •Create a test file that imports the component
- •Use the core API to generate CSS
- •Print the output
typescript
// inspect.ts
import { createStitches } from '@stitches-rsc/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;
}
}
}
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 '@stitches-rsc/plugin-common';
const source = `
import { styled } from '@stitches-rsc/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 '@stitches-rsc/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
- •Open DevTools → Elements
- •Select a styled component
- •Look at applied classes (e.g.,
c-Button-abc123) - •In Styles panel, see which layer each rule comes from
- •Check "Computed" tab to see final values
Additional Resources
See references/layer-specificity.md for detailed layer behavior.