unocss-preset-quasar 0.1.1 → 0.1.2

package/src/styles/md3/components/QSkeleton.unocss.ts

@@ -61,171 +61,147 @@ const preflights: Preflight<QuasarTheme>[] = [
 
 const shortcuts: UserShortcuts<QuasarTheme> = [
   [
-    /^q-skeleton$/,
+    /^q-skeleton\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton'] ??
-      `bg-[rgba(0,_0,_0,_0.12)] rounded-[4px] box-border [&:before]:(content-['_'])`
+      `bg-gray-200 rounded box-border`
   ],
-
   [
-    /^q-skeleton--anim$/,
+    /^q-skeleton--anim\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--anim'] ?? `cursor-wait`
   ],
-
   [
-    /^q-skeleton--type-text$/,
+    /^q-skeleton--type-text\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--type-text'] ??
-      `scale-x-100 scale-y-[0.5]`
+      `transform scale-y-50`
   ],
-
   [
-    /^q-skeleton--type-circle$/,
+    /^q-skeleton--type-circle\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--type-circle'] ??
-      `h-[48px] w-[48px] rounded-[50%]`
+      `h-12 w-12 rounded-full`
   ],
-
   [
-    /^q-skeleton--type-QAvatar$/,
+    /^q-skeleton--type-QAvatar\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--type-QAvatar'] ??
-      `h-[48px] w-[48px] rounded-[50%]`
+      `h-12 w-12 rounded-full`
   ],
-
   [
-    /^q-skeleton--type-QBtn$/,
+    /^q-skeleton--type-QBtn\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--type-QBtn'] ?? `w-[90px] h-[36px]`
+      theme.quasar?.components?.['q-skeleton--type-QBtn'] ?? `w-24 h-9`
   ],
-
   [
-    /^q-skeleton--type-QBadge$/,
+    /^q-skeleton--type-QBadge\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--type-QBadge'] ??
-      `w-[70px] h-[16px]`
+      theme.quasar?.components?.['q-skeleton--type-QBadge'] ?? `w-18 h-4`
   ],
-
   [
-    /^q-skeleton--type-QChip$/,
+    /^q-skeleton--type-QChip\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--type-QChip'] ??
-      `w-[90px] h-[28px] rounded-[16px]`
+      `w-24 h-7 rounded-full`
   ],
-
   [
-    /^q-skeleton--type-QToolbar$/,
+    /^q-skeleton--type-QToolbar\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--type-QToolbar'] ?? `h-[50px]`
+      theme.quasar?.components?.['q-skeleton--type-QToolbar'] ?? `h-12`
   ],
-
   [
-    /^q-skeleton--type-QCheckbox$/,
+    /^q-skeleton--type-QCheckbox\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--type-QCheckbox'] ??
-      `w-[40px] h-[40px] rounded-[50%]`
+      `h-10 w-10 rounded-full`
   ],
-
   [
-    /^q-skeleton--type-QRadio$/,
+    /^q-skeleton--type-QRadio\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--type-QRadio'] ??
-      `w-[40px] h-[40px] rounded-[50%]`
+      `h-10 w-10 rounded-full`
   ],
-
   [
-    /^q-skeleton--type-QToggle$/,
+    /^q-skeleton--type-QToggle\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--type-QToggle'] ??
-      `w-[56px] h-[40px] rounded-[7px]`
+      `w-14 h-10 rounded-md`
   ],
-
   [
-    /^q-skeleton--type-QSlider$/,
+    /^q-skeleton--type-QSlider\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--type-QSlider'] ?? `h-[40px]`
+      theme.quasar?.components?.['q-skeleton--type-QSlider'] ?? `h-10`
   ],
-
   [
-    /^q-skeleton--type-QRange$/,
+    /^q-skeleton--type-QRange\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--type-QRange'] ?? `h-[40px]`
+      theme.quasar?.components?.['q-skeleton--type-QRange'] ?? `h-10`
   ],
-
   [
-    /^q-skeleton--type-QInput$/,
+    /^q-skeleton--type-QInput\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--type-QInput'] ?? `h-[56px]`
+      theme.quasar?.components?.['q-skeleton--type-QInput'] ?? `h-14`
   ],
-
   [
-    /^q-skeleton--bordered$/,
+    /^q-skeleton--bordered\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--bordered'] ??
-      `border-[1px] border-solid border-[rgba(0,0,0,0.05)]`
+      `border border-gray-200`
   ],
-
   [
-    /^q-skeleton--square$/,
+    /^q-skeleton--square\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--square'] ?? `rounded-none`
   ],
-
   [
-    /^q-skeleton--anim-fade$/,
+    /^q-skeleton--anim-fade\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--anim-fade'] ??
-      `animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite]`
+      theme.quasar?.components?.['q-skeleton--anim-fade'] ?? `animate-fade`
   ],
-
   [
-    /^q-skeleton--anim-pulse$/,
+    /^q-skeleton--anim-pulse\$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-skeleton--anim-pulse'] ??
-      `animate-[q-skeleton--pulse_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+      theme.quasar?.components?.['q-skeleton--anim-pulse'] ?? `animate-pulse`
   ],
-
   [
-    /^q-skeleton--anim-pulse-x$/,
+    /^q-skeleton--anim-pulse-x\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--anim-pulse-x'] ??
-      `animate-[q-skeleton--pulse-x_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+      `animate-pulse-x`
   ],
-
   [
-    /^q-skeleton--anim-pulse-y$/,
+    /^q-skeleton--anim-pulse-y\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--anim-pulse-y'] ??
-      `animate-[q-skeleton--pulse-y_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+      `animate-pulse-y`
   ],
-
   [
-    /^q-skeleton--anim-wave$/,
+    /^q-skeleton--anim-wave\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--anim-wave'] ??
-      `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.5),_rgba(255,_255,_255,_0)_)] animate-[q-skeleton--wave_var(--q-skeleton-speed)_linear_0.5s_infinite])`
+      `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0 after:bg-gradient-to-r after:from-transparent after:via-white/50 after:to-transparent after:animate-wave`
   ],
-
   [
-    /^q-skeleton--anim-blink$/,
+    /^q-skeleton--anim-blink\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--anim-blink'] ??
-      `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[rgba(255,_255,_255,_0.7)] animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite])`
+      `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0 after:bg-white/70 after:animate-fade`
   ],
-
   [
-    /^q-skeleton--anim-pop$/,
+    /^q-skeleton--anim-pop\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--anim-pop'] ??
-      `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0)`
+      `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0`
   ],
-
   [
-    /^q-skeleton--dark$/,
+    /^q-skeleton--dark\$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-skeleton--dark'] ??
-      `bg-[rgba(255,_255,_255,_0.05)] [&.q-skeleton--bordered]:(border-[1px] border-solid border-[rgba(255,255,255,0.25)]) [&.q-skeleton--anim-wave:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.1),_rgba(255,_255,_255,_0)_)]) [&.q-skeleton--anim-blink:after]:(bg-[rgba(255,_255,_255,_0.2)])`
+      `bg-white/5
+[&.q-skeleton--bordered]:(border border-white/25)
+[&.q-skeleton--anim-wave]:(after:bg-gradient-to-r after:from-transparent after:via-white/10 after:to-transparent)
+[&.q-skeleton--anim-blink]:(after:bg-white/20)`
   ]
 ]
 

package/src/styles/md3/components/QSlider.unocss.ts

@@ -35,14 +35,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-slider__track$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-slider__track'] ??
-      `bg-[rgba(0,_0,_0,_0.1)] rounded-[4px] [width:inherit] [height:inherit] text-primary`
+      `bg-light-secondary-container/10 dark:bg-dark-secondary-container/10 rounded-[4px] [width:inherit] [height:inherit] text-light-primary dark:text-dark-primary`
   ],
 
   [
     /^q-slider__inner$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-slider__inner'] ??
-      `bg-[rgba(0,_0,_0,_0.1)] [border-radius:inherit] w-full h-full`
+      `bg-light-secondary-container/10 dark:bg-dark-secondary-container/10 [border-radius:inherit] w-full h-full`
   ],
 
   [

package/src/styles/md3/components/QTime.unocss.ts

@@ -6,7 +6,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time'] ??
-      `[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] bg-[#fff] outline-[0] w-[290px] min-w-[290px] max-w-full [&.disabled_.q-time\\_\\_header-ampm]:(pointer-events-none) [&.disabled_.q-time\\_\\_content]:(pointer-events-none)`
+      `bg-light-surface-container-high dark:bg-dark-surface-container-high
+      [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] outline-[0] w-[290px] min-w-[290px] max-w-full [&.disabled_.q-time\\_\\_header-ampm]:(pointer-events-none) [&.disabled_.q-time\\_\\_content]:(pointer-events-none)`
   ],
 
   [
@@ -20,7 +21,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time__header$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__header'] ??
-      `[border-top-left-radius:inherit] text-[#fff] p-[16px] font-light bg-primary`
+      `[border-top-left-radius:inherit] text-light-on-surface dark:text-dark-on-surface p-[16px] font-light`
   ],
 
   [
@@ -34,27 +35,35 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time__header-label$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__header-label'] ??
-      `text-[28px] leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
+      `text-[48px] border-rd-8px
+      leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
   ],
 
   [
     /^q-time__link$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__link'] ??
-      `opacity-[0.56] outline-[0] [transition:opacity_0.3s_ease-out] [&:hover]:(opacity-100) [&:focus]:(opacity-100)`
+      `p-6px
+        bg-light-surface-container-highest dark:bg-dark-surface-container-highest
+        text-light-on-surface dark:text-dark-on-surface
+      opacity-[0.56] outline-[0] [transition:opacity_0.3s_ease-out] [&:hover]:(opacity-100) [&:focus]:(opacity-100)`
   ],
 
   [
     /^q-time__link--active$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-time__link--active'] ?? `opacity-100`
+      theme.quasar?.components?.['q-time__link--active'] ??
+      `
+            text-light-on-primary-container dark:text-dark-on-primary-container bg-light-primary-container dark:bg-dark-primary-container
+    opacity-100`
   ],
 
   [
     /^q-time__header-ampm$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__header-ampm'] ??
-      `text-[16px] tracking-widest !flex-initial`
+      `text-[16px] tracking-widest !flex-initial
+      [&_.q-time\\_\\_link--active]:(bg-light-tertiary-container dark:bg-dark-tertiary-container)`
   ],
 
   [
@@ -74,7 +83,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time__container-child$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__container-child'] ??
-      `rounded-[50%] bg-[rgba(0,_0,_0,_0.12)]`
+      `rounded-[50%] bg-light-surface-container-highest dark:bg-dark-surface-container-highest`
   ],
 
   [
@@ -101,7 +110,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time__clock-pointer$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__clock-pointer'] ??
-      `w-[2px] h-1/2 origin-[0_0] min-h-[0] absolute left-2/4 right-[0] bottom-[0] bg-current -translate-x-1/2 [&:before]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2) [&:after]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2) [&:before]:(-bottom-[4px] w-[8px] h-[8px]) [&:after]:(-top-[3px] h-[6px] w-[6px])`
+      `text-light-primary dark:text-dark-primary w-[2px] h-1/2 origin-[0_0] min-h-[0] absolute left-2/4 right-[0] bottom-[0] bg-current -translate-x-1/2 [&:before]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2) [&:after]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2) 
+      [&:before]:(-bottom-[4px] w-[8px] h-[8px])
+      [&:after]:(-top-[3px] h-[6px] w-[6px])`
   ],
 
   [
@@ -122,7 +133,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time__clock-position--active$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__clock-position--active'] ??
-      `text-[#fff]`
+      `bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary`
   ],
 
   [
@@ -287,7 +298,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time__now-button$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__now-button'] ??
-      `text-[#fff] top-[12px] right-[12px]`
+      `text-light-on-surface dark:text-dark-on-surface top-[12px] right-[12px]`
   ],
 
   [

package/src/styles/md3/components/QTree.unocss.ts

@@ -13,33 +13,34 @@ const preflights: Preflight<QuasarTheme>[] = [
 `
   }
 ]
+
 const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-tree$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree'] ??
-      `relative text-[#9e9e9e] [&_>_.q-tree\\_\\_node]:(p-0) [&_>_.q-tree\\_\\_node:after]:(hidden) [&_>_.q-tree\\_\\_node_>_.q-tree\\_\\_node-header:before]:(hidden) [&_>_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header]:(pl-[24px])`
+      `relative text-[#9e9e9e] [&_>_.q-tree\\_\\_node]:(p-0) [&_>_.q-tree\\_\\_node:after]:(hidden) [&_>_.q-tree\\_\\_node>_.q-tree\\_\\_node-header:before]:(hidden) [&_>_.q-tree\\_\\_node--child>_.q-tree\\_\\_node-header]:(pl-[24px])`
   ],
 
   [
     /^q-tree__node$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree__node'] ??
-      `pt-[0] pr-[0] pb-[3px] pl-[22px] [&:after]:(content-empty absolute -top-[3px] bottom-[0] w-[2px] right-auto -left-[13px] [border-left:1px_solid_currentColor]) [&:last-child:after]:(hidden)`
+      `pt-[0] pr-[0] pb-[3px] pl-[22px] [&:after]:(content-empty absolute -top-[3px] bottom-[0] w-[2px] right-auto -left-[13px] border-left-current) [&:last-child:after]:(hidden)`
   ],
 
   [
     /^q-tree__node--disabled$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree__node--disabled'] ??
-      `pointer-events-none [&_.disabled]:(!opacity-100) [&_>_div]:(!opacity-60) [&_>_i]:(!opacity-60) [&_>_.disabled]:(!opacity-60) [&_>_div_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_div_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_div_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100)`
+      `pointer-events-none [&_.disabled]:(!opacity-100) [&>div]:(!opacity-60) [&>i]:(!opacity-60) [&>_.disabled]:(!opacity-60) [&>div_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>div_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>div_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100)`
   ],
 
   [
     /^q-tree__node-header$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree__node-header'] ??
-      `[&:before]:(content-empty absolute -top-[3px] bottom-2/4 w-[31px] -left-[35px] [border-left:1px_solid_currentColor] [border-bottom:1px_solid_currentColor]) p-[4px] mt-[3px] rounded-[4px] outline-[0]`
+      `[&:before]:(content-empty absolute -top-[3px] bottom-2/4 w-[31px] -left-[35px] border-left-current border-bottom-current) p-[4px] mt-[3px] rounded-[4px] outline-[0]`
   ],
 
   [
@@ -59,7 +60,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tree__node--parent$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree__node--parent'] ??
-      `pl-[2px] [&_>_.q-tree\\_\\_node-header:before]:(w-[15px] -left-[15px]) [&_>_.q-tree\\_\\_node-collapsible_>_.q-tree\\_\\_node-body]:(pt-[5px] pr-[0] pb-[8px] pl-[27px]) [&_>_.q-tree\\_\\_node-collapsible_>_.q-tree\\_\\_node-body:after]:(content-empty absolute top-[0] w-[2px] h-full right-auto left-[12px] [border-left:1px_solid_currentColor] bottom-[50px])`
+      `pl-[2px] [&>_.q-tree__node-header:before]:(w-[15px] -left-[15px]) [&>_.q-tree__node-collapsible>_.q-tree__node-body]:(pt-[5px] pr-[0] pb-[8px] pl-[27px]) [&>_.q-tree__node-collapsible>_.q-tree__node-body:after]:(content-empty absolute top-[0] w-[2px] h-full right-auto left-[12px] border-left-current bottom-[50px])`
   ],
 
   [
@@ -72,20 +73,20 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tree__node-header-content$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree__node-header-content'] ??
-      `text-[#000] [transition:color_0.3s] [&_.q-icon]:(text-[21px]) [&_.q-avatar]:(text-[28px] rounded-[50%] w-[28px] h-[28px])`
+      `text-[#000] [transition:color_0.3s] [&_.q-icon]:(text-21px) [&_.q-avatar]:(text-[28px] rounded-[50%] w-[28px] h-[28px])`
   ],
 
   [
     /^q-tree__node--selected$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree__node--selected'] ??
-      `[&_.q-tree\\_\\_node-header-content]:(text-[#9e9e9e])`
+      `[&_.q-tree\\_\\_node--selected_.q-tree__node-header-content]:(text-[#9e9e9e])`
   ],
 
   [
     /^q-tree__icon$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-tree__icon'] ?? `text-[21px]`
+      theme.quasar?.components?.['q-tree__icon'] ?? `text-21px`
   ],
 
   [
@@ -118,7 +119,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tree__arrow--rotate$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree__arrow--rotate'] ??
-      `[transform:rotate3d(0,_0,_1,_90deg)]`
+      `[transform:rotate3d(0_0_1_90deg)]`
   ],
 
   [
@@ -131,28 +132,28 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tree--dark$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree--dark'] ??
-      `[&_.q-tree\\_\\_node-header-content]:(text-[#fff])`
+      `[&--dark] [&_.q-tree__node-header-content]:(text-[#fff])`
   ],
 
   [
     /^q-tree--no-connectors$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree--no-connectors'] ??
-      `[&_.q-tree\\_\\_node:after]:(!hidden) [&_.q-tree\\_\\_node-header:before]:(!hidden) [&_.q-tree\\_\\_node-body:after]:(!hidden)`
+      `[&--no-connectors] [&_.q-tree__node:after]:(!hidden) [&--no-connectors] [&_.q-tree__node-header:before]:(!hidden) [&--no-connectors] [&_.q-tree__node-body:after]:(!hidden)`
   ],
 
   [
     /^q-tree--dense$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree--dense'] ??
-      `[&_>_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header]:(pl-px) [&_.q-tree\\_\\_arrow]:(mr-px) [&_.q-tree\\_\\_spinner]:(mr-px) [&_.q-tree\\_\\_img]:(h-[32px]) [&_.q-tree\\_\\_tickbox]:(mr-[3px]) [&_.q-tree\\_\\_node]:(p-0) [&_.q-tree\\_\\_node:after]:(top-[0] -left-[8px]) [&_.q-tree\\_\\_node-header]:(mt-0 p-px) [&_.q-tree\\_\\_node-header:before]:(top-[0] -left-[8px] w-[8px]) [&_.q-tree\\_\\_node--child]:(pl-[17px]) [&_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header:before]:(-left-[25px] w-[21px]) [&_.q-tree\\_\\_node-body]:(pt-[0] px-[0] pb-[2px]) [&_.q-tree\\_\\_children]:(pl-[16px])`
+      `[&--dense] &>_.q-tree__node--child>_.q-tree__node-header:(pl-px) [&--dense] [&_.q-tree__arrow]:(mr-px) [&--dense] [&_.q-tree__spinner]:(mr-px) [&--dense] [&_.q-tree__img]:(h-[32px]) [&--dense] [&_.q-tree__tickbox]:(mr-[3px]) [&--dense] [&_.q-tree__node]:(p-0) [&--dense] [&_.q-tree__node:after]:(top-[0] -left-[8px]) [&--dense] [&_.q-tree__node-header]:(mt-0 p-px) [&--dense] [&_.q-tree__node-header:before]:(top-[0] -left-[8px] w-[8px]) [&--dense] &>_.q-tree__node--child>_.q-tree__node-header:(pl-[17px]) [&--dense] &>_.q-tree__node--child>_.q-tree__node-header:before:(-left-[25px] w-[21px]) [&--dense] [&_.q-tree__node-body]:(pt-[0] pr-[0] pb-[2px]) [&--dense] [&_.q-tree__children]:(pl-[16px])`
   ],
 
   [
     /^q-tree--dense$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tree--dense'] ??
-      `[&__.q-tree\\_\\_node--parent__>_.q-tree\\_\\_node-collapsible__>_.q-tree\\_\\_node-body]:(pt-[0] pr-[0] pb-[2px] pl-[20px]) [&__.q-tree\\_\\_node--parent__>_.q-tree\\_\\_node-collapsible__>_.q-tree\\_\\_node-body:after]:(left-[8px])`
+      `[&--dense] &__.q-tree__node--parent>_.q-tree__node-collapsible>_.q-tree__node-body:(pt-[0] pr-[0] pb-[2px] pl-[20px]) [&--dense] &__.q-tree__node--parent>_.q-tree__node-collapsible>_.q-tree__node-body:after:(left-[8px])`
   ]
 ]