cloudcommerce 2.0.8 → 2.1.0

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.vscode/settings.json

@@ -16,9 +16,14 @@
   "tailwindCSS.experimental.configFile": {
     "packages/storefront/tailwind.config.cjs": "packages/**",
     "store/functions/ssr/tailwind.config.cjs": "store/**",
-    "ecomplus-stores/tia-sonia/functions/ssr/tailwind.config.cjs": "ecomplus-stores/tia-sonia/**",
     "ecomplus-stores/barra-doce/functions/ssr/tailwind.config.cjs": "ecomplus-stores/barra-doce/**"
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.run": "onSave"
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "astro",
+    "typescript",
+    "typescriptreact"
+  ]
 }

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.1.0](https://github.com/ecomplus/cloud-commerce/compare/v2.0.9...v2.1.0) (2024-01-26)
+
+
+### Features
+
+* **cli:** New `ci/bunny-config-base.sh` script to fix bunny.net CDN pull zone basic configs ([5e525ec](https://github.com/ecomplus/cloud-commerce/commit/5e525ecd94589221886421bede6ab8901ad3c46f))
+* **cli:** New `ci/bunny-prepare-ab.sh` script to purge cache and setup edge rules for A/B testing ([61ad030](https://github.com/ecomplus/cloud-commerce/commit/61ad030dd9285bd45a2f70e6d65b82576394e588))
+
+
+### Bug Fixes
+
+* **api:** Reduce default `cacheMaxAge` to 2min ([6353d6a](https://github.com/ecomplus/cloud-commerce/commit/6353d6a9a830437a4fbf49bf161ef67c0760c762))
+* **cli:** Ensure env vars with dotenv, set per-deploy cookies on Hosting response ([b9bc5e0](https://github.com/ecomplus/cloud-commerce/commit/b9bc5e0bf2a7b013854ef443e47cc955db7509dd))
+
+### [2.0.9](https://github.com/ecomplus/cloud-commerce/compare/v2.0.8...v2.0.9) (2024-01-20)
+
+
+### Bug Fixes
+
+* **storefront:** Bump Astro to latest v4.2.1 ([dd6b65a](https://github.com/ecomplus/cloud-commerce/commit/dd6b65a62ae585870f4cdf00496df2f2392cf96a))
+* **storefront:** Bump Vue to latest v3.4.15 ([46fd6f5](https://github.com/ecomplus/cloud-commerce/commit/46fd6f59beb95e85ef2ed4b0479f912cf8eb4fd8))
+* **storefront:** Stop `click` event propagation and prevent default (a) on `<CarouselControl>` ([94defd8](https://github.com/ecomplus/cloud-commerce/commit/94defd8b6e03d1821f605325c23d9c9f42cd9881))
+* **storefront:** Stop `click` event propagation on `<CarouselControl>` by default ([b44ff85](https://github.com/ecomplus/cloud-commerce/commit/b44ff85c4382ef912c434bf1f251134697156098))
+
 ### [2.0.8](https://github.com/ecomplus/cloud-commerce/compare/v2.0.7...v2.0.8) (2024-01-17)
 
 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 E-Com Club Softwares para E-commerce <ti@e-com.club>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/action.yml

@@ -96,6 +96,8 @@ inputs:
     description: 'App: Tiktok pixel ID'
   tiktok-access-token: 
     description: 'App: Tiktok access token'
+  public-dotenv:
+    description: 'Raw `public.env` file content to set additional public env vars'
 
 outputs: {}
 
@@ -134,7 +136,7 @@ runs:
 
     - if: steps.npm-cache-root.outputs.cache-hit != 'true'
       shell: bash
-      run: npm ci --omit=dev
+      run: npm ci --omit=dev --ignore-scripts
 
     - name: Get npm global directories
       id: npm-paths
@@ -175,14 +177,14 @@ runs:
       working-directory: functions/with-apps
       run: npm ci
 
-    - name: Set ECOM_STORE_ID and GITHUB_REF env
+    - name: Set ecom_store_id and git_branch env
       shell: bash
       working-directory: functions
       env:
         ECOM_STORE_ID: ${{ inputs.ecom-store-id }}
       run: |
         echo "ecom_store_id=${ECOM_STORE_ID:-$(cat config.json | jq -r '.storeId')}" >> $GITHUB_ENV
-        echo "git_branch=${GITHUB_REF#refs/heads/}" >> $GITHUB_ENV
+        echo "git_branch=${GITHUB_HEAD_REF:-${GITHUB_REF_NAME}}" >> $GITHUB_ENV
 
     - uses: dorny/paths-filter@v2.11.1
       id: changes
@@ -266,6 +268,7 @@ runs:
         PAGARMEV5_PUBLIC_KEY: ${{ inputs.pagarmev5-public-key }}
         TIKTOK_ACCESS_TOKEN: ${{ inputs.tiktok-access-token }}
         TIKTOK_PIXEL_ID: ${{ inputs.tiktok-pixel-id }}
+        PUBLIC_DOTENV: ${{ inputs.public-dotenv }}
       run: |
         export GAC_FILENAME=".gac-$RANDOM.json"
         echo $FIREBASE_SERVICE_ACCOUNT > $GAC_FILENAME
@@ -314,6 +317,9 @@ runs:
         TIKTOK_ACCESS_TOKEN=$TIKTOK_ACCESS_TOKEN
         TIKTOK_PIXEL_ID=$TIKTOK_PIXEL_ID
         " > functions/.env
+        if [[ -n "$PUBLIC_DOTENV" ]]; then
+          echo "$PUBLIC_DOTENV" >> functions/.env
+        fi
         if [ -z "$DEPLOY_CODEBASE" ]; then
           BUNNYNET_API_KEY=$BUNNYNET_API_KEY \
           GOOGLE_APPLICATION_CREDENTIALS=$GAC_FILENAME \
@@ -328,6 +334,21 @@ runs:
             npm run deploy -- --only functions:$DEPLOY_CODEBASE
           fi
         fi
+    
+    - if: github.event_name == 'push' && contains(github.event.head_commit.message, '[config bunny]')
+      name: Set bunny.net CDN pull zone basic configs
+      shell: bash
+      env:
+        ECOM_STORE_ID: ${{ env.ecom_store_id }}
+        GIT_BRANCH: ${{ env.git_branch }}
+        BUNNYNET_API_KEY: ${{ inputs.bunnynet-api-key }}
+      run: |
+        if [ ! -z "$BUNNYNET_API_KEY" ]; then
+          domain=$(cat functions/ssr/content/settings.json | jq -r '.domain')
+          if [ ! -z "$domain" ]; then
+            bash $GITHUB_ACTION_PATH/packages/cli/ci/bunny-config-base.sh $domain
+          fi
+        fi
 
     - if: github.event_name == 'pull_request'
       name: Build storefront static
@@ -345,7 +366,26 @@ runs:
 
     - if: github.event_name == 'pull_request'
       name: Deploy Firebase Hosting PR preview
+      id: deploy-preview
       uses: FirebaseExtended/action-hosting-deploy@v0
       with:
         repoToken: ${{ inputs.github-token }}
         firebaseServiceAccount: ${{ inputs.firebase-service-account }}
+        channelId: ${{ (startsWith(env.git_branch, 'main-') && env.git_branch) || null }}
+        expires: ${{ (startsWith(env.git_branch, 'main-') && '30d') || null }}
+
+    - if: ${{ github.event_name == 'pull_request' && startsWith(env.git_branch, 'main-') }}
+      name: Prepare bunny.net CDN for A/B testing
+      shell: bash
+      env:
+        ECOM_STORE_ID: ${{ env.ecom_store_id }}
+        GIT_BRANCH: ${{ env.git_branch }}
+        BUNNYNET_API_KEY: ${{ inputs.bunnynet-api-key }}
+        CHANNEL_URL: ${{ steps.deploy-preview.outputs.details_url }}
+      run: |
+        if [ ! -z "$BUNNYNET_API_KEY" ]; then
+          domain=$(cat functions/ssr/content/settings.json | jq -r '.domain')
+          if [ ! -z "$domain" ]; then
+            bash $GITHUB_ACTION_PATH/packages/cli/ci/bunny-prepare-ab.sh $domain $CHANNEL_URL
+          fi
+        fi

package/ecomplus-stores/barra-doce/.github/workflows/build-and-deploy.yml

@@ -75,3 +75,4 @@ jobs:
           pagarmev5-public-key: ${{ secrets.PAGARMEV5_PUBLIC_KEY }}
           tiktok-pixel-id: ${{ secrets.TIKTOK_PIXEL_ID }}
           tiktok-access-token: ${{ secrets.TIKTOK_ACCESS_TOKEN }}
+          public-dotenv: ${{ secrets.PUBLIC_DOTENV }}

package/ecomplus-stores/barra-doce/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/ecomplus-stores/barra-doce/.vscode/settings.json

@@ -11,5 +11,11 @@
   "css.lint.unknownAtRules": "ignore",
   "git.autofetch": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.run": "onSave"
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "astro",
+    "typescript",
+    "typescriptreact"
+  ]
 }

package/ecomplus-stores/barra-doce/functions/many/package.json

@@ -15,8 +15,8 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/feeds": "^2.0.7",
-    "@cloudcommerce/firebase": "^2.0.7",
-    "@cloudcommerce/passport": "^2.0.7"
+    "@cloudcommerce/feeds": "^2.0.9",
+    "@cloudcommerce/firebase": "^2.0.9",
+    "@cloudcommerce/passport": "^2.0.9"
   }
 }

package/ecomplus-stores/barra-doce/functions/ssr/.staged.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '../../node_modules/@cloudcommerce/eslint/storefront.staged.eslintrc.cjs',
+  rules: {
+    'import/no-extraneous-dependencies': 'off',
+  },
+};

package/ecomplus-stores/barra-doce/functions/ssr/package.json

@@ -10,22 +10,23 @@
     "shell": "firebase functions:shell",
     "start": "npm run shell",
     "deploy": "firebase deploy --only functions",
-    "logs": "firebase functions:log"
+    "logs": "firebase functions:log",
+    "lint:fix": "eslint -c ./.staged.eslintrc.cjs src/**/*.{ts,vue,astro} --fix"
   },
   "engines": {
     "node": "18"
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/api": "^2.0.7",
-    "@cloudcommerce/firebase": "^2.0.7",
-    "@cloudcommerce/ssr": "^2.0.7",
+    "@cloudcommerce/api": "^2.0.9",
+    "@cloudcommerce/firebase": "^2.0.9",
+    "@cloudcommerce/ssr": "^2.0.9",
     "@headlessui/vue": "^1.7.17"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^2.0.7",
-    "@cloudcommerce/storefront": "^2.0.7",
-    "@cloudcommerce/types": "^2.0.7",
+    "@cloudcommerce/i18n": "^2.0.9",
+    "@cloudcommerce/storefront": "^2.0.9",
+    "@cloudcommerce/types": "^2.0.9",
     "@iconify-json/mingcute": "^1.1.15",
     "photoswipe": "^5.4.3"
   }

package/ecomplus-stores/barra-doce/functions/ssr/src/components/AccountMenu.vue

@@ -62,7 +62,10 @@
           <MenuItem as="li">
             <div class="text-base-500 flex justify-center gap-2 p-2 text-base">
               <span v-for="(href, network) in socialNetworks" :key="network">
-                <SocialNetworkLink :network="network" class="hover:text-primary p-1" />
+                <SocialNetworkLink
+                  :network="network"
+                  class="hover:text-primary p-1"
+                />
               </span>
             </div>
           </MenuItem>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/AccountPage.vue

@@ -1,6 +1,6 @@
 <template>
-  <article class="from-secondary-700 to-secondary-950 flex
-    min-h-screen w-full flex-col justify-center bg-gradient-to-br">
+  <article class="from-secondary-700 to-secondary-950 flex min-h-screen w-full
+    flex-col justify-center bg-gradient-to-br">
     <div class="mx-auto p-4">
       <section class="ui-section text-center">
         <a href="/" class="text-base-200 hover:text-white">
@@ -27,7 +27,10 @@
             v-for="({ title, href }, i) in $settings.serviceLinks"
             :key="`s-${i}`"
           >
-            <ALink :href="href" class="ui-link text-base-200 hover:text-white">
+            <ALink
+              :href="href"
+              class="text-base-200 ui-link hover:text-white"
+            >
               {{ title }}
             </ALink>
           </li>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Banner.vue

@@ -28,7 +28,8 @@
       </Component>
       <p
         v-if="parsedSubtitle"
-        class="text-base-800 mt-4 text-lg font-medium uppercase md:mt-6 lg:text-xl"
+        class="text-base-800 mt-4 text-lg font-medium uppercase
+        md:mt-6 lg:text-xl"
       >
         {{ parsedSubtitle }}
       </p>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/BlogPosts.vue

@@ -1,7 +1,10 @@
 <template>
   <article class="mb-9 mt-6 md:mb-12 md:mt-8">
     <section class="ui-section">
-      <article v-if="featured" class="mb-9 flex flex-wrap gap-x-8 lg:flex-nowrap">
+      <article
+        v-if="featured"
+        class="mb-9 flex flex-wrap gap-x-8 lg:flex-nowrap"
+      >
         <a :href="`/posts/${featured.slug}`" class="w-full max-w-[600px]">
           <AImg
             v-if="featured.thumbnail"
@@ -26,7 +29,10 @@
             --- {{ featured.author }}
           </em>
           <div class="not-prose mt-5">
-            <a :href="`/posts/${featured.slug}`" class="ui-btn-lg ui-btn-primary">
+            <a
+              :href="`/posts/${featured.slug}`"
+              class="ui-btn-lg ui-btn-primary"
+            >
               <i class="i-chevron-right mr-1"></i>
               {{ $t.i19seeMore }}
             </a>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Breadcrumbs.vue

@@ -1,6 +1,9 @@
 <template>
   <section v-if="breadcrumbs.length > 1" class="ui-section-slim">
-    <nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm">
+    <nav
+      aria-label="Breadcrumb"
+      class="w-full overflow-hidden text-lg md:text-sm"
+    >
       <ol class="text-base-600 flex items-center gap-1">
         <li>
           <a href="/" class="hover:text-primary">

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CartItem.vue

@@ -5,7 +5,7 @@
         v-if="image"
         :picture="image"
         :alt="title"
-        class="h-20 w-20 object-cover"
+        class="size-20 object-cover"
       />
       <p class="text-base-700 group-hover:text-base-900 flex-auto py-2
         text-sm group-hover:underline">
@@ -18,8 +18,9 @@
       class="absolute right-0 top-0 p-2 opacity-70 hover:opacity-100"
       :aria-label="$t.i19remove"
     >
-      <span class="border-3 text-danger-800 border-danger-700/30 flex h-5 w-5 flex-col
-        justify-center rounded-full text-sm leading-none">
+      <span class="border-3 border-danger-700/30 text-danger-800 flex size-5
+        flex-col justify-center
+        rounded-full text-sm leading-none">
         <i class="i-close mx-auto my-0"></i>
       </span>
     </button>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CartSidebar.vue

@@ -49,7 +49,7 @@
       <a
         href="#"
         @click.prevent="emit('close')"
-        class="ui-link text-base-500 hover:text-base-700 text-sm"
+        class="text-base-500 ui-link hover:text-base-700 text-sm"
       >
         <i class="i-arrow-right-line mr-1 rotate-180"></i>
         {{ $t.i19continueShopping }}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CheckoutPage.vue

@@ -7,7 +7,7 @@
           <slot name="logo" />
         </a>
         <div class="flex items-center gap-2">
-          <i class="i-shield-check-solid bg-success-400 m-0 text-3xl"></i>
+          <i class="bg-success-400 i-shield-check-solid m-0 text-3xl"></i>
           <span class="text-base-600 text-base">
             {{ $t.i19safeBuy }}
           </span>
@@ -24,7 +24,7 @@
             v-for="({ title, href }, i) in $settings.serviceLinks"
             :key="`s-${i}`"
           >
-            <ALink :href="href" target="blank" class="ui-link text-base-700">
+            <ALink :href="href" target="blank" class="text-base-700 ui-link">
               {{ title }}
               <i class="bg-base-300 i-arrow-top-right-on-square ml-0.5"></i>
             </ALink>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ContentEntry.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="ui-section">
     <article class="prose">
-      <h1 class="ui-title not-prose my-4">{{ title }}</h1>
+      <h1 class="not-prose ui-title my-4">{{ title }}</h1>
       <ContentClearfix :html="html" />
     </article>
   </section>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/FooterStamps.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="ui-section">
-    <div class="flex flex-wrap items-start justify-between gap-5 lg:flex-nowrap">
-      <ul class="mx-auto flex items-center gap-x-6 gap-y-3
-        overflow-x-auto md:mx-0 md:flex-wrap md:overflow-hidden lg:gap-x-8">
+    <div class="flex flex-wrap items-start justify-between
+      gap-5 lg:flex-nowrap">
+      <ul class="mx-auto flex items-center gap-x-6 gap-y-3 overflow-x-auto
+        md:mx-0 md:flex-wrap md:overflow-hidden lg:gap-x-8">
         <li v-for="(stamp, i) in stamps" :key="i">
           <ALink :href="stamp.href?.replace('{domain}', $settings.domain || '')">
             <slot :name="`picture-${i}`" />
             <span v-if="!stamp.img" class="flex items-center">
               <span
                 v-if="stamp.icon"
-                class="[&>*]:from-success-200 [&>*]:to-success-700
-                mr-2 text-4xl [&>*]:bg-gradient-to-br"
+                class="[&>*]:from-success-200 [&>*]:to-success-700 mr-2
+                text-4xl [&>*]:bg-gradient-to-br"
               >
                 <i v-if="stamp.icon === 'lock'" class="i-lock-closed"></i>
                 <i v-else-if="stamp.icon === 'check'" class="i-check-badge"></i>
@@ -28,7 +29,8 @@
         </li>
       </ul>
       <div class="mx-auto flex flex-wrap items-center justify-end
-        gap-4 overflow-x-auto text-2xl md:mx-0 md:flex-nowrap md:overflow-hidden">
+        gap-4 overflow-x-auto text-2xl
+        md:mx-0 md:flex-nowrap md:overflow-hidden">
         <PaymentMethodFlag
           v-for="paymentMethod in $settings.paymentMethods"
           :key="paymentMethod"

package/ecomplus-stores/barra-doce/functions/ssr/src/components/HeroSlider.vue

@@ -19,17 +19,21 @@
         <div
           v-show="slides.length > 1"
           class="absolute bottom-5 right-5 z-10 flex w-screen
-          items-center justify-end xl:left-1/2 xl:right-auto xl:-ms-[640px] xl:max-w-screen-xl"
+          items-center justify-end
+          xl:left-1/2 xl:right-auto xl:-ms-[640px] xl:max-w-screen-xl"
         >
           <div
             class="text-primary relative h-10 w-20 rounded-full bg-white/50
             shadow-sm ring-1 ring-black/5 transition-opacity"
             :class="isMounted ? 'opacity-100' : 'opacity-20 [&>*]:cursor-wait'"
           >
-            <CarouselControl class="hover:bg-primary/10 h-10 w-10 rounded-full" is-prev>
+            <CarouselControl
+              class="hover:bg-primary/10 size-10 rounded-full"
+              is-prev
+            >
               <i class="i-arrow-right-line rotate-180"></i>
             </CarouselControl>
-            <CarouselControl class="hover:bg-primary/10 h-10 w-10 rounded-full">
+            <CarouselControl class="hover:bg-primary/10 size-10 rounded-full">
               <i class="i-arrow-right-line"></i>
             </CarouselControl>
           </div>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ImagesGallery.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="-mx-4 flex w-screen gap-3 sm:mx-0 sm:w-full md:h-[525px] 2xl:gap-5">
+  <div class="-mx-4 flex w-screen gap-3
+    sm:mx-0 sm:w-full md:h-[525px] 2xl:gap-5">
     <Carousel
       v-if="pictures.length > 1"
       axis="y"
@@ -22,8 +23,8 @@
           >
             <AImg
               :picture="pictures[index]"
-              class="ring-secondary/10 h-full w-full rounded border-2
-              object-cover opacity-90 transition-colors"
+              class="ring-secondary/10 size-full rounded border-2 object-cover
+              opacity-90 transition-colors"
               :class="index === activeIndex
                 ? 'border-secondary/50 ring-4 cursor-auto'
                 : 'border-transparent hover:border-primary'
@@ -36,10 +37,10 @@
         <span>
           <CarouselControl
             v-if="pictures.length > 6"
-            class="hover:bg-primary-300/60 text-primary
-            !bottom-3 !left-1/2 -ml-5 h-10 w-10
-            rounded-full bg-white/60 text-xl
-            opacity-0 shadow-sm ring-1 ring-black/5 group-hover:opacity-90"
+            class="text-primary hover:bg-primary-300/60
+            !bottom-3 !left-1/2 -ml-5 size-10 rounded-full
+            bg-white/60 text-xl opacity-0 shadow-sm ring-1
+            ring-black/5 group-hover:opacity-90"
           />
           <span class="absolute bottom-0 block h-2 w-full
             bg-gradient-to-b from-transparent to-white"></span>
@@ -51,7 +52,8 @@
         as="div"
         v-model:index="activeIndex"
         class="text-base-600 [&_i]:i-arrow-right-line mx-auto
-        h-full w-full max-w-[525px] [&>*]:h-full [&_i]:mx-2 [&_i]:text-2xl"
+        size-full max-w-[525px]
+        [&>*]:h-full [&_i]:mx-2 [&_i]:text-2xl"
         :class="isLoadingLightbox && 'opacity-80'"
         :id="psId"
       >
@@ -71,7 +73,7 @@
           <AImg
             :picture="picture"
             preferred-size="big"
-            class="h-full w-full rounded object-cover"
+            class="size-full rounded object-cover"
             :fetchpriority="i === 0 ? 'high' : 'low'"
             :loading="i === 0 ? 'eager' : 'lazy'"
           />
@@ -79,8 +81,8 @@
       </Carousel>
       <i
         v-if="isLoadingLightbox"
-        class="i-arrow-path bg-base-200 absolute
-        left-1/2 top-1/2 -ml-7 -mt-7 h-14 w-14 animate-spin"
+        class="bg-base-200 i-arrow-path absolute
+        left-1/2 top-1/2 -ml-7 -mt-7 size-14 animate-spin"
         :aria-label="$t.i19loading"
       ></i>
       <ul

package/ecomplus-stores/barra-doce/functions/ssr/src/components/LoginForm.vue

@@ -36,7 +36,7 @@
         <a
           v-show="!isSignUp && !isLinkSignInBlocked"
           href="?password"
-          class="ui-link text-base-500 text-right text-sm lowercase"
+          class="text-base-500 ui-link text-right text-sm lowercase"
           @click.prevent="isLinkSignIn = !isLinkSignIn"
         >
           {{ isLinkSignIn ? $t.i19enterWithPassword : $t.i19iForgotMyPassword }}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/PitchBar.vue

@@ -16,7 +16,7 @@
             <span
               v-if="parsedContents[i]"
               v-html="parsedContents[i]"
-              class="prose text-base-800 text-sm"
+              class="text-base-800 prose text-sm"
             ></span>
           </ALink>
         </li>
@@ -25,7 +25,10 @@
             v-show="countValidSlides > 1"
             class="text-base-400 text-xl leading-none"
           >
-            <CarouselControl class="bg-base-100 hover:text-base-700 pr-2" is-prev />
+            <CarouselControl
+              class="bg-base-100 hover:text-base-700 pr-2"
+              is-prev
+            />
             <CarouselControl class="bg-base-100 hover:text-base-700 pl-2" />
           </div>
         </template>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Prices.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="text-base-600
-      [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
+    [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
     :class="isBig ? 'text-lg' : null"
   >
     <span v-if="comparePrice" class="text-base-500 mr-1 text-[87%]">

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductCard.vue

@@ -11,26 +11,26 @@
     >
       <div class="aspect-square p-2
         transition-transform motion-safe:group-hover:scale-110">
-        <div class="relative h-full w-full overflow-hidden rounded bg-white
-          group-hover:rounded-none">
+        <div class="relative size-full overflow-hidden
+          rounded bg-white group-hover:rounded-none">
           <span v-if="images?.length" class="text-xs text-opacity-70">
             <AImg
               :picture="images[0]"
               :alt="title"
-              class="absolute left-0 top-0 block h-full w-full object-cover"
+              class="absolute left-0 top-0 block size-full object-cover"
             />
             <AImg
               v-if="images[1] && wasHoveredOnce"
               :picture="images[1]"
               :alt="title"
-              class="absolute left-0 top-0 z-10 block h-full w-full
-              object-cover text-transparent opacity-0
-              transition-opacity group-hover:opacity-100 motion-safe:duration-300"
+              class="absolute left-0 top-0 z-10 block size-full
+              object-cover text-transparent opacity-0 transition-opacity
+              group-hover:opacity-100 motion-safe:duration-300"
             />
           </span>
           <div
             v-else
-            class="from-base-50/20 to-base-100 h-full w-full bg-gradient-to-br"
+            class="from-base-50/20 to-base-100 size-full bg-gradient-to-br"
           />
         </div>
       </div>
@@ -38,8 +38,8 @@
         v-if="discountPercentage"
         class=":uno: bg-secondary/70 text-on-secondary absolute
         right-2 top-9 py-0.5
-        pl-3 pr-1.5 text-xs
-        transition-transform [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]
+        pl-3 pr-1.5 text-xs transition-transform
+        [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]
         group-hover:translate-x-2 group-hover:scale-110"
       >
         -<strong>{{ discountPercentage }}</strong>%
@@ -49,7 +49,7 @@
           <div v-if="isActive">
             <Prices :product="product" />
           </div>
-          <span v-else class="ui-badge bg-warning-100 text-warning-700">
+          <span v-else class="bg-warning-100 text-warning-700 ui-badge">
             {{ !isInStock ? $t.i19outOfStock : $t.i19inactive }}
           </span>
         </div>
@@ -65,9 +65,9 @@
         </component>
         <button
           v-if="isActive && !hasVariations"
-          class="lg:-top-13 primary absolute -top-12 left-1/2 z-10 -ml-7 h-14 w-14
-          rounded-full p-2 text-3xl
-          leading-none opacity-75 hover:opacity-100 lg:left-4 lg:ml-0"
+          class="lg:-top-13 primary absolute -top-12 left-1/2 z-10
+          -ml-7 size-14 rounded-full p-2 text-3xl leading-none
+          opacity-75 hover:opacity-100 lg:left-4 lg:ml-0"
           @click.stop.prevent="addProductToCart(product)"
           :aria-label="$t.i19addToCart"
         >

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductDetails.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="lg:sticky-header:translate-y-14 top-0 py-4
       transition-transform lg:sticky">
-      <h1 class="ui-text-brand text-secondary-900 text-lg">
+      <h1 class="text-secondary-900 ui-text-brand text-lg">
         {{ title }}
       </h1>
       <div v-if="isActive" class="mt-5">