create-shopify-scss-autofill 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/bin/create-scss-kit.mjs
CHANGED
|
@@ -285,6 +285,14 @@ function main() {
|
|
|
285
285
|
console.log('[create-scss-kit] copied tools/scss-kit')
|
|
286
286
|
}
|
|
287
287
|
|
|
288
|
+
// Copy .vscode snippets.
|
|
289
|
+
const templateVscodeDir = path.join(packageRoot, 'template', '.vscode')
|
|
290
|
+
if (exists(templateVscodeDir)) {
|
|
291
|
+
const dstVscodeDir = path.join(targetDir, '.vscode')
|
|
292
|
+
copyDirRecursive(templateVscodeDir, dstVscodeDir, { force: args.force })
|
|
293
|
+
console.log('[create-scss-kit] copied .vscode/scss-kit.code-snippets')
|
|
294
|
+
}
|
|
295
|
+
|
|
288
296
|
// Write scss-kit.config.json if missing.
|
|
289
297
|
const cfgPath = path.join(targetDir, 'scss-kit.config.json')
|
|
290
298
|
if (exists(cfgPath) && !args.force) {
|
package/package.json
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "create-shopify-scss-autofill",
|
|
3
|
-
"version": "0.6.
|
|
4
|
-
"description": "Scaffold scss-kit (SCSS workflow + responsive autofill) for Shopify theme development.",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"shopify",
|
|
7
|
-
"themekit",
|
|
8
|
-
"scss",
|
|
9
|
-
"sass",
|
|
10
|
-
"vite",
|
|
11
|
-
"scaffold",
|
|
12
|
-
"cli"
|
|
13
|
-
],
|
|
14
|
-
"license": "MIT",
|
|
15
|
-
"type": "module",
|
|
16
|
-
"engines": {
|
|
17
|
-
"node": ">=18"
|
|
18
|
-
},
|
|
19
|
-
"bin": {
|
|
20
|
-
"create-shopify-scss-autofill": "./bin/create-scss-kit.mjs",
|
|
21
|
-
"create-scss-kit": "./bin/create-scss-kit.mjs"
|
|
22
|
-
},
|
|
23
|
-
"scripts": {
|
|
24
|
-
"sync-template": "node ./scripts/sync-template.mjs",
|
|
25
|
-
"prepack": "npm run sync-template"
|
|
26
|
-
},
|
|
27
|
-
"files": [
|
|
28
|
-
"bin/",
|
|
29
|
-
"scripts/",
|
|
30
|
-
"template/",
|
|
31
|
-
"README.md",
|
|
32
|
-
"package.json"
|
|
33
|
-
]
|
|
34
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "create-shopify-scss-autofill",
|
|
3
|
+
"version": "0.6.1",
|
|
4
|
+
"description": "Scaffold scss-kit (SCSS workflow + responsive autofill) for Shopify theme development.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"shopify",
|
|
7
|
+
"themekit",
|
|
8
|
+
"scss",
|
|
9
|
+
"sass",
|
|
10
|
+
"vite",
|
|
11
|
+
"scaffold",
|
|
12
|
+
"cli"
|
|
13
|
+
],
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"engines": {
|
|
17
|
+
"node": ">=18"
|
|
18
|
+
},
|
|
19
|
+
"bin": {
|
|
20
|
+
"create-shopify-scss-autofill": "./bin/create-scss-kit.mjs",
|
|
21
|
+
"create-scss-kit": "./bin/create-scss-kit.mjs"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"sync-template": "node ./scripts/sync-template.mjs",
|
|
25
|
+
"prepack": "npm run sync-template"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"bin/",
|
|
29
|
+
"scripts/",
|
|
30
|
+
"template/",
|
|
31
|
+
"README.md",
|
|
32
|
+
"package.json"
|
|
33
|
+
]
|
|
34
|
+
}
|
|
@@ -66,6 +66,18 @@ function main() {
|
|
|
66
66
|
console.log(
|
|
67
67
|
'[sync-template] synced tools/scss-kit -> template/tools/scss-kit'
|
|
68
68
|
)
|
|
69
|
+
|
|
70
|
+
// Sync .vscode/scss-kit.code-snippets
|
|
71
|
+
const vscodeSource = path.join(repoRoot, '.vscode', 'scss-kit.code-snippets')
|
|
72
|
+
if (exists(vscodeSource)) {
|
|
73
|
+
const vscodeTarget = path.join(packageRoot, 'template', '.vscode')
|
|
74
|
+
ensureDir(vscodeTarget)
|
|
75
|
+
fs.copyFileSync(
|
|
76
|
+
vscodeSource,
|
|
77
|
+
path.join(vscodeTarget, 'scss-kit.code-snippets')
|
|
78
|
+
)
|
|
79
|
+
console.log('[sync-template] synced .vscode/scss-kit.code-snippets')
|
|
80
|
+
}
|
|
69
81
|
}
|
|
70
82
|
|
|
71
83
|
main()
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
{
|
|
2
|
+
"r.resp — responsive clamp (font/element)": {
|
|
3
|
+
"prefix": ["r.resp", "resp"],
|
|
4
|
+
"scope": "scss",
|
|
5
|
+
"body": [
|
|
6
|
+
"r.resp(${1:pc}px, ${2:mobile}px, ${3|h1,h2,h3,h4,h5,h6,body,small,quote,button-text,nav-link,form-label,form-input,price-large,price-small,badge,breadcrumb,section-gap,card-gap,element-gap,icon|}${4:, ${5|h1,h2,h3,h4,h5,h6,body,small,quote,button-text,nav-link,form-label,form-input,price-large,price-small,badge,breadcrumb,section-gap,card-gap,element-gap,icon|}})"
|
|
7
|
+
],
|
|
8
|
+
"description": "r.resp(pc, mobile, desktopType[, mobileType]) — clamp with minimum floor. PC: clamp(min, vw, px); Mobile: autofill override via resp_mb()."
|
|
9
|
+
},
|
|
10
|
+
"r.resp (3 args)": {
|
|
11
|
+
"prefix": ["r.resp3", "resp3"],
|
|
12
|
+
"scope": "scss",
|
|
13
|
+
"body": [
|
|
14
|
+
"r.resp(${1:pc}px, ${2:mobile}px, ${3|h1,h2,h3,h4,h5,h6,body,small,quote,button-text,nav-link,form-label,form-input,price-large,price-small,badge,breadcrumb,section-gap,card-gap,element-gap,icon|})"
|
|
15
|
+
],
|
|
16
|
+
"description": "r.resp(pc, mobile, type) — same type for both desktop and mobile."
|
|
17
|
+
},
|
|
18
|
+
"r.vw — responsive vw (spacing)": {
|
|
19
|
+
"prefix": ["r.vw", "vw"],
|
|
20
|
+
"scope": "scss",
|
|
21
|
+
"body": [
|
|
22
|
+
"r.vw(${1:pc}px, ${2:mobile}px)"
|
|
23
|
+
],
|
|
24
|
+
"description": "r.vw(pc, mobile) — spacing-first. PC: min(vw, px); Mobile: pure vw via autofill."
|
|
25
|
+
},
|
|
26
|
+
"r.re — responsive non-dimension value": {
|
|
27
|
+
"prefix": ["r.re", "re"],
|
|
28
|
+
"scope": "scss",
|
|
29
|
+
"body": [
|
|
30
|
+
"r.re(${1:pc-value}, ${2:mobile-value})"
|
|
31
|
+
],
|
|
32
|
+
"description": "r.re(pc-val, mobile-val) — Non-dimension values (color, display, grid-cols-N, etc.). PC: returns pc-val; Mobile: autofill emits mobile-val."
|
|
33
|
+
},
|
|
34
|
+
"r.re grid-cols": {
|
|
35
|
+
"prefix": ["r.re-grid", "re-grid", "grid-cols"],
|
|
36
|
+
"scope": "scss",
|
|
37
|
+
"body": [
|
|
38
|
+
"r.re(grid-cols-${1:4}, grid-cols-${2:2})"
|
|
39
|
+
],
|
|
40
|
+
"description": "r.re(grid-cols-N, grid-cols-M) — Responsive grid columns. Expands to repeat(N, 1fr)."
|
|
41
|
+
},
|
|
42
|
+
"r.vw_pc — desktop vw with cap": {
|
|
43
|
+
"prefix": ["r.vw_pc", "vw_pc"],
|
|
44
|
+
"scope": "scss",
|
|
45
|
+
"body": [
|
|
46
|
+
"r.vw_pc(${1:pc}px)"
|
|
47
|
+
],
|
|
48
|
+
"description": "r.vw_pc(pc) — Desktop vw with upper bound: min(calc(n * var(--px-to-vw)), px)."
|
|
49
|
+
},
|
|
50
|
+
"r.vw_pc_raw — desktop pure vw": {
|
|
51
|
+
"prefix": ["r.vw_pc_raw", "vw_pc_raw"],
|
|
52
|
+
"scope": "scss",
|
|
53
|
+
"body": [
|
|
54
|
+
"r.vw_pc_raw(${1:pc}px)"
|
|
55
|
+
],
|
|
56
|
+
"description": "r.vw_pc_raw(pc) — Desktop pure vw, no upper bound cap."
|
|
57
|
+
},
|
|
58
|
+
"r.vw_mb — mobile pure vw": {
|
|
59
|
+
"prefix": ["r.vw_mb", "vw_mb"],
|
|
60
|
+
"scope": "scss",
|
|
61
|
+
"body": [
|
|
62
|
+
"r.vw_mb(${1:mobile}px)"
|
|
63
|
+
],
|
|
64
|
+
"description": "r.vw_mb(mobile) — Mobile pure vw: calc(n * var(--px-to-vw-mb))."
|
|
65
|
+
},
|
|
66
|
+
"r.resp_mb — mobile strategy selector": {
|
|
67
|
+
"prefix": ["r.resp_mb", "resp_mb"],
|
|
68
|
+
"scope": "scss",
|
|
69
|
+
"body": [
|
|
70
|
+
"r.resp_mb(${1:mobile}px, ${2|h1,h2,h3,h4,h5,h6,body,small,quote,button-text,nav-link,form-label,form-input,price-large,price-small,badge,breadcrumb,section-gap,card-gap,element-gap,icon|})"
|
|
71
|
+
],
|
|
72
|
+
"description": "r.resp_mb(mobile, type) — Selects min-first/max-first/dual-bound based on mobileClampMode."
|
|
73
|
+
},
|
|
74
|
+
"r.clamp_pc — desktop clamp formula": {
|
|
75
|
+
"prefix": ["r.clamp_pc", "clamp_pc"],
|
|
76
|
+
"scope": "scss",
|
|
77
|
+
"body": [
|
|
78
|
+
"r.clamp_pc(${1:pc}px, ${2:min})"
|
|
79
|
+
],
|
|
80
|
+
"description": "r.clamp_pc(pc, min) — clamp(min, calc(pc * var(--px-to-vw)), pc)."
|
|
81
|
+
},
|
|
82
|
+
"r.clamp_mb — mobile clamp formula": {
|
|
83
|
+
"prefix": ["r.clamp_mb", "clamp_mb"],
|
|
84
|
+
"scope": "scss",
|
|
85
|
+
"body": [
|
|
86
|
+
"r.clamp_mb(${1:mobile}px, ${2:min}${3:, ${4:max}})"
|
|
87
|
+
],
|
|
88
|
+
"description": "r.clamp_mb(mobile, min[, max]) — clamp(min, calc(mobile * var(--px-to-vw-mb)), max)."
|
|
89
|
+
},
|
|
90
|
+
"r.min_px — clamp minimum calculator": {
|
|
91
|
+
"prefix": ["r.min_px", "min_px"],
|
|
92
|
+
"scope": "scss",
|
|
93
|
+
"body": [
|
|
94
|
+
"r.min_px(${1:value}px, ${2|h1,h2,h3,h4,h5,h6,body,small,quote,button-text,nav-link,form-label,form-input,price-large,price-small,badge,breadcrumb,section-gap,card-gap,element-gap,icon|}${3:, ${4|mobile,desktop|}})"
|
|
95
|
+
],
|
|
96
|
+
"description": "r.min_px(value, type[, range]) — Calculate clamp minimum: max(designPx * coef, floor)."
|
|
97
|
+
},
|
|
98
|
+
"r.max_px — clamp maximum calculator": {
|
|
99
|
+
"prefix": ["r.max_px", "max_px"],
|
|
100
|
+
"scope": "scss",
|
|
101
|
+
"body": [
|
|
102
|
+
"r.max_px(${1:value}px, ${2|h1,h2,h3,h4,h5,h6,body,small,quote,button-text,nav-link,form-label,form-input,price-large,price-small,badge,breadcrumb,section-gap,card-gap,element-gap,icon|}${3:, ${4|mobile,desktop|}})"
|
|
103
|
+
],
|
|
104
|
+
"description": "r.max_px(value, type[, range]) — Calculate clamp maximum: min(designPx * maxCoef, ceiling)."
|
|
105
|
+
},
|
|
106
|
+
"scss-kit entry boilerplate": {
|
|
107
|
+
"prefix": ["scss-kit-entry", "entry-boilerplate"],
|
|
108
|
+
"scope": "scss",
|
|
109
|
+
"body": [
|
|
110
|
+
"@use \"./responsive\" as r;",
|
|
111
|
+
"@use \"./_responsive-autofill.${1:${TM_FILENAME_BASE}}.generated\" as auto;",
|
|
112
|
+
"",
|
|
113
|
+
"${0:// Your styles here}",
|
|
114
|
+
"",
|
|
115
|
+
"// 注意：请保持本行在文件末尾，避免自动生成的移动端代码覆盖顺序异常。",
|
|
116
|
+
"@include auto.responsive_autofill_overrides();"
|
|
117
|
+
],
|
|
118
|
+
"description": "Standard scss-kit entry file boilerplate with @use responsive + autofill include."
|
|
119
|
+
}
|
|
120
|
+
}
|