vitrify 0.17.4 → 0.17.6

package/dist/types/plugins/quasar.d.ts

@@ -1,16 +1,14 @@
 import type { VitrifyPlugin } from './index.js';
+import { type QuasarFonts, type QuasarComponents, type QuasarDirectives, type QuasarIconSets, type QuasarPlugins } from 'quasar';
 export interface QuasarConf {
-    ctx?: Record<string, any>;
-    css?: string[];
-    boot?: string[];
     framework: {
-        components?: string[];
-        directives?: string[];
-        plugins?: string[];
+        components?: (keyof QuasarComponents)[];
+        directives?: (keyof QuasarDirectives)[];
+        plugins?: (keyof QuasarPlugins)[];
         lang?: string;
-        iconSet?: string;
+        iconSet?: QuasarIconSets;
     };
-    extras?: string[];
+    extras?: (QuasarIconSets | QuasarFonts)[];
     disableSass?: boolean;
 }
 export declare const injectSsrContext: (html: string, ssrContext: Record<string, any>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.17.4",
+  "version": "0.17.6",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",

package/src/node/plugins/quasar/unocss/components/QAjaxBar.unocss.ts

@@ -4,20 +4,28 @@ import type { QuasarTheme } from '../theme.js'
 const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-loading-bar$/,
-    ([, c], { theme }) => `fixed z-9998 transition-transform bg-red`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-loading-bar'] ??
+      `fixed z-9998 transition-transform bg-red`
   ],
   [/^q-loading-bar--top$/, ([, c], { theme }) => `left-0 right-0 top-0 w-full`],
   [
     /^q-loading-bar--bottom$/,
-    ([, c], { theme }) => `left-0 right-0 bottom-0 w-full`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-loading-bar--bottom'] ??
+      `left-0 right-0 bottom-0 w-full`
   ],
   [
     /^q-loading-bar--right$/,
-    ([, c], { theme }) => `top-0 bottom-0 right-0 h-full`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-loading-bar--right'] ??
+      `top-0 bottom-0 right-0 h-full`
   ],
   [
     /^q-loading-bar--left$/,
-    ([, c], { theme }) => `top-0 bottom-0 left-0 h-full`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-loading-bar--left'] ??
+      `top-0 bottom-0 left-0 h-full`
   ]
 ]
 

package/src/node/plugins/quasar/unocss/components/QAvatar.unocss.ts

@@ -5,12 +5,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-avatar$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-avatar'] ??
       `relative align-middle inline-block rounded-[50%] text-[48px] h-[1em] w-[1em] [&_img:not(.q-icon):not(.q-img\\_\\_image)]:([border-radius:inherit] [height:inherit] [width:inherit])`
   ],
 
   [
     /^q-avatar__content$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-avatar__content'] ??
       `text-[0.5em] leading-[0.5em] [border-radius:inherit] [height:inherit] [width:inherit]`
   ],
 

package/src/node/plugins/quasar/unocss/components/QBadge.unocss.ts

@@ -5,6 +5,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-badge$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-badge'] ??
       `text-[#fff] bg-primary px-[6px] py-[2px] rounded-[4px] text-[12px] leading-none min-h-[12px] font-normal align-baseline`
   ],
 
@@ -12,12 +13,16 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [
     /^q-badge--multi-line$/,
-    ([, c], { theme }) => `break-all [word-wrap:break-word]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-badge--multi-line'] ??
+      `break-all [word-wrap:break-word]`
   ],
 
   [
     /^q-badge--floating$/,
-    ([, c], { theme }) => `absolute -top-[4px] -right-[3px] [cursor:inherit]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-badge--floating'] ??
+      `absolute -top-[4px] -right-[3px] [cursor:inherit]`
   ],
 
   [/^q-badge--transparent$/, ([, c], { theme }) => `opacity-80`],
