From 82e845dc25ee777b00a388355867837e7053399f Mon Sep 17 00:00:00 2001 From: Toly Date: Tue, 22 Oct 2024 17:25:26 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20tailwindcss=20support.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pnpm-lock.yaml | 101 +++++++++++++++++++++++-------- src/popup/package.json | 3 + src/popup/postcss.config.js | 6 ++ src/popup/src/assets/main.css | 4 ++ src/popup/src/views/HomeView.vue | 2 +- src/popup/tailwind.config.js | 8 +++ 6 files changed, 98 insertions(+), 26 deletions(-) create mode 100644 src/popup/postcss.config.js create mode 100644 src/popup/tailwind.config.js diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml index 43edf62..9a77cfa 100644 --- a/src/pnpm-lock.yaml +++ b/src/pnpm-lock.yaml @@ -81,6 +81,9 @@ importers: '@vue/tsconfig': specifier: ^0.5.1 version: 0.5.1 + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.47) cypress: specifier: ^13.15.0 version: 13.15.0 @@ -99,12 +102,18 @@ importers: npm-run-all2: specifier: ^6.2.3 version: 6.2.6 + postcss: + specifier: ^8.4.38 + version: 8.4.47 prettier: specifier: ^3.3.3 version: 3.3.3 start-server-and-test: specifier: ^2.0.8 version: 2.0.8 + tailwindcss: + specifier: ^3.4.14 + version: 3.4.14 typescript: specifier: ~5.5.4 version: 5.5.4 @@ -3636,6 +3645,11 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + tailwindcss@3.4.14: + resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==} + engines: {node: '>=14.0.0'} + hasBin: true + tailwindcss@3.4.6: resolution: {integrity: sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==} engines: {node: '>=14.0.0'} @@ -4373,7 +4387,7 @@ snapshots: '@babel/helper-validator-identifier': 7.24.7 chalk: 2.4.2 js-tokens: 4.0.0 - picocolors: 1.0.1 + picocolors: 1.1.1 '@babel/parser@7.24.8': dependencies: @@ -5217,7 +5231,7 @@ snapshots: '@vue/shared': 3.4.33 entities: 4.5.0 estree-walker: 2.0.2 - source-map-js: 1.2.0 + source-map-js: 1.2.1 '@vue/compiler-core@3.5.12': dependencies: @@ -5225,7 +5239,7 @@ snapshots: '@vue/shared': 3.5.12 entities: 4.5.0 estree-walker: 2.0.2 - source-map-js: 1.2.0 + source-map-js: 1.2.1 '@vue/compiler-dom@3.4.33': dependencies: @@ -5246,7 +5260,7 @@ snapshots: '@vue/shared': 3.4.33 estree-walker: 2.0.2 magic-string: 0.30.10 - postcss: 8.4.39 + postcss: 8.4.47 source-map-js: 1.2.0 '@vue/compiler-sfc@3.5.12': @@ -5574,6 +5588,16 @@ snapshots: postcss: 8.4.39 postcss-value-parser: 4.2.0 + autoprefixer@10.4.19(postcss@8.4.47): + dependencies: + browserslist: 4.23.2 + caniuse-lite: 1.0.30001643 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.0.1 + postcss: 8.4.47 + postcss-value-parser: 4.2.0 + available-typed-arrays@1.0.7: dependencies: possible-typed-array-names: 1.0.0 @@ -7348,28 +7372,28 @@ snapshots: possible-typed-array-names@1.0.0: {} - postcss-import@15.1.0(postcss@8.4.39): + postcss-import@15.1.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - postcss-js@4.0.1(postcss@8.4.39): + postcss-js@4.0.1(postcss@8.4.47): dependencies: camelcase-css: 2.0.1 - postcss: 8.4.39 + postcss: 8.4.47 - postcss-load-config@4.0.2(postcss@8.4.39): + postcss-load-config@4.0.2(postcss@8.4.47): dependencies: lilconfig: 3.1.2 yaml: 2.4.5 optionalDependencies: - postcss: 8.4.39 + postcss: 8.4.47 - postcss-nested@6.2.0(postcss@8.4.39): + postcss-nested@6.2.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 postcss-selector-parser: 6.1.1 postcss-selector-parser@6.1.1: @@ -7830,11 +7854,38 @@ snapshots: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.1 - postcss: 8.4.39 - postcss-import: 15.1.0(postcss@8.4.39) - postcss-js: 4.0.1(postcss@8.4.39) - postcss-load-config: 4.0.2(postcss@8.4.39) - postcss-nested: 6.2.0(postcss@8.4.39) + postcss: 8.4.47 + postcss-import: 15.1.0(postcss@8.4.47) + postcss-js: 4.0.1(postcss@8.4.47) + postcss-load-config: 4.0.2(postcss@8.4.47) + postcss-nested: 6.2.0(postcss@8.4.47) + postcss-selector-parser: 6.1.1 + resolve: 1.22.8 + sucrase: 3.35.0 + transitivePeerDependencies: + - ts-node + + tailwindcss@3.4.14: + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.6.0 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.2 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.21.6 + lilconfig: 2.1.0 + micromatch: 4.0.7 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.1.1 + postcss: 8.4.47 + postcss-import: 15.1.0(postcss@8.4.47) + postcss-js: 4.0.1(postcss@8.4.47) + postcss-load-config: 4.0.2(postcss@8.4.47) + postcss-nested: 6.2.0(postcss@8.4.47) postcss-selector-parser: 6.1.1 resolve: 1.22.8 sucrase: 3.35.0 @@ -7857,11 +7908,11 @@ snapshots: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.1 - postcss: 8.4.39 - postcss-import: 15.1.0(postcss@8.4.39) - postcss-js: 4.0.1(postcss@8.4.39) - postcss-load-config: 4.0.2(postcss@8.4.39) - postcss-nested: 6.2.0(postcss@8.4.39) + postcss: 8.4.47 + postcss-import: 15.1.0(postcss@8.4.47) + postcss-js: 4.0.1(postcss@8.4.47) + postcss-load-config: 4.0.2(postcss@8.4.47) + postcss-nested: 6.2.0(postcss@8.4.47) postcss-selector-parser: 6.1.1 resolve: 1.22.8 sucrase: 3.35.0 @@ -8027,7 +8078,7 @@ snapshots: dependencies: browserslist: 4.23.2 escalade: 3.1.2 - picocolors: 1.0.1 + picocolors: 1.1.1 uri-js@4.4.1: dependencies: @@ -8203,7 +8254,7 @@ snapshots: vite@5.3.4(@types/node@20.14.12): dependencies: esbuild: 0.21.5 - postcss: 8.4.39 + postcss: 8.4.47 rollup: 4.19.0 optionalDependencies: '@types/node': 20.14.12 @@ -8212,7 +8263,7 @@ snapshots: vite@5.3.4(@types/node@20.16.14): dependencies: esbuild: 0.21.5 - postcss: 8.4.39 + postcss: 8.4.47 rollup: 4.19.0 optionalDependencies: '@types/node': 20.16.14 diff --git a/src/popup/package.json b/src/popup/package.json index eebf7dc..f8403f2 100644 --- a/src/popup/package.json +++ b/src/popup/package.json @@ -34,14 +34,17 @@ "@vue/eslint-config-typescript": "^14.0.1", "@vue/test-utils": "^2.4.6", "@vue/tsconfig": "^0.5.1", + "autoprefixer": "^10.4.19", "cypress": "^13.15.0", "eslint": "^9.12.0", "eslint-plugin-cypress": "^4.0.0", "eslint-plugin-vue": "^9.29.0", "jsdom": "^25.0.1", "npm-run-all2": "^6.2.3", + "postcss": "^8.4.38", "prettier": "^3.3.3", "start-server-and-test": "^2.0.8", + "tailwindcss": "^3.4.14", "typescript": "~5.5.4", "vite": "^5.4.8", "vite-plugin-vue-devtools": "^7.4.6", diff --git a/src/popup/postcss.config.js b/src/popup/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/src/popup/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/popup/src/assets/main.css b/src/popup/src/assets/main.css index a152199..3cd6d11 100644 --- a/src/popup/src/assets/main.css +++ b/src/popup/src/assets/main.css @@ -1 +1,5 @@ @import './base.css'; + +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/popup/src/views/HomeView.vue b/src/popup/src/views/HomeView.vue index 2932fd5..2580c20 100644 --- a/src/popup/src/views/HomeView.vue +++ b/src/popup/src/views/HomeView.vue @@ -1,5 +1,5 @@ diff --git a/src/popup/tailwind.config.js b/src/popup/tailwind.config.js new file mode 100644 index 0000000..c1da0e5 --- /dev/null +++ b/src/popup/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +}