Skip to content
This repository was archived by the owner on Dec 28, 2022. It is now read-only.

Commit a7d4ff6

Browse files
iterpugoviterpugov
committed
CSS Exporter
1 parent c3ca0d9 commit a7d4ff6

16 files changed

+217
-43
lines changed

‎README.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,19 @@ Once you have run the exporter against your design system, you can start using t
2929
[Todo description]
3030

3131
```
32-
[Code]
32+
<!DOCTYPE html>
33+
<html>
34+
<head>
35+
<meta charset="utf-8">
36+
<title>Style import test</title>
37+
<style>
38+
@import ".build/index.css";
39+
</style>
40+
</head>
41+
<body>
42+
<p style="color: var(--colorContrast)">...</p>
43+
</body>
44+
</html>
3345
```
3446

3547

‎output.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
{
2424
"invoke": "typography.pr",
2525
"write_to": "typography.css"
26+
},
27+
{
28+
"invoke": "index-file.pr",
29+
"write_to": "index.css"
2630
}
2731
]
2832
}

‎src/main-renderers/index-file.pr‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import url(colors.css);
2+
@import url(measures.css);
3+
@import url(borders.css);
4+
@import url(gradients.css);
5+
@import url(shadows.css);
6+
@import url(typography.css);

‎src/main-renderers/reference-wrapper.pr‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{*
2+
Injectable blueprint which either uses token reference or rendered #body
3+
4+
Source data: Token Metadata and Payload, all types (https://developers.supernova.io/design-system-data/tokens)
5+
Note: Token is passed as `context` property because it is injected
6+
7+
{
8+
"context": {
9+
"id": string
10+
"name": string
11+
"description": string
12+
"tokenType": Depends on the token type
13+
"origin": ItemOrigin | null
14+
"value": Depends on the token type
15+
}
16+
}
17+
18+
19+
/* description */
20+
*}
21+
{[ if @compare.null(context.referencedToken) ]}
22+
{{#body}}
23+
{[else]}
24+
var(--{[ inject "rendered-name" context context.referencedToken /]}){[/]}

‎src/main-renderers/rendered-description.pr‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{*
2+
Injectable blueprint that represents token description
3+
4+
Source data: Token Metadata and Payload, all types (https://developers.supernova.io/design-system-data/tokens)
5+
Note: Token is passed as `context` property because it is injected
6+
7+
{
8+
"context": {
9+
"id": string
10+
"name": string
11+
"description": string
12+
"tokenType": Depends on the token type
13+
"origin": ItemOrigin | null
14+
"value": Depends on the token type
15+
}
16+
}
17+
18+
19+
Rendered as:
20+
21+
/* description */
22+
*}
23+
{[ if @boolean.not(@compare.empty(context.description)) ]}
24+
/* {{ context.description.replacing("*/", "* /") }} */
25+
{[/]}

‎src/main-renderers/rendered-name.pr‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,13 @@ Rendered as:
2727
{[ let tokenGroup = @ds.tokenGroupContainingTokenId(context.id) /]}
2828
{[ let prefix = "" /]}
2929
{[ switch context.tokenType ]}
30-
{[ case "Color" ]}
31-
{[ prefix = behavior.colorTokenPrefix /]}
32-
{[ case "Typography" ]}
33-
{[ prefix = behavior.typographyTokenPrefix /]}
34-
{[ case "Shadow" ]}
35-
{[ prefix = behavior.shadowTokenPrefix /]}
36-
{[ case "Border" ]}
37-
{[ prefix = behavior.borderTokenPrefix /]}
38-
{[ case "Measure" ]}
39-
{[ prefix = behavior.measureTokenPrefix /]}
40-
{[ case "Gradient" ]}
41-
{[ prefix = behavior.gradientTokenPrefix /]}
42-
{[ default ]}
43-
{[ prefix = "" /]}
30+
{[ case "Color" ]}{[ prefix = behavior.colorTokenPrefix /]}
31+
{[ case "Typography" ]}{[ prefix = behavior.typographyTokenPrefix /]}
32+
{[ case "Shadow" ]}{[ prefix = behavior.shadowTokenPrefix /]}
33+
{[ case "Border" ]}{[ prefix = behavior.borderTokenPrefix /]}
34+
{[ case "Measure" ]}{[ prefix = behavior.measureTokenPrefix /]}
35+
{[ case "Gradient" ]}{[ prefix = behavior.gradientTokenPrefix /]}
36+
{[ default ]}{[ prefix = "" /]}
4437
{[/]}
4538
{[ let tokenName = @js.readableVariableName(context, tokenGroup, prefix) /]}
4639
{{ tokenName }}

‎src/main-renderers/rendered-token-class.pr‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{*
2+
3+
Injectable blueprint that represents full token as key: value to be used inside .class declarations.
4+
5+
Source data: Token Metadata and Payload, all types (https://developers.supernova.io/design-system-data/tokens)
6+
Note: Token is passed as `context` property because it is injected
7+
8+
{
9+
"context": {
10+
"id": string
11+
"name": string
12+
"description": string
13+
"tokenType": Depends on the token type
14+
"origin": ItemOrigin | null
15+
"value": Depends on the token type
16+
}
17+
}
18+
19+
20+
Rendered as:
21+
22+
.[name]{
23+
[value];
24+
}
25+
26+
*}
27+
{[ let token = context /]}
28+
{[ inject "rendered-description" context token /]}
29+
.{[ inject "rendered-name" context token /]} {
30+
{[ inject "rendered-value" context token /]}
31+
32+
}

‎src/main-renderers/rendered-token-var.pr‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,5 @@ Rendered as:
2323

2424
*}
2525
{[ let token = context /]}
26+
{[ inject "rendered-description" context token /]}
2627
--{[ inject "rendered-name" context token /]}: {[ inject "rendered-value" context token /]};

‎src/main-renderers/rendered-value.pr‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,10 @@ Rendered as:
2626
*}
2727
{[ let token = context /]}
2828
{[ switch context.tokenType ]}
29-
{[ case "Color" ]}
30-
{[ inject "rendered-color" context token /]}
31-
{[ case "Typography" ]}
32-
{[ inject "rendered-typography" context token /]}
33-
{[ case "Shadow" ]}
34-
{[ inject "rendered-shadow" context token /]}
35-
{[ case "Border" ]}
36-
{[ inject "rendered-border" context token /]}
37-
{[ case "Measure" ]}
38-
{[ inject "rendered-measure" context token /]}
39-
{[ case "Gradient" ]}
40-
{[ inject "rendered-gradient" context token /]}
29+
{[ case "Color" ]}{[ inject "rendered-color" context token.value /]}
30+
{[ case "Typography" ]}{[ inject "rendered-typography" context token.value /]}
31+
{[ case "Shadow" ]}{[ inject "rendered-shadow" context token.value /]}
32+
{[ case "Border" ]}{[ inject "rendered-border" context token.value /]}
33+
{[ case "Measure" ]}{[ inject "rendered-measure" context token.value /]}
34+
{[ case "Gradient" ]}{[ inject "rendered-gradient" context token.value /]}
4135
{[/]}

‎src/token-renderers/rendered-border.pr‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,6 @@ Rendered as:
3333
Xpx solid (rendered-color.pr);
3434

3535
*}
36-
Border
36+
{[ inject "reference-wrapper" context context ]}
37+
{[ inject "rendered-measure" context context.width /]} solid {[ inject "rendered-color" context context.color /]}
38+
{[/]}

0 commit comments

Comments
 (0)