Skip to content

Commit db64c2b

Browse files
sonofmagicsonofmagic
committed
chore: add @icestack/cli
1 parent 78426a7 commit db64c2b

File tree

14 files changed

+640
-47
lines changed

14 files changed

+640
-47
lines changed

‎examples/weapp/icestack.config.cjs‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,78 @@ const css = String.raw
77
*/
88
const config = {
99
mode: 'none',
10-
outdir: './my-ui'
10+
outdir: './my-ui',
11+
components: {
12+
// # Hello world sample
13+
// run `npx icestack build`
14+
// then see:
15+
// `my-ui/scss/components/button` - for scss use
16+
// `my-ui/css/components/button` - for tailwindcss use
17+
// `my-ui/css-resolved/components/button` - for direct usage
18+
// `my-ui/cva/button` - for cva component
19+
// `my-ui/js/components/button` - for tailwindcss/unocss plugin
20+
button: {
21+
selector: '.btn',
22+
schema: ({ selector }) => {
23+
// selector='.btn'
24+
return {
25+
defaults: {
26+
base: css`
27+
${selector} {
28+
/* @b */
29+
font-size: 50px;
30+
padding: 72px 120px;
31+
border-radius: 20px;
32+
background: #e5e7eb;
33+
}
34+
`,
35+
styled: css`
36+
${selector}-primary {
37+
/* @v type="primary" */
38+
background: blue;
39+
color: white;
40+
}
41+
${selector}-secondary {
42+
/* @v type="secondary" */
43+
background: yellow;
44+
}
45+
${selector}-disabled {
46+
/* @v disabled="true" */
47+
cursor: not-allowed;
48+
opacity: 0.15;
49+
}
50+
`,
51+
utils: css`
52+
${selector}-lg {
53+
/* @v size="lg" */
54+
font-size: 60px;
55+
padding: 90px 150px;
56+
border-radius: 30px;
57+
}
58+
${selector}-md {
59+
/* @v size="md" */
60+
font-size: 50px;
61+
padding: 72px 120px;
62+
border-radius: 20px;
63+
}
64+
${selector}-sm {
65+
/* @v size="sm" */
66+
font-size: 40px;
67+
padding: 60px 100px;
68+
border-radius: 16px;
69+
}
70+
${selector}-xs {
71+
/* @v size="xs" */
72+
font-size: 30px;
73+
padding: 50px 80px;
74+
border-radius: 12px;
75+
}
76+
`
77+
}
78+
}
79+
}
80+
}
81+
}
1182
}
1283

1384
module.exports = config

‎examples/weapp/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="./my-ui/css-resolved/components/button/base.css" />
9+
<link rel="stylesheet" href="./my-ui/css-resolved/components/button/styled.css" />
10+
<link rel="stylesheet" href="./my-ui/css-resolved/components/button/utils.css" />
11+
</head>
12+
13+
<body>
14+
<button class="btn">btn</button>
15+
<button class="btn btn-primary">btn</button>
16+
<button class="btn btn-secondary">btn</button>
17+
<button class="btn btn-disabled">btn</button>
18+
<button class="btn btn-lg">btn</button>
19+
<button class="btn btn-md">btn</button>
20+
<button class="btn btn-sm">btn</button>
21+
<button class="btn btn-xs">btn</button>
22+
</body>
23+
24+
</html>

‎examples/weapp/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,8 @@
1313
"devDependencies": {
1414
"@icestack/presets": "workspace:^",
1515
"@icestack/ui": "workspace:^"
16+
},
17+
"dependencies": {
18+
"@icestack/cva": "workspace:^"
1619
}
1720
}

