windi css

TODO.md

@@ -9,7 +9,7 @@ TODO
 * [x] eslint
 * [x] licence support
 * [x] composition API
-* [ ] WindyCss
+* [x] windi-css
 * [ ] fake rest api
 * [ ] i18n
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vapara-vue3",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -390,6 +390,19 @@
         }
       }
     },
+    "@windicss/plugin-utils": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.6.2.tgz",
+      "integrity": "sha512-qR2h/vDn3LZtL0cC3id9nxPwhYqCtkcwASs63sHTUOzLhxz+zkG4xR+odndbR6PTjrlTgBC7n5hLjpq0lxRksg==",
+      "dev": true,
+      "requires": {
+        "esbuild": "^0.8.52",
+        "esbuild-register": "^2.0.0",
+        "fast-glob": "^3.2.5",
+        "micromatch": "^4.0.2",
+        "windicss": "^2.2.0"
+      }
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -493,6 +506,12 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -668,6 +687,18 @@
       "integrity": "sha512-GIaYGdMukH58hu+lf07XWAeESBYFAsz8fXnrylHDCbBXKOSNtFmoYA8PhSeSF+3/qzeJ0VjzV9AkLURo5yfu3g==",
       "dev": true
     },
+    "esbuild-register": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-2.0.0.tgz",
+      "integrity": "sha512-98i1+7OnCURCbKaWw5wnY05e4v7uknFEER7LtVxi/lCs8U+sl6/LnITvfeoDLrsqxlA3O6BjxK8QqsirfYULfA==",
+      "dev": true,
+      "requires": {
+        "joycon": "^2.2.5",
+        "pirates": "^4.0.1",
+        "source-map-support": "^0.5.19",
+        "strip-json-comments": "^3.1.1"
+      }
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1162,6 +1193,12 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "joycon": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/joycon/-/joycon-2.2.5.tgz",
+      "integrity": "sha512-YqvUxoOcVPnCp0VU1/56f+iKSdvIRJYPznH22BdXV3xMk75SFXhWeJkZ8C9XxUWt1b5x2X1SxuFygW1U0FmkEQ==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1307,6 +1344,12 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "dev": true
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1369,6 +1412,15 @@
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
       "dev": true
     },
+    "pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "dev": true,
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
     "postcss": {
       "version": "8.2.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.6.tgz",
@@ -1638,6 +1690,16 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
@@ -1818,6 +1880,16 @@
         "rollup": "^2.38.5"
       }
     },
+    "vite-plugin-windicss": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.6.2.tgz",
+      "integrity": "sha512-V4WnjkxvriJSVQjswY+SrDKogOLNq1eG6dQw1wWcJRV+0QUz9pAGrMolSwed4d4MwSSbJrCA7If8xa+EFLUigw==",
+      "dev": true,
+      "requires": {
+        "@windicss/plugin-utils": "0.6.2",
+        "windicss": "^2.2.0"
+      }
+    },
     "vue": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.6.tgz",
@@ -1887,6 +1959,12 @@
         "isexe": "^2.0.0"
       }
     },
+    "windicss": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/windicss/-/windicss-2.2.1.tgz",
+      "integrity": "sha512-eMwRN0YQZ2ipL9IsS6YgA2D564BiyHr5c6jDbND6ZwmMl1DmhLDfC5cr5Tbfp7vUceUxFonLM/1tx8pyPdLEZQ==",
+      "dev": true
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -24,6 +24,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.6.0",
     "prettier": "^2.2.1",
-    "vite": "^2.0.4"
+    "vite": "^2.0.4",
+    "vite-plugin-windicss": "^0.6.2"
   }
 }

src/App.vue

@@ -1,10 +1,26 @@
 <template>
+  <div
+    class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6"
+  >
     <img alt="Vue logo" src="./assets/logo.png" width="150" />
-  <HelloWorld :msg="title" />
+    <div class="text-center space-y-2 sm:text-left">
+      <div class="space-y-0.5">
+        <p class="text-lg text-black font-semibold">{{ title }}</p>
+        <p class="text-gray-500 font-medium">{{ subtitle }}</p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6"
+  >
+    <HelloWorld msg="Votre panier" />
+  </div>
   <footer style="margin-top: 2em">
     {{ license }} :
     <a :href="repository" alt="repository">
+      <span class="bg-gray-200 hover:(bg-gray-100 text-red-300)">
         {{ version }}
+      </span>
     </a>
   </footer>
 </template>
@@ -22,7 +38,8 @@ export default {
       title: APP_TITLE, //Rk: note the 'eslint-disable no-undef' comment above
       version: APP_VERSION,
       repository: APP_REPOSITORY,
-      license: APP_LICENSE
+      license: APP_LICENSE,
+      subtitle: 'boutique en ligne G1'
     }
   }
 }

src/components/HelloWorld.vue

@@ -1,8 +1,17 @@
 <template>
   <h1>{{ msg }}</h1>
-  <button @click="count++">count is: {{ count }}</button>
-  <button @click="inc">inc</button>
-  <p>Hello World!</p>
+  <button
+    class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
+    @click="count++"
+  >
+    inc product {{ count }}
+  </button>
+  <button
+    class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
+    @click="inc"
+  >
+    inc
+  </button>
 </template>
 
 <script lang="ts">

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
+import 'windi.css'
 
 // define title and version from package.json
 document.title = APP_TITLE

vite.config.ts

@@ -1,9 +1,13 @@
 import pkg from './package.json'
 import { execSync } from 'child_process'
 import vue from '@vitejs/plugin-vue'
+import WindiCSS from 'vite-plugin-windicss'
 
 export default {
-    plugins: [vue()],
+    plugins: [
+        vue(),
+        WindiCSS()
+    ],
     define: {
         APP_TITLE: JSON.stringify(pkg.name),
         APP_VERSION: JSON.stringify(buildVersion()),