What is styled-jsx/css resolve?

It is a tool to create a scoped CSS block that targets nested children from a parent, returning a unique scope class and a style block to apply without leaking to the rest of the page.

When should I prefer resolve over :global?

Use resolve when you need to style a specific nested child while preserving encapsulation. Use :global for narrowly scoped exceptions when a child cannot be modified or when a quick override is required outside the normal scope.

Do I need to modify the child to use resolve?

Not always. You apply the generated scope class to the parent and target the child with its className inside the resolve block. If the child’s markup cannot be changed, consider a narrow :global override as a fallback.

styled-jsx-resolve

npx machina-cli add skill andireuter/skills-webapp/styled-jsx-resolve --openclaw

Files (1)

SKILL.md

897 B

styled-jsx resolve Skill

When a parent must style nested child components without leaking global CSS, use styled-jsx/css "resolve".

Rules

Prefer passing props/variants to the child first.
If the child is third-party or cannot be changed, prefer :global(...) in a narrow way.
Use resolve only when it materially improves scoping and maintainability.

Output expectations

Show the parent code using resolve tags from styled-jsx/css.
Clearly indicate the scope class returned by resolve and where it is applied.
Add a brief test or story demonstrating the styling effect (as feasible).

Source

git clone https://github.com/andireuter/skills-webapp/blob/main/skills/styled-jsx-resolve/SKILL.mdView on GitHub

Overview

styled-jsx-resolve lets a parent style nested child components without leaking global CSS. It uses styled-jsx/css resolve to generate a scope class that you apply to the parent and target child classNames, preserving encapsulation even when styling a child’s className.

How This Skill Works

You import css from 'styled-jsx/css' and create a resolve block with css.resolve`...`. The resolver returns an object with className and styles. Apply the returned className to the parent (and relevant children) and render the accompanying <style jsx>{styles}</style> so the generated CSS stays scoped to that parent. Inside the resolve block, target the child’s className to apply styles without leaking to siblings or global CSS.

When to Use It

When you need to style a nested child without affecting global CSS
When the child is third-party or not easily changeable and you must scope changes locally
When you must target a specific child component’s className from the parent
When prop/variant-based styling is not feasible or would require invasive changes
When you want a narrowly scoped, maintainable CSS scope that remains encapsulated

Quick Start

Step 1: import css from 'styled-jsx/css' and create a resolve block with css.resolve`...`
Step 2: apply the returned className to the parent (and relevant child elements) and include <style jsx>{styles}</style>
Step 3: ensure your child components use the targeted classNames inside the resolve block (e.g., className="child"), so styles apply within the scoped area

Best Practices

Prefer passing props/variants to the child first and use resolve only if it materially improves scoping
Use resolve narrowly to the smallest necessary scope to avoid deep coupling
Clearly indicate and document the scope class returned by resolve and where it is applied
Include a brief test or story that demonstrates the styling effect
Avoid overusing resolve; reserve it for cases where the child cannot be styled via props or global CSS

Example Use Cases

Parent Card component styles an internal Button without leaking styles by applying a resolve scope to the Card and targeting .cta from the child
Styling a third-party Modal's internal title and close button without editing the modal code, using a narrowly scoped resolve block
Targeting a nested Icon component's color by resolving a scope and applying to the Icon's className from the parent
Styling a nested Tooltip by resolving a scope on the host container and applying to the child’s className
Demonstrating the effect with a small story: a Card renders a ChildMenu; resolve scopes ensure only the Card’s menu items are styled

Frequently Asked Questions

Add this skill to your agents