From 84f7c0e1149c62a1674816481c563546c9eb2838 Mon Sep 17 00:00:00 2001
From: ice breaker <1324318532@qq.com>
Date: Thu, 16 Jan 2025 01:16:32 +0800
Subject: [PATCH] chore: add vscode config
---
.vscode/extensions.json | 3 +-
.vscode/settings.json | 37 ++++++++++++
.vscode/tailwind.json | 56 +++++++++++++++++++
.../components/IceButton/index.json.ts | 1 -
.../miniprogram/components/IceButton/index.ts | 32 ++++++++---
.../components/IceButton/index.wxml | 26 ++++-----
.../miniprogram/pages/index/index.wxml | 2 +-
7 files changed, 133 insertions(+), 24 deletions(-)
create mode 100644 .vscode/tailwind.json
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c741c186b..9c2568abf 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,7 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
- "stylelint.vscode-stylelint"
+ "stylelint.vscode-stylelint",
+ "bradlc.vscode-tailwindcss"
]
}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0a8cbbffa..eaf901346 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,43 @@
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
+ // https://github.com/tailwindlabs/tailwindcss/discussions/5258
+ "css.customData": [
+ ".vscode/tailwind.json"
+ ],
+ "tailwindCSS.experimental.classRegex": [
+ // https://github.com/lukeed/clsx?tab=readme-ov-file#tailwind-support
+ [
+ "clsx\\(([^)]*)\\)",
+ "(?:'|\"|`)([^']*)(?:'|\"|`)"
+ ],
+ [
+ "cn\\(([^)]*)\\)",
+ "(?:'|\"|`)([^']*)(?:'|\"|`)"
+ ],
+ // https://cva.style/docs/getting-started/installation
+ [
+ "cva\\(([^)]*)\\)",
+ "[\"'`]([^\"'`]*).*?[\"'`]"
+ ],
+ [
+ "cx\\(([^)]*)\\)",
+ "(?:'|\"|`)([^']*)(?:'|\"|`)"
+ ]
+ ],
+ "tailwindCSS.classAttributes": [
+ "class",
+ "className",
+ "ngClass",
+ "class:list",
+ "tw-class",
+ "tw-hover-class",
+ "hover-class"
+ ],
+ "tailwindCSS.includeLanguages": {
+ "wxml": "html",
+ "mpx": "html"
+ },
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
// close "style/* off"
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
new file mode 100644
index 000000000..62cfb282a
--- /dev/null
+++ b/.vscode/tailwind.json
@@ -0,0 +1,56 @@
+// https://github.com/tailwindlabs/tailwindcss/discussions/5258
+{
+ "version": 1.1,
+ "atDirectives": [
+ {
+ "name": "@tailwind",
+ "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+ "references": [
+ {
+ "name": "Tailwind Documentation",
+ "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+ }
+ ]
+ },
+ {
+ "name": "@apply",
+ "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.",
+ "references": [
+ {
+ "name": "Tailwind Documentation",
+ "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+ }
+ ]
+ },
+ {
+ "name": "@responsive",
+ "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",
+ "references": [
+ {
+ "name": "Tailwind Documentation",
+ "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+ }
+ ]
+ },
+ {
+ "name": "@screen",
+ "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",
+ "references": [
+ {
+ "name": "Tailwind Documentation",
+ "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+ }
+ ]
+ },
+ {
+ "name": "@variants",
+ "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",
+ "references": [
+ {
+ "name": "Tailwind Documentation",
+ "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+ }
+ ]
+ }
+ ]
+}
diff --git a/apps/vite-native-ts/miniprogram/components/IceButton/index.json.ts b/apps/vite-native-ts/miniprogram/components/IceButton/index.json.ts
index 5254a305b..5ac36b16d 100644
--- a/apps/vite-native-ts/miniprogram/components/IceButton/index.json.ts
+++ b/apps/vite-native-ts/miniprogram/components/IceButton/index.json.ts
@@ -2,6 +2,5 @@ import { defineComponentJson } from 'weapp-vite/json'
export default defineComponentJson({
component: true,
- styleIsolation: 'apply-shared',
usingComponents: {},
})
diff --git a/apps/vite-native-ts/miniprogram/components/IceButton/index.ts b/apps/vite-native-ts/miniprogram/components/IceButton/index.ts
index e55be9a00..97f0f4bf6 100644
--- a/apps/vite-native-ts/miniprogram/components/IceButton/index.ts
+++ b/apps/vite-native-ts/miniprogram/components/IceButton/index.ts
@@ -1,32 +1,48 @@
import { cn } from '@weapp-tailwindcss/merge'
+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'
+
Component({
- // options: {
- // virtualHost: true,
- // },
+ options: {
+ virtualHost: true,
+ styleIsolation: 'apply-shared',
+ },
+ externalClasses: ['class'],
properties: {
class: {
type: String,
value: '',
},
- myClass: {
+ twClass: {
+ type: String,
+ value: '',
+ },
+ hoverClass: {
+ type: String,
+ value: '',
+ },
+ twHoverClass: {
+ type: String,
+ value: '',
+ },
+ style: {
type: String,
value: '',
},
},
data: {
- 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',
+ mergedClass: defaultClass,
},
observers: {
- myClass(val) {
+ twClass(val) {
this.setData({
- customClass: cn(this.data.customClass, val),
+ mergedClass: cn(defaultClass, val),
})
},
},
lifetimes: {
ready() {
- console.log(this.properties)
+ console.log(this.properties, this.data)
},
},
// externalClasses: ['class'],
diff --git a/apps/vite-native-ts/miniprogram/components/IceButton/index.wxml b/apps/vite-native-ts/miniprogram/components/IceButton/index.wxml
index 6676101d4..97d714ea7 100644
--- a/apps/vite-native-ts/miniprogram/components/IceButton/index.wxml
+++ b/apps/vite-native-ts/miniprogram/components/IceButton/index.wxml
@@ -1,14 +1,14 @@
-
-
-
-
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/vite-native-ts/miniprogram/pages/index/index.wxml b/apps/vite-native-ts/miniprogram/pages/index/index.wxml
index 188c3ba0f..1c96a5c30 100644
--- a/apps/vite-native-ts/miniprogram/pages/index/index.wxml
+++ b/apps/vite-native-ts/miniprogram/pages/index/index.wxml
@@ -1,3 +1,3 @@
-
+
\ No newline at end of file