Skip to content

Commit 2ae945a

Browse files
yoli799480165yoli799480165
authored
add more converter to generator
1 parent 96e0416 commit 2ae945a

34 files changed

+25281
-14
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ For other examples, you can check out the example code.
6262
## Css Compiler
6363
The CssInCSharp is similar to less or sass. You can simply convert you style file into C# class, so that you can make full use of the C# language features to generate style content.
6464

65+
## Css Converter
66+
For those projects that are already using css or ts styles, you can use the [converter](./generators/README.md) provided by CssInCSharp to convert css or ts code into C# code, which improves style control and code reuse.
67+
68+
For details about the style migration of antd-v5, see the [Antd v5 Style Migration Document](./docs/migration.md).
69+
6570
## Benchmark
6671
```
6772

‎docs/migration.md‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,342 @@
1+
## Antd v5 Style Migration
2+
3+
- Clone the source code of react-antd
4+
5+
```bash
6+
git clone https://github.com/ant-design/ant-design.git
7+
```
8+
9+
After cloning, the directory tree is as follows:
10+
```
11+
ant-design/
12+
ant-design-blazor/
13+
├── cssincs.json
14+
```
15+
16+
`ant-design: ` is the source code of the React project.
17+
`ant-design-blazor: ` is the source code of the Blazor project.
18+
19+
**For stable version, please use the git tag version**
20+
21+
- Install the generator
22+
23+
```bash
24+
dotnet tool install -g CssInCSharp.CommandLine
25+
```
26+
27+
- Create profile
28+
29+
Create a cssincs.json under the root path of the blazor project, as follows:
30+
31+
```json
32+
{
33+
"Converter": "Ts",
34+
"CsOptions": {
35+
"Usings": [
36+
"System",
37+
"AntDesign",
38+
"CssInCSharp",
39+
"CssInCSharp.Colors",
40+
"static AntDesign.GlobalStyle",
41+
"static AntDesign.Theme",
42+
"static AntDesign.StyleUtil",
43+
"static AntDesign.PresetColors",
44+
"Keyframes = CssInCSharp.Keyframe"
45+
],
46+
"Namespace": "AntDesign.Styles",
47+
"NamePrefix": "{dir:../../}",
48+
"DefaultReturnType": "object",
49+
"DefaultParameterType": "object",
50+
"DefaultVariableType": "object",
51+
"DefaultExportType": "object",
52+
"DefaultExportClassName": "{dir:../../}Style",
53+
"DefaultExportMethodName": "{file}Default",
54+
"UsePascalCase": true,
55+
"UsePartialClass": true,
56+
"UseStaticMethod": true,
57+
"Replacements": [
58+
{
59+
"Pattern": "class ComponentToken",
60+
"Value": "class ComponentToken : TokenWithCommonCls"
61+
},
62+
{
63+
"Pattern": "FullToken(\\<\\w*\\>)?",
64+
"Value": "ComponentToken"
65+
},
66+
{
67+
"Pattern": "(?<!var) gen(\\w+)",
68+
"Value": " Gen$1"
69+
},
70+
{
71+
"Pattern": "prepare(\\w+)",
72+
"Value": "Prepare$1"
73+
},
74+
{
75+
"Pattern": "(?<!token.)Calc\\(",
76+
"Value": "calc("
77+
},
78+
{
79+
"Pattern": "_skip_check_",
80+
"Value": "SkipCheck"
81+
},
82+
{
83+
"Pattern": "= textEllipsis",
84+
"Value": "= TextEllipsis"
85+
},
86+
{
87+
"Pattern": "= AvatarSizeStyle",
88+
"Value": "= avatarSizeStyle"
89+
},
90+
{
91+
"Pattern": "= GetCompactBorderStyle",
92+
"Value": "= getCompactBorderStyle"
93+
},
94+
{
95+
"Pattern": "CSSObject\\[\\]",
96+
"Value": "CSSInterpolation[]"
97+
},
98+
{
99+
"Pattern": "ButtonVariantType variant",
100+
"Value": "string variant = null"
101+
},
102+
{
103+
"Pattern": "variant &&",
104+
"Value": "variant == null &&"
105+
},
106+
{
107+
"Pattern": "var genDisabledButtonStyle",
108+
"Value": "Func<ButtonToken, CSSObject> genDisabledButtonStyle"
109+
},
110+
{
111+
"Pattern": "= GenDisabledButtonStyle",
112+
"Value": "= genDisabledButtonStyle"
113+
},
114+
{
115+
"Pattern": "PresetColorKey",
116+
"Value": "string"
117+
},
118+
{
119+
"Pattern": "token\\[(\\$@\"[^\"]+\")\\]",
120+
"Value": "token[$1].ToString()"
121+
},
122+
{
123+
"Pattern": "Unitless = new GenOptions",
124+
"Value": "Unitless = new"
125+
},
126+
{
127+
"Pattern": "getCompactBorderStyle\\(\\)",
128+
"Value": "getCompactBorderStyle(false)"
129+
},
130+
{
131+
"Pattern": "CSSObject hoverStyle, CSSObject activeStyle",
132+
"Value": "CSSObject hoverStyle = null, CSSObject activeStyle = null"
133+
},
134+
{
135+
"Pattern": "getColumnsStyle;",
136+
"Value": "GetColumnsStyle;"
137+
}
138+
]
139+
},
140+
"Include": [
141+
{
142+
"Src": "../ant-design/components/**/style/*.ts",
143+
"Dest": "./components"
144+
}
145+
],
146+
"Exclude": [
147+
"../ant-design/components/style/*.ts",
148+
"../ant-design/components/qrcode/style/*.ts"
149+
],
150+
"TypeInferences": [
151+
{
152+
"RuleName": "ObjectTypeInfer_CSSObject",
153+
"Expression": "Kind == \"ObjectType\" && ((HasIndexer && Properties == null) || HasAny(\"margin\", \"width\", \"display\", \"position\", \"color\", \"direction\", \"flex\", \"background\"))",
154+
"Actions": {
155+
"OnSuccess": {
156+
"Name": "OutputExpression",
157+
"Context": {
158+
"Expression": "\"CSSObject\""
159+
}
160+
}
161+
}
162+
},
163+
{
164+
"RuleName": "ObjectTypeInfer_PropertySkip",
165+
"Expression": "Kind == \"ObjectType\" && HasKey(\"_skip_check_\")",
166+
"Actions": {
167+
"OnSuccess": {
168+
"Name": "OutputExpression",
169+
"Context": {
170+
"Expression": "\"PropertySkip\""
171+
}
172+
}
173+
}
174+
},
175+
{
176+
"RuleName": "ObjectTypeInfer_GenOptions",
177+
"Expression": "Kind == \"ObjectType\" && HasAny(\"deprecatedTokens\", \"unitless\")",
178+
"Actions": {
179+
"OnSuccess": {
180+
"Name": "OutputExpression",
181+
"Context": {
182+
"Expression": "\"GenOptions\""
183+
}
184+
}
185+
}
186+
},
187+
{
188+
"RuleName": "ReturnTypeInfer_CSSInterpolation_Size",
189+
"Expression": "Kind == \"ReturnType\" && FunctionName.StartsWith(\"genSize\")",
190+
"Actions": {
191+
"OnSuccess": {
192+
"Name": "OutputExpression",
193+
"Context": {
194+
"Expression": "\"CSSInterpolation\""
195+
}
196+
}
197+
}
198+
},
199+
{
200+
"RuleName": "ReturnTypeInfer_CSSObject",
201+
"Expression": "Kind == \"ReturnType\" && FunctionName.EndsWith(\"Style\")",
202+
"Actions": {
203+
"OnSuccess": {
204+
"Name": "OutputExpression",
205+
"Context": {
206+
"Expression": "\"CSSObject\""
207+
}
208+
}
209+
}
210+
},
211+
{
212+
"RuleName": "ReturnTypeInfer_Token",
213+
"Expression": "Kind == \"ReturnType\" && FunctionName.StartsWith(\"pre\") && FunctionName.EndsWith(\"Token\")",
214+
"Actions": {
215+
"OnSuccess": {
216+
"Name": "OutputExpression",
217+
"Context": {
218+
"Expression": "CsOptions.NamePrefix + \"Token\""
219+
}
220+
}
221+
}
222+
},
223+
{
224+
"RuleName": "ReturnTypeInfer_UseComponentStyleResult",
225+
"Expression": "Kind == \"ReturnType\" && FunctionName.EndsWith(\"indexDefault\")",
226+
"Actions": {
227+
"OnSuccess": {
228+
"Name": "OutputExpression",
229+
"Context": {
230+
"Expression": "\"UseComponentStyleResult\""
231+
}
232+
}
233+
}
234+
},
235+
{
236+
"RuleName": "ReturnTypeInfer_CSSInterpolation",
237+
"Expression": "Kind == \"ReturnType\" && (FunctionName == \"genStyleHooks\" || FunctionName == \"genSubStyleComponent\") && ValueType == \"array\"",
238+
"Actions": {
239+
"OnSuccess": {
240+
"Name": "OutputExpression",
241+
"Context": {
242+
"Expression": "\"CSSInterpolation\""
243+
}
244+
}
245+
}
246+
},
247+
{
248+
"RuleName": "ParameterTypeInfer_Token",
249+
"Expression": "Kind == \"ParameterType\" && Name.EndsWith(\"token\")",
250+
"Actions": {
251+
"OnSuccess": {
252+
"Name": "OutputExpression",
253+
"Context": {
254+
"Expression": "FunctionName.EndsWith(\"ComponentToken\") ? \"GlobalToken\" : CsOptions.NamePrefix + \"Token\""
255+
}
256+
}
257+
}
258+
},
259+
{
260+
"RuleName": "ParameterTypeInfer_CalcColor",
261+
"Expression": "Kind == \"ParameterType\" && FunctionName == \"genPresetColor\"",
262+
"Actions": {
263+
"OnSuccess": {
264+
"Name": "OutputExpression",
265+
"Context": {
266+
"Expression": "Name.Contains(\"binding\") ? \"CalcColor\" : \"string\""
267+
}
268+
}
269+
}
270+
},
271+
{
272+
"RuleName": "ParameterTypeInfer_StringColor",
273+
"Expression": "Kind == \"ParameterType\" && Name.Contains(\"Color\")",
274+
"Actions": {
275+
"OnSuccess": {
276+
"Name": "OutputExpression",
277+
"Context": {
278+
"Expression": "\"string\""
279+
}
280+
}
281+
}
282+
},
283+
{
284+
"RuleName": "PropertyTypeInfer_String",
285+
"Expression": "Kind == \"PropertyType\" && UnionType != null",
286+
"Actions": {
287+
"OnSuccess": {
288+
"Name": "OutputExpression",
289+
"Context": {
290+
"Expression": "\"CSSProperties\""
291+
}
292+
}
293+
}
294+
}
295+
]
296+
}
297+
```
298+
299+
Where `Include` and `Exclude` are relative to the path of the react project, if you clone with a different path, please modify this configuration.
300+
301+
- Execute Convert Command
302+
303+
Execute the following command at the root path of the blazor project.
304+
305+
```bash
306+
cssincs convert -c cssincs.json
307+
```
308+
309+
After the command is executed, all .ts files will be converted to .cs files. If `Dest` specifies a folder instead of a file, the final file will be generated according to the directory of the source file.
310+
311+
## Legacy ssues
312+
- Since C# doesn't support UnionType, like multiple inheritance or `Pick<T>`, `Omit<T>`, etc., are not possible.
313+
314+
To solve this problem, we plan to use a source generator to achieve the effect of Pick and Omit.
315+
316+
- Antd-Style library is not implemented
317+
318+
Sample code：
319+
320+
```cs
321+
var style = new
322+
{
323+
container = new CSSObject
324+
{
325+
MaxWidth = 400,
326+
Width = '100%',
327+
Height = 180,
328+
Display = 'flex',
329+
},
330+
card = css(@"
331+
margin-bottom: 8px;
332+
cursor: pointer;
333+
&:hover {
334+
color: #DDD;
335+
}
336+
")
337+
}
338+
339+
<div class="@style.card"></div>
340+
<div class="@cx('a-simple-create-style-demo-classname', styles.container)"></div>
341+
```
342+
To solve the above problems, you only need to implement a css() and cx() method. CssInCSharp already supports the serialization of a `string` or a `CSSObject`.

‎generators/CssInCSharp.Ast.Css/CssInCSharp.Ast.Css.csproj‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net9.0</TargetFramework>
5+
<ImplicitUsings>enable</ImplicitUsings>
6+
<Nullable>enable</Nullable>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<ProjectReference Include="..\CssInCSharp.Ast\CssInCSharp.Ast.csproj" />
11+
</ItemGroup>
12+
13+
</Project>

0 commit comments

Comments
 (0)