Skip to content

Commit 84f7c0e

Browse files
sonofmagicsonofmagic
committed
chore: add vscode config
1 parent 5187b9a commit 84f7c0e

File tree

7 files changed

+133
-24
lines changed

7 files changed

+133
-24
lines changed

‎.vscode/extensions.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"recommendations": [
33
"dbaeumer.vscode-eslint",
4-
"stylelint.vscode-stylelint"
4+
"stylelint.vscode-stylelint",
5+
"bradlc.vscode-tailwindcss"
56
]
67
}

‎.vscode/settings.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,43 @@
77
"source.fixAll.eslint": "explicit",
88
"source.organizeImports": "never"
99
},
10+
// https://github.com/tailwindlabs/tailwindcss/discussions/5258
11+
"css.customData": [
12+
".vscode/tailwind.json"
13+
],
14+
"tailwindCSS.experimental.classRegex": [
15+
// https://github.com/lukeed/clsx?tab=readme-ov-file#tailwind-support
16+
[
17+
"clsx\\(([^)]*)\\)",
18+
"(?:'|\"|`)([^']*)(?:'|\"|`)"
19+
],
20+
[
21+
"cn\\(([^)]*)\\)",
22+
"(?:'|\"|`)([^']*)(?:'|\"|`)"
23+
],
24+
// https://cva.style/docs/getting-started/installation
25+
[
26+
"cva\\(([^)]*)\\)",
27+
"[\"'`]([^\"'`]*).*?[\"'`]"
28+
],
29+
[
30+
"cx\\(([^)]*)\\)",
31+
"(?:'|\"|`)([^']*)(?:'|\"|`)"
32+
]
33+
],
34+
"tailwindCSS.classAttributes": [
35+
"class",
36+
"className",
37+
"ngClass",
38+
"class:list",
39+
"tw-class",
40+
"tw-hover-class",
41+
"hover-class"
42+
],
43+
"tailwindCSS.includeLanguages": {
44+
"wxml": "html",
45+
"mpx": "html"
46+
},
1047
// Silent the stylistic rules in you IDE, but still auto fix them
1148
"eslint.rules.customizations": [
1249
// close "style/* off"

‎.vscode/tailwind.json‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// https://github.com/tailwindlabs/tailwindcss/discussions/5258
2+
{
3+
"version": 1.1,
4+
"atDirectives": [
5+
{
6+
"name": "@tailwind",
7+
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
8+
"references": [
9+
{
10+
"name": "Tailwind Documentation",
11+
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
12+
}
13+
]
14+
},
15+
{
16+
"name": "@apply",
17+
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
18+
"references": [
19+
{
20+
"name": "Tailwind Documentation",
21+
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
22+
}
23+
]
24+
},
25+
{
26+
"name": "@responsive",
27+
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
28+
"references": [
29+
{
30+
"name": "Tailwind Documentation",
31+
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
32+
}
33+
]
34+
},
35+
{
36+
"name": "@screen",
37+
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
38+
"references": [
39+
{
40+
"name": "Tailwind Documentation",
41+
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
42+
}
43+
]
44+
},
45+
{
46+
"name": "@variants",
47+
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
48+
"references": [
49+
{
50+
"name": "Tailwind Documentation",
51+
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
52+
}
53+
]
54+
}
55+
]
56+
}

‎apps/vite-native-ts/miniprogram/components/IceButton/index.json.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@ import { defineComponentJson } from 'weapp-vite/json'
22

33
export default defineComponentJson({
44
component: true,
5-
styleIsolation: 'apply-shared',
65
usingComponents: {},
76
})

‎apps/vite-native-ts/miniprogram/components/IceButton/index.ts‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,48 @@
11
import { cn } from '@weapp-tailwindcss/merge'
22

3+
const defaultClass = 'weapp-reset-button px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80'
4+
35
Component({
4-
// options: {
5-
// virtualHost: true,
6-
// },
6+
options: {
7+
virtualHost: true,
8+
styleIsolation: 'apply-shared',
9+
},
10+
externalClasses: ['class'],
711
properties: {
812
class: {
913
type: String,
1014
value: '',
1115
},
12-
myClass: {
16+
twClass: {
17+
type: String,
18+
value: '',
19+
},
20+
hoverClass: {
21+
type: String,
22+
value: '',
23+
},
24+
twHoverClass: {
25+
type: String,
26+
value: '',
27+
},
28+
style: {
1329
type: String,
1430
value: '',
1531
},
1632
},
1733
data: {
18-
customClass: 'weapp-reset-button px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80',
34+
mergedClass: defaultClass,
1935
},
2036
observers: {
21-
myClass(val) {
37+
twClass(val) {
2238
this.setData({
23-
customClass: cn(this.data.customClass, val),
39+
mergedClass: cn(defaultClass, val),
2440
})
2541
},
2642
},
2743
lifetimes: {
2844
ready() {
29-
console.log(this.properties)
45+
console.log(this.properties, this.data)
3046
},
3147
},
3248
// externalClasses: ['class'],

‎apps/vite-native-ts/miniprogram/components/IceButton/index.wxml‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<button class="{{customClass}}">
2-
Primary
3-
</button>
4-
<view class="flex overflow-hidden bg-white border divide-x rounded-lg dark:bg-gray-900 dark:border-gray-700 dark:divide-gray-700 py-6">
5-
<button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
6-
Upload
7-
</button>
8-
<button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
9-
Drift
10-
</button>
11-
<button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
12-
View
13-
</button>
1+
<view>
2+
<button class="{{mergedClass}}" hover-class="bg-[#123456]">Primary</button>
3+
<view class="mt-4 flex overflow-hidden border divide-x rounded-lg dark:bg-gray-900 dark:border-gray-700 dark:divide-gray-700 py-6">
4+
<button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
5+
Upload
6+
</button>
7+
<button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
8+
Drift
9+
</button>
10+
<button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
11+
View
12+
</button>
13+
</view>
1414
</view>

‎apps/vite-native-ts/miniprogram/pages/index/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<view class="p-4">
2-
<IceButton class="bg-[#d72929]" my-class="bg-[orange]"></IceButton>
2+
<IceButton class="bg-[#d72929]" tw-class="bg-[orange]" hover-class="bg-[green]" tw-hover-class="bg-[pink]"></IceButton>
33
</view>

0 commit comments

Comments
 (0)