@@ -25,6 +30,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-badge--outline$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-badge--outline'] ??
       `bg-transparent border-[1px] border-solid border-[currentColor]`
   ],
 

package/src/node/plugins/quasar/unocss/components/QBanner.unocss.ts

@@ -8,6 +8,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-banner__avatar$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-banner__avatar'] ??
       `min-w-1px! [&.q-avatar]:(text-46px) 
     [&.q-icon]:(text-40px) 
     [&:not(:empty)+.q-banner\\_\\_content]:(pl-16px)`
@@ -15,6 +16,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-banner__actions$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-banner__actions'] ??
       `[&.col-auto]:(pl-16px)
         [&.col-all_.q.btn-item]:(mt-4px mb-0 ml-4px mr-0)`
   ],
@@ -22,6 +24,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-banner--dense$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-banner--dense'] ??
       `min-h-32px p-8px
           [&_.q-banner\\_\\_avatar>.q-avatar,.q-banner--dense_.q-banner\\_\\_avatar>.q-icon]:(text-28px)
       [&_.q-banner\\_\\_avatar:not(:empty)+.q-banner\\_\\_content]:(pl-8px)

package/src/node/plugins/quasar/unocss/components/QBar.unocss.ts

@@ -4,7 +4,9 @@ import type { QuasarTheme } from '../theme.js'
 const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-bar$/,
-    ([, c], { theme }) => `bg-black op-20
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-bar'] ??
+      `bg-black op-20
     [&>.q-icon]:(ml-2px)
     [&>div]:(ml-8px)
     [&>div+.q-icon]:(ml-8px)
@@ -15,13 +17,17 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   ],
   [
     /^q-bar--standard$/,
-    ([, c], { theme }) => `px-12px py-0 h-32px text-18px
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-bar--standard'] ??
+      `px-12px py-0 h-32px text-18px
     [&>div]:(text-16px)
     [&_.q-btn]:(text-11px)`
   ],
   [
     /^q-bar--dense$/,
-    ([, c], { theme }) => `px-8px py-0 h-24px text-14px
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-bar--dense'] ??
+      `px-8px py-0 h-24px text-14px
     [&_.q-btn]:(text-8px)`
   ],
   [/^q-bar--dark$/, ([, c], { theme }) => `bg-white op-15`]

package/src/node/plugins/quasar/unocss/components/QBtn.unocss.ts

@@ -5,6 +5,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-btn$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn'] ??
       `items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline [color:inherit] bg-transparent font-medium uppercase text-center w-auto h-auto cursor-default px-[16px] py-[4px] min-h-[2.572em] [&_.q-icon]:(text-[1.715em]) [&_.q-spinner]:(text-[1.715em]) [&.disabled]:(!opacity-70) [&:before]:(content-empty block absolute left-[0] right-[0] top-[0] bottom-[0] [border-radius:inherit] [box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)])`
     // inline-flex flex-col
   ],
@@ -12,6 +13,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-btn--actionable$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--actionable'] ??
       `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)])`
   ],
 
@@ -22,12 +24,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-btn--outline$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--outline'] ??
       `!bg-transparent [&:before]:(border-[1px] border-solid border-[currentColor]) [&:before]:([box-shadow:none]) [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
   ],
 
   [
     /^q-btn--push$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--push'] ??
       `rounded-[7px] [&:before]:([border-bottom:3px_solid_rgba(0,_0,_0,_0.15)]) [&.q-btn--actionable]:([transition:transform_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--actionable:before]:([transition:border-width_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--actionable:active]:(translate-y-[2px]) [&.q-btn--actionable.q-btn--active]:(translate-y-[2px]) [&.q-btn--actionable:active:before]:(border-b-[0]) [&.q-btn--actionable.q-btn--active:before]:(border-b-[0])`
   ],
 
