Styling

 1import { styled } from "@reface/plugins/styled";
 2
 3const Button = styled.button`
 4  ​& {
 5  ​  ​background: blue;
 6  ​  ​color: white;
 7  ​  ​padding: 8px 16px;
 8  ​}
 9
10  ​&:hover {
11  ​  ​background: darkblue;
12  ​}
13`;
14
15// Usage
16<Button>Click me</Button>;

 1const BaseButton = styled.button`
 2  ​& {
 3  ​  ​padding: 8px 16px;
 4  ​  ​border: none;
 5  ​  ​border-radius: 4px;
 6  ​}
 7`;
 8
 9const PrimaryButton = styled(BaseButton)`
10  ​& {
11  ​  ​background: blue;
12  ​  ​color: white;
13  ​}
14`;
15
16const SecondaryButton = styled(BaseButton)`
17  ​& {
18  ​  ​background: gray;
19  ​  ​color: white;
20  ​}
21`;

 1const Card = styled.div`
 2  ​& {
 3  ​  ​padding: 16px;
 4  ​  ​border: 1px solid #eee;
 5  ​}
 6
 7  ​& h2 {
 8  ​  ​margin: 0;
 9  ​  ​color: #333;
10  ​}
11
12  ​& p {
13  ​  ​color: #666;
14  ​}
15
16  ​& .footer {
17  ​  ​margin-top: 16px;
18  ​  ​border-top: 1px solid #eee;
19  ​}
20`;

 1const Input = styled.input`
 2  ​& {
 3  ​  ​border: 1px solid #ccc;
 4  ​  ​padding: 8px;
 5  ​}
 6
 7  ​&:focus {
 8  ​  ​border-color: blue;
 9  ​  ​outline: none;
10  ​}
11
12  ​&::placeholder {
13  ​  ​color: #999;
14  ​}
15
16  ​&:disabled {
17  ​  ​background: #f5f5f5;
18  ​}
19`;

 1const Container = styled.div`
 2  ​& {
 3  ​  ​width: 100%;
 4  ​  ​padding: 16px;
 5  ​}
 6
 7  ​@media (min-width: 768px) {
 8  ​  ​& {
 9  ​  ​  ​width: 750px;
10  ​  ​  ​margin: 0 auto;
11  ​  ​}
12  ​}
13
14  ​@media (min-width: 1200px) {
15  ​  ​& {
16  ​  ​  ​width: 1170px;
17  ​  ​}
18  ​}
19`;

1// Unique class names are automatically generated
2const Button = styled.button`...`;
3// Renders as: <button class="s1a">...</button>
4
5const Card = styled.div`...`;
6// Renders as: <div class="s1b">...</div>

 1// Styles are automatically collected and added to <style> tag
 2const composer = new RefaceComposer();
 3composer.use(new StyledPlugin());
 4
 5const html = composer.render(
 6  ​<div>
 7  ​  ​<Button>Click me</Button>
 8  ​  ​<Card>Content</Card>
 9  ​</div>,
10);
11
12// Renders as:
13// <div>
14//   <button class="s1a">Click me</button>
15//   <div class="s1b">Content</div>
16// </div>
17// <style>
18//   .s1a { ... }
19//   .s1b { ... }
20// </style>