Import from:
1import { styled } from "@reface/recast";
Recast provides built-in CSS-in-JS solution for styling NodeProxies and components.
Basic Usage
1import { styled } from "@reface/styled";
2
3// Basic styled Template
4const Button = styled.button/*css*/ `
5 ​& {
6 ​ ​background: blue;
7 ​ ​color: white;
8 ​}
9
10 ​&:hover {
11 ​ ​background: darkblue;
12 ​}
13`;
14
15// Style existing Template
16const StyledDiv = styled(div)/*css*/ `
17 ​& {
18 ​ ​padding: 1rem;
19 ​ ​margin: 1rem;
20 ​}
21`;
22
23// Style Component that accepts class prop
24const Card = component(
25 ​(props: Props, children: Children) => div({ class: props.class })`${children}`
26);
27
28const StyledCard = styled(Card)/*css*/ `
29 ​& {
30 ​ ​border: 1px solid #eee;
31 ​ ​border-radius: 4px;
32 ​}
33`;
Style Composition
Combine and extend styles:
1// Extend any styled Template
2const PrimaryButton = styled(Button)/*css*/ `
3 ​& {
4 ​ ​background: green;
5 ​}
6`;
7
8// Extend Component
9const PrimaryCard = styled(Card)/*css*/ `
10 ​& {
11 ​ ​border-color: blue;
12 ​}
13`;
Plugin Integration
StyledPlugin handles style injection:
1import { RefaceComposer } from "@reface/recast";
2import { StyledPlugin } from "@reface/recast";
3
4const composer = new RefaceComposer();
5composer.use(new StyledPlugin());
6
7// Now styles will be automatically collected and injected
8const html = composer.render(Card`Content`);
9// <style>.s1a {...}</style>
10// <div class="s1a">Content</div>
Key Features
Universal Styling
Style any Template
Style any Component that accepts class
Consistent API across all types
Scoped Styles
Unique class names
No style conflicts
Automatic CSS injection
CSS Syntax
Full CSS support
Nested selectors
Pseudo-classes
Media queries
Performance
Style deduplication
Minimal runtime overhead
Optimized class generation