@@ -35,7 +39,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [
     /^q-btn--round$/,
-    ([, c], { theme }) => `rounded-[50%] p-0 min-w-[3em] min-h-[3em]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--round'] ??
+      `rounded-[50%] p-0 min-w-[3em] min-h-[3em]`
   ],
 
   [/^q-btn--square$/, ([, c], { theme }) => `rounded-none`],
@@ -43,29 +49,35 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-btn--flat$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--flat'] ??
       `[&:before]:([box-shadow:none]) [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
   ],
 
   [
     /^q-btn--unelevated$/,
-    ([, c], { theme }) => `[&:before]:([box-shadow:none])`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--unelevated'] ??
+      `[&:before]:([box-shadow:none])`
   ],
 
   [
     /^q-btn--dense$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--dense'] ??
       `p-[0.285em] min-h-[2em] [&.q-btn--round]:(p-0 min-h-[2.4em] min-w-[2.4em]) [&_.on-left]:(mr-[6px]) [&_.on-right]:(ml-[6px])`
   ],
 
   [
     /^q-btn--fab$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--fab'] ??
       `[&_.q-icon]:(text-[24px]) p-[16px] min-h-[56px] min-w-[56px] [&_.q-icon]:(m-auto)`
   ],
 
   [
     /^q-btn--fab-mini$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn--fab-mini'] ??
       `[&_.q-icon]:(text-[24px]) p-[8px] min-h-[40px] min-w-[40px]`
   ],
 
@@ -73,19 +85,24 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [
     /^q-btn__content--hidden$/,
-    ([, c], { theme }) => `opacity-0 pointer-events-none`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn__content--hidden'] ??
+      `opacity-0 pointer-events-none`
   ],
 
   [/^q-btn__progress$/, ([, c], { theme }) => `[border-radius:inherit] z-0`],
 
   [
     /^q-btn__progress-indicator$/,
-    ([, c], { theme }) => `-translate-x-full bg-[rgba(255,_255,_255,_0.25)]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn__progress-indicator'] ??
+      `-translate-x-full bg-[rgba(255,_255,_255,_0.25)]`
   ],
 
   [
     /^q-btn__progress--dark$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn__progress--dark'] ??
       `[&_.q-btn\\_\\_progress-indicator]:(bg-[rgba(0,_0,_0,_0.2)])`
   ]
 ]

package/src/node/plugins/quasar/unocss/components/QBtnDropdown.unocss.ts

@@ -14,11 +14,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   ],
   [
     /^q-btn-dropdown--simple$/,
-    ([, c], { theme }) => `[&+.q-btn-dropdown\\_\\_arrow]:(ml-8px)`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn-dropdown--simple'] ??
+      `[&+.q-btn-dropdown\\_\\_arrow]:(ml-8px)`
   ],
   [
     /^q-btn-dropdown__arrow$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn-dropdown__arrow'] ??
       `transition-property-transform transition-duration-280`
   ],
   [/^q-btn-dropdown--current$/, ([, c], { theme }) => `grow-1`]

package/src/node/plugins/quasar/unocss/components/QBtnGroup.unocss.ts

@@ -5,12 +5,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-btn-group$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn-group'] ??
       `rounded-[3px] [box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] align-middle [&_>_.q-btn-item]:([border-radius:inherit] self-stretch) [&_>_.q-btn-item:before]:([box-shadow:none]) [&_>_.q-btn-item_.q-badge--floating]:(right-0) [&_>_.q-btn-group]:([box-shadow:none]) [&_>_.q-btn-group:first-child_>_.q-btn:first-child]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:([border-top-right-radius:inherit] [border-bottom-right-radius:inherit]) [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child:before]:([border-left:0]) [&_>_.q-btn-group:not(:last-child)_>_.q-btn:last-child:before]:([border-right:0]) [&_>_.q-btn-item:not(:last-child)]:(rounded-tr-none rounded-br-none) [&_>_.q-btn-item:not(:first-child)]:(rounded-tl-none rounded-bl-none) [&_>_.q-btn-item.q-btn--standard:before]:()`
   ],
 
   [
     /^q-btn-group--push$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn-group--push'] ??
       `rounded-[7px] [&_>_.q-btn--push.q-btn--actionable]:(transform-none) [&_>_.q-btn--push.q-btn--actionable_.q-btn\\_\\_content]:([transition:margin-top_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1),_margin-bottom_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&_>_.q-btn--push.q-btn--actionable:active_.q-btn\\_\\_content]:(mt-[2px] -mb-[2px])
     [&__>_.q-btn--push.q-btn--actionable.q-btn--active__.q-btn\\_\\_content]:(mt-[2px] -mb-[2px])`
   ],
@@ -24,6 +26,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-btn-group--outline$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn-group--outline'] ??
       `[box-shadow:none] [&_>_.q-separator]:(hidden) [&_>_.q-btn-item_+_.q-btn-item:before]:([border-left:0]) [&_>_.q-btn-item:not(:last-child):before]:([border-right:0])`
   ],
 
@@ -34,12 +37,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-btn-group--glossy$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn-group--glossy'] ??
       `[&_>_.q-btn-item]:(!bg-[linear-gradient(_to_bottom,_rgba(255,_255,_255,_0.3),_rgba(255,_255,_255,_0)_50%,_rgba(0,_0,_0,_0.12)_51%,_rgba(0,_0,_0,_0.04)_)])`
   ],
 
   [
     /^q-btn-group--spread$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-btn-group--spread'] ??
       `[&_>_.q-btn-group]:(!flex) [&_>_.q-btn-item]:(w-auto min-w-[0] max-w-full flex-[10000_1_0%])
     [&__>_.q-btn-group_>_.q-btn-item:not(.q-btn-dropdown\\_\\_arrow-container)]:(w-auto min-w-[0] max-w-full flex-[10000_1_0%])`
   ]

package/src/node/plugins/quasar/unocss/components/QCard.unocss.ts

@@ -5,17 +5,21 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-card$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card'] ??
       `[box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] rounded-[4px] align-top bg-[#fff] relative [&_>_div:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none) [&_>_img:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none) [&_>_div:nth-child(1_of_:not(.q--avoid-card-border))]:([border-top:0] [border-top-left-radius:inherit] [border-top-right-radius:inherit]) [&_>_img:nth-child(1_of_:not(.q--avoid-card-border))]:([border-top:0] [border-top-left-radius:inherit] [border-top-right-radius:inherit]) [&_>_div:nth-last-child(1_of_:not(.q--avoid-card-border))]:([border-bottom:0] [border-bottom-left-radius:inherit] [border-bottom-right-radius:inherit]) [&_>_img:nth-last-child(1_of_:not(.q--avoid-card-border))]:([border-bottom:0] [border-bottom-left-radius:inherit] [border-bottom-right-radius:inherit]) [&_>_div:not(.q--avoid-card-border)]:([border-left:0] [border-right:0] [box-shadow:none]) [&_>_img]:(block w-full max-w-full border-[0])`
   ],
 
   [
     /^q-card--bordered$/,
-    ([, c], { theme }) => `border-[1px] border-solid border-[rgba(0,0,0,0.12)]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card--bordered'] ??
+      `border-[1px] border-solid border-[rgba(0,0,0,0.12)]`
   ],
 
   [
     /^q-card--dark$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card--dark'] ??
       `border-[rgba(255,_255,_255,_0.28)] [box-shadow:0_1px_5px_rgba(255,_255,_255,_0.2),_0_2px_2px_rgba(255,_255,_255,_0.14),_0_3px_1px_-2px_rgba(255,_255,_255,_0.12)]`
   ],
 
@@ -26,24 +30,28 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-card__section--horiz$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card__section--horiz'] ??
       `[&_>_div:not(.q--avoid-card-border)]:(rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none) [&_>_img:not(.q--avoid-card-border)]:(rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none) [&_>_div:nth-child(1_of_:not(.q--avoid-card-border))]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) [&_>_img:nth-child(1_of_:not(.q--avoid-card-border))]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) [&_>_div:nth-last-child(1_of_:not(.q--avoid-card-border))]:([border-top-right-radius:inherit] [border-bottom-right-radius:inherit]) [&_>_img:nth-last-child(1_of_:not(.q--avoid-card-border))]:([border-top-right-radius:inherit] [border-bottom-right-radius:inherit]) [&_>_div:not(.q--avoid-card-border)]:([border-top:0] [border-bottom:0] [box-shadow:none])`
   ],
 
   [
     /^q-card__actions$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card__actions'] ??
       `p-[8px] items-center [&_.q-btn--rectangle]:(px-[8px] py-[0])`
   ],
 
   [
     /^q-card__actions--horiz$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card__actions--horiz'] ??
       `[&_>_.q-btn-item_+_.q-btn-item]:(ml-[8px]) [&_>_.q-btn-group_+_.q-btn-item]:(ml-[8px]) [&_>_.q-btn-item_+_.q-btn-group]:(ml-[8px])`
   ],
 
   [
     /^q-card__actions--vert$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card__actions--vert'] ??
       `[&_>_.q-btn-item.q-btn--round]:(self-center) [&_>_.q-btn-item_+_.q-btn-item]:(mt-[4px]) [&_>_.q-btn-group_+_.q-btn-item]:(mt-[4px]) [&_>_.q-btn-item_+_.q-btn-group]:(mt-[4px]) [&_>_.q-btn-group_>_.q-btn-item]:(flex-grow)`
   ]
 ]

package/src/node/plugins/quasar/unocss/components/QCarousel.unocss.ts

@@ -5,12 +5,15 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-carousel$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel'] ??
       `bg-[#fff] h-[400px] [&_.q-carousel--padding]:(p-[16px]) [&_.q-carousel\\_\\_thumbnail]:(m-[2px] h-[50px] w-auto inline-block cursor-pointer border-[1px] border-solid border-[transparent] rounded-[4px] align-middle opacity-70 [transition:opacity_0.3s]) [&_.q-carousel\\_\\_thumbnail:hover]:(opacity-100) [&_.q-carousel\\_\\_thumbnail--active]:(opacity-100) [&_.q-carousel\\_\\_thumbnail--active]:(border-current cursor-default)`
   ],
 
   [
     /^q-carousel__slide$/,
-    ([, c], { theme }) => `min-h-full bg-cover bg-[50%] p-[16px]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__slide'] ??
+      `min-h-full bg-cover bg-[50%] p-[16px]`
   ],
 
   [/^q-carousel__slides-container$/, ([, c], { theme }) => `h-full`],
@@ -20,50 +23,63 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-carousel__arrow$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__arrow'] ??
       `pointer-events-none [&_.q-icon]:(text-[28px]) [&_.q-btn]:()`
   ],
 
   [
     /^q-carousel__prev-arrow--horizontal$/,
-    ([, c], { theme }) => `top-[16px] bottom-[16px] left-[16px]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__prev-arrow--horizontal'] ??
+      `top-[16px] bottom-[16px] left-[16px]`
   ],
 
   [
     /^q-carousel__next-arrow--horizontal$/,
-    ([, c], { theme }) => `top-[16px] bottom-[16px] right-[16px]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__next-arrow--horizontal'] ??
+      `top-[16px] bottom-[16px] right-[16px]`
   ],
 
   [
     /^q-carousel__prev-arrow--vertical$/,
-    ([, c], { theme }) => `left-[16px] right-[16px] top-[16px]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__prev-arrow--vertical'] ??
+      `left-[16px] right-[16px] top-[16px]`
   ],
 
   [
     /^q-carousel__next-arrow--vertical$/,
-    ([, c], { theme }) => `left-[16px] right-[16px] bottom-[16px]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__next-arrow--vertical'] ??
+      `left-[16px] right-[16px] bottom-[16px]`
   ],
 
   [
     /^q-carousel__navigation--top$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__navigation--top'] ??
       `left-[16px] right-[16px] overflow-x-auto overflow-y-hidden top-[16px]`
   ],
 
   [
     /^q-carousel__navigation--bottom$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__navigation--bottom'] ??
       `left-[16px] right-[16px] overflow-x-auto overflow-y-hidden bottom-[16px]`
   ],
 
   [
     /^q-carousel__navigation--left$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__navigation--left'] ??
       `top-[16px] bottom-[16px] overflow-x-hidden overflow-y-auto [&_>_.q-carousel\\_\\_navigation-inner]:(flex-col) left-[16px]`
   ],
 
   [
     /^q-carousel__navigation--right$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__navigation--right'] ??
       `top-[16px] bottom-[16px] overflow-x-hidden overflow-y-auto [&_>_.q-carousel\\_\\_navigation-inner]:(flex-col) right-[16px]`
   ],
 
@@ -71,44 +87,58 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [
     /^q-carousel__navigation$/,
-    ([, c], { theme }) => `[&_.q-btn]:(mx-[4px] my-[6px] p-[5px])`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__navigation'] ??
+      `[&_.q-btn]:(mx-[4px] my-[6px] p-[5px])`
   ],
 
   [
     /^q-carousel__navigation-icon--inactive$/,
-    ([, c], { theme }) => `opacity-70`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel__navigation-icon--inactive'] ??
+      `opacity-70`
   ],
 
   [
     /^q-carousel--navigation-top$/,
-    ([, c], { theme }) => `[&_.q-carousel--padding]:(pt-[60px])`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel--navigation-top'] ??
+      `[&_.q-carousel--padding]:(pt-[60px])`
   ],
 
   [
     /^q-carousel--arrows-vertical$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel--arrows-vertical'] ??
       `[&_.q-carousel--padding]:(pt-[60px]) [&_.q-carousel--padding]:(pb-[60px])`
   ],
 
   [
     /^q-carousel--navigation-bottom$/,
-    ([, c], { theme }) => `[&_.q-carousel--padding]:(pb-[60px])`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel--navigation-bottom'] ??
+      `[&_.q-carousel--padding]:(pb-[60px])`
   ],
 
   [
     /^q-carousel--navigation-left$/,
-    ([, c], { theme }) => `[&_.q-carousel--padding]:(pl-[60px])`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel--navigation-left'] ??
+      `[&_.q-carousel--padding]:(pl-[60px])`
   ],
 
   [
     /^q-carousel--arrows-horizontal$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel--arrows-horizontal'] ??
       `[&_.q-carousel--padding]:(pl-[60px]) [&_.q-carousel--padding]:(pr-[60px])`
   ],
 
   [
     /^q-carousel--navigation-right$/,
-    ([, c], { theme }) => `[&_.q-carousel--padding]:(pr-[60px])`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-carousel--navigation-right'] ??
+      `[&_.q-carousel--padding]:(pr-[60px])`
   ]
 ]
 

package/src/node/plugins/quasar/unocss/components/QChatMessage.unocss.ts

@@ -6,23 +6,30 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [
     /^q-message-label$/,
-    ([, c], { theme }) => `mx-[0] my-[24px] text-center text-[small]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-message-label'] ??
+      `mx-[0] my-[24px] text-center text-[small]`
   ],
 
   [
     /^q-message-stamp$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-message-stamp'] ??
       `[color:inherit] mt-[4px] opacity-60 hidden text-[small]`
   ],
 
   [
     /^q-message-avatar$/,
-    ([, c], { theme }) => `rounded-[50%] w-[48px] h-[48px] min-w-[48px]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-message-avatar'] ??
+      `rounded-[50%] w-[48px] h-[48px] min-w-[48px]`
   ],
 
   [
     /^q-message$/,
-    ([, c], { theme }) => `mb-[8px] [&:first-child_.q-message-label]:(mt-0)`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-message'] ??
+      `mb-[8px] [&:first-child_.q-message-label]:(mt-0)`
   ],
 
   [/^q-message-avatar--received$/, ([, c], { theme }) => `mr-[8px]`],
@@ -30,6 +37,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-message-text--received$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-message-text--received'] ??
       `text-[#81c784] rounded-tl-[4px] rounded-br-[4px] rounded-tr-[4px] rounded-bl-[0] [&:last-child:before]:(right-full [border-right:0_solid_transparent] [border-left:8px_solid_transparent] [border-bottom:8px_solid_currentColor])`
   ],
 
@@ -44,6 +52,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-message-text--sent$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-message-text--sent'] ??
       `text-[#e0e0e0] rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[4px] [&:last-child:before]:(left-full [border-left:0_solid_transparent] [border-right:8px_solid_transparent] [border-bottom:8px_solid_currentColor])`
   ],
 
@@ -52,6 +61,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-message-text$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-message-text'] ??
       `bg-current p-[8px] leading-[1.2] relative [&_+_.q-message-text]:(mt-[3px]) [&:last-child]:(min-h-[48px]) [&:last-child_.q-message-stamp]:(block) [&:last-child:before]:(content-empty absolute bottom-0 w-[0] h-[0])`
   ]
 ]