‎packages/cli/src/config.ts‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import dedent from 'dedent'
2+
3+
export function createJsConfig({ outdir, format = 'cjs', mode = 'none' }: { outdir: string; format?: 'cjs' | 'ts'; mode?: 'none' | 'preset' }) {
4+
const p = './' + outdir
5+
const cssPrefix = `// install vscode-styled-components for css\`\` highlight
6+
// https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
7+
const css = String.raw`
8+
const helloWorldSample = `components: {
9+
// # Hello world sample
10+
// run \`npx icestack build\`
11+
// then see:
12+
// \`my-ui/scss/components/button\` - for scss use
13+
// \`my-ui/css/components/button\` - for tailwindcss use
14+
// \`my-ui/css-resolved/components/button\` - for direct usage
15+
// \`my-ui/cva/button\` - for cva component
16+
// \`my-ui/js/components/button\` - for tailwindcss/unocss plugin
17+
button: {
18+
selector: '.btn',
19+
schema: ({ selector }) => {
20+
// selector='.btn'
21+
return {
22+
defaults: {
23+
base: css\`
24+
\${selector} {
25+
/* @b */
26+
font-size: 50px;
27+
padding: 72px 120px;
28+
border-radius: 20px;
29+
background: #e5e7eb;
30+
}
31+
\`,
32+
styled: css\`
33+
\${selector}-primary {
34+
/* @v type="primary" */
35+
background: blue;
36+
color: white;
37+
}
38+
\${selector}-secondary {
39+
/* @v type="secondary" */
40+
background: yellow;
41+
}
42+
\${selector}-disabled {
43+
/* @v disabled="true" */
44+
cursor: not-allowed;
45+
opacity: 0.15;
46+
}
47+
\`,
48+
utils: css\`
49+
\${selector}-lg {
50+
/* @v size="lg" */
51+
font-size: 60px;
52+
padding: 90px 150px;
53+
border-radius: 30px;
54+
}
55+
\${selector}-md {
56+
/* @v size="md" */
57+
font-size: 50px;
58+
padding: 72px 120px;
59+
border-radius: 20px;
60+
}
61+
\${selector}-sm {
62+
/* @v size="sm" */
63+
font-size: 40px;
64+
padding: 60px 100px;
65+
border-radius: 16px;
66+
}
67+
\${selector}-xs {
68+
/* @v size="xs" */
69+
font-size: 30px;
70+
padding: 50px 80px;
71+
border-radius: 12px;
72+
}
73+
\`
74+
}
75+
}
76+
}
77+
}
78+
}`
79+
if (format === 'ts') {
80+
return {
81+
filename: 'icestack.config.ts',
82+
data: dedent`import { defineConfig } from '@icestack/ui'\n${cssPrefix}\n\nexport default defineConfig({
83+
mode: '${mode}',
84+
outdir: '${p}'${
85+
mode === 'none'
86+
? `,
87+
${helloWorldSample}`
88+
: ''
89+
}
90+
})\n`
91+
}
92+
}
93+
return {
94+
filename: 'icestack.config.cjs',
95+
data: dedent`${cssPrefix}\n\n/**\n * @type {import('@icestack/ui').Config}\n */\nconst config = {
96+
mode: '${mode}',
97+
outdir: '${p}'${
98+
mode === 'none'
99+
? `,
100+
${helloWorldSample}`
101+
: ''
102+
}
103+
}\n\n${'module.exports = config'}\n`
104+
}
105+
}

‎packages/cli/src/index.ts‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import fs from 'node:fs'
22
import path from 'node:path'
33
import { Command } from 'commander'
44
import chokidar from 'chokidar'
5-
import dedent from 'dedent'
65
import { loadSync } from '@icestack/config'
76
import { logger } from '@icestack/logger'
87
import { createContext } from '@icestack/core'
98
import { getModuleDependencies, touch } from '@icestack/shared'
9+
import { createJsConfig } from './config'
1010

1111
function touchTwConfig(filepath: string) {
1212
const dirname = path.dirname(filepath)
@@ -50,29 +50,6 @@ async function letUsBuild(options: { clean?: boolean; configFile?: string } = {}
5050
}
5151
const defaultOutdir = 'my-ui'
5252

53-
function createJsConfig({ outdir, format = 'cjs', mode = 'none' }: { outdir: string; format: 'cjs' | 'ts'; mode: 'none' | 'preset' }) {
54-
const p = './' + outdir
55-
const cssPrefix = dedent`// install vscode-styled-components for css\`\` highlight
56-
// https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
57-
const css = String.raw`
58-
if (format === 'ts') {
59-
return {
60-
filename: 'icestack.config.ts',
61-
data: dedent`import { defineConfig } from '@icestack/ui'\n${cssPrefix}\n\nexport default defineConfig({
62-
mode: '${mode}',
63-
outdir: '${p}'
64-
})\n`
65-
}
66-
}
67-
return {
68-
filename: 'icestack.config.cjs',
69-
data: dedent`${cssPrefix}\n\n/**\n * @type {import('@icestack/ui').Config}\n */\nconst config = {
70-
mode: '${mode}',
71-
outdir: '${p}'
72-
}\n\n${'module.exports = config'}\n`
73-
}
74-
}
75-
7653
cli
7754
.command('init')
7855
.description('init config')

0 commit comments

Comments
 (0)