package/src/node/plugins/quasar/unocss/components/QCheckbox.unocss.ts

@@ -35,6 +35,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-checkbox__bg$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox__bg'] ??
       `select-none top-1/4 left-1/4 w-1/2 h-1/2 border-[2px] border-solid border-[currentColor] rounded-[2px] [transition:background_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms]`
   ],
 
@@ -46,42 +47,50 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [
     /^q-checkbox__truthy$/,
-    ([, c], { theme }) => `stroke-current stroke-[3.12px]`
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox__truthy'] ??
+      `stroke-current stroke-[3.12px]`
   ],
 
   [
     /^q-checkbox__indet$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox__indet'] ??
       `fill-current origin-[50%_50%] -rotate-[280deg] scale-0`
   ],
 
   [
     /^q-checkbox__inner$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox__inner'] ??
       `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-0 rounded-[50%] text-[rgba(0,_0,_0,_0.54)]`
   ],
 
   [
     /^q-checkbox__inner--truthy$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox__inner--truthy'] ??
       `text-primary [&_.q-checkbox\\_\\_bg]:(bg-current) [&_path]:([transition:stroke-dashoffset_0.18s_cubic-bezier(0.4,_0,_0.6,_1)_0ms])`
   ],
 
   [
     /^q-checkbox__inner--indet$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox__inner--indet'] ??
       `text-primary [&_.q-checkbox\\_\\_bg]:(bg-current) [&_.q-checkbox\\_\\_indet]:(rotate-[0] scale-100 [transition:transform_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms])`
   ],
 
   [
     /^q-checkbox--dark$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox--dark'] ??
       `[&_.q-checkbox\\_\\_inner]:(text-[rgba(255,_255,_255,_0.7)]) [&_.q-checkbox\\_\\_inner:before]:(!opacity-[0.32]) [&_.q-checkbox\\_\\_inner--truthy]:(text-primary) [&_.q-checkbox\\_\\_inner--indet]:(text-primary)`
   ],
 
   [
     /^q-checkbox--dense$/,
     ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox--dense'] ??
       `[&_.q-checkbox\\_\\_inner]:(w-[0.5em] min-w-[0.5em] h-[0.5em]) [&_.q-checkbox\\_\\_bg]:(left-[5%] top-[5%] w-[90%] h-[90%]) [&_.q-checkbox\\_\\_label]:(pl-[0.5em])`
   ]
 ]