vitrify 0.17.10 → 0.17.12

package/src/node/plugins/quasar/unocss/index.ts

@@ -2,6 +2,7 @@
 import {
   definePreset,
   type Preflight,
+  type Preset,
   presetIcons,
   type Rule,
   transformerVariantGroup,
@@ -177,7 +178,11 @@ import {
 import { shortcuts as QHeaderShortcuts } from './components/QHeader.unocss.js'
 import { shortcuts as QFooterShortcuts } from './components/QFooter.unocss.js'
 import { shortcuts as QDrawerShortcuts } from './components/QDrawer.unocss.js'
-import { type QuasarIconSet, type QuasarPlugins } from 'quasar'
+import {
+  type QuasarComponents,
+  type QuasarIconSet,
+  type QuasarPlugins
+} from 'quasar'
 
 export interface QuasarPresetOptions {
   plugins?: (keyof QuasarPlugins)[]
@@ -197,6 +202,11 @@ const toKebabCase = (str: string) =>
     ?.map((x) => x.toLowerCase())
     .join('-') ?? ''
 
+const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
+  {
+    QSelect: ['q-list', 'q-item', 'q-virtual-scroll', 'q-menu']
+  }
+
 const pluginSafelistMap: Partial<Record<keyof QuasarPlugins, string[]>> = {
   BottomSheet: [
     'q-bottom-sheet',
@@ -377,6 +387,9 @@ const pluginSafelistMap: Partial<Record<keyof QuasarPlugins, string[]>> = {
 }
 
 const baseSafelist = [
+  'relative-position',
+  'q-panel-parent',
+  'inline',
   'bg-primary',
   'col',
   'row',
@@ -1588,14 +1601,18 @@ const generateSafelist = ({
 }
 
 export default definePreset((options: QuasarPresetOptions = {}) => {
-  return {
-    name: 'quasar',
-    presets: [presetUno(), animatedUno(), presetIcons({})],
-    safelist: generateSafelist(options),
-    preflights: (
-      [
-        {
-          getCSS: ({ theme }) => `/* beasties:include start */
+  return [
+    presetUno(),
+    animatedUno(),
+    presetIcons({}),
+    {
+      name: 'quasar',
+      presets: [presetUno(), animatedUno(), presetIcons({})],
+      safelist: generateSafelist(options),
+      preflights: (
+        [
+          {
+            getCSS: ({ theme }) => `/* beasties:include start */
 /* Document
  * ========================================================================== */
 
@@ -1853,198 +1870,242 @@ export default definePreset((options: QuasarPresetOptions = {}) => {
 :where(summary) {
   display: list-item;
 }
+
+/* * Change font properties to \`inherit\` in all browsers (opinionated).
+ * */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
 /* beasties:include end */`
-        }
-      ] as Preflight<QuasarTheme>[]
-    ).concat(
-      QBreadcrumbsPreflights,
-      QCheckboxPreflights,
-      QChipPreflights,
-      QCircularProgressPreflights,
-      QDialogPreflights,
-      QFieldPreflights,
-      QLayoutPreflights,
-      QLinearProgressPreflights,
-      QRadioPreflights,
-      QSelectPreflights,
-      QSpinnerPreflights,
-      QSkeletonPreflights,
-      QTablePreflights,
-      QTogglePreflights,
-      QTreePreflights,
-      ColorPreflights,
-      DarkPreflights,
-      HelperPreflights,
-      MousePreflights,
-      TypographyPreflights,
-      VisibilityPreflights,
-      TransitionPreflights,
-      SizePreflights
-    ),
-    rules: ([] as Rule<QuasarTheme>[]).concat(
-      MouseRules,
-      HelperRules,
-      ElevationRules,
-      VisibilityRules
-    ),
-    shortcuts: ([] as UserShortcuts<QuasarTheme>[]).concat(
-      QIconShortcuts,
-      QAjaxBarShortcuts,
-      QAvatarShortcuts,
-      QBadgeShortcuts,
-      QBreadcrumbsShortcuts,
-      QBannerShortcuts,
-      QBarShortcuts,
-      QBtnShortcuts,
-      QBtnDropdownShortcuts,
-      QBtnGroupShortcuts,
-      QBtnToggleShortcuts,
-      QCardShortcuts,
-      QCarouselShortcuts,
-      QChatMessageShortcuts,
-      QCheckboxShortcuts,
-      QChipShortcuts,
-      QCircularProgressShortcuts,
-      QColorPickerShortcuts,
-      QDateShortcuts,
-      QDialogShortcuts,
-      QEditorShortcuts,
-      QExpansionItemShortcuts,
-      QFabShortcuts,
-      QFieldShortcuts,
-      QFileShortcuts,
-      QFormShortcuts,
-      QImgShortcuts,
-      QInnerLoadingShortcuts,
-      QInputShortcuts,
-      QIntersectionShortcuts,
-      QItemShortcuts,
-      QKnobShortcuts,
-      QLayoutShortcuts,
-      QLinearProgressShortcuts,
-      QMenuShortcuts,
-      QOptionGroupShortcuts,
-      QPageShortcuts,
-      QPageStickyShortcuts,
-      QPaginationShortcuts,
-      QParallaxShortcuts,
-      QPopupEditShortcuts,
-      QPullToRefreshShortcuts,
-      QRadioShortcuts,
-      QRatingShortcuts,
-      QResponsiveShortcuts,
-      QScrollareaShortcuts,
-      QSelectShortcuts,
-      QSeparatorShortcuts,
-      QSkeletonShortcuts,
-      QSlideItemShortcuts,
-      QSliderShortcuts,
-      QSpaceShortcuts,
-      QSpinnerShortcuts,
-      QSplitterShortcuts,
-      QStepperShortcuts,
-      QTabPanelShortcuts,
-      QTableShortcuts,
-      QTabsShortcuts,
-      QTimeShortcuts,
-      QTimelineShortcuts,
-      QToggleShortcuts,
-      QToolbarShortcuts,
-      QTooltipShortcuts,
-      QTreeShortcuts,
-      QUploaderShortcuts,
-      QVideoShortcuts,
-      QVirtualScrollShortcuts,
-      PanelShortcuts,
-
-      QMorphShortcuts,
-      QRippleShortcuts,
-
-      QBottomSheetShortcuts,
-      QDialogPluginShortcuts,
-      QLoadingShortcuts,
-      QNotifyShortcuts,
-      DarkShortcuts,
-      FlexShortcuts,
-      HelperShortcuts,
-      MouseShortcuts,
-      OrientationShortcuts,
-      PositionShortcuts,
-      SizeShortcuts,
-      TouchShortcuts,
-      TransitionsShortcuts,
-      TypographyShortcuts,
-      VisibilityShortcuts,
-      QHeaderShortcuts,
-      QFooterShortcuts,
-      QDrawerShortcuts,
-      ElevationShortcuts
-    ),
-    theme: defaultTheme,
-    variants: [
-      // ...
-    ],
-    extractors: [
-      {
-        name: 'quasar-extractor',
-        order: 0,
-        extract({ code }) {
-          const kebabMatch = code.matchAll(/q-(\w)([\w-]*)/g)
-          const pascalMatch = code.matchAll(/Q([A-Z][a-z0-9]+)+/g)
-          const transitionMatch = code.matchAll(
-            /(transition|transition-show|transition-hide)="(\S*)"/g
-          )
-          const colorMatch = code.matchAll(/color="(\S*)"/g)
-
-          const matches: string[] = []
-          for (const match of kebabMatch) matches.push(match[0])
-          for (const match of pascalMatch) {
-            matches.push(toKebabCase(match[0]))
           }
-          const transitionClasses = []
-          for (const match of transitionMatch) {
-            transitionClasses.push(
-              ...[
-                'enter-from',
-                'enter-active',
-                'enter-to',
-                'leave-from',
-                'leave-active',
-                'leave-to'
-              ].map((v) => `q-transition--${match[2]}-${v}`)
+        ] as Preflight<QuasarTheme>[]
+      ).concat(
+        QBreadcrumbsPreflights,
+        QCheckboxPreflights,
+        QChipPreflights,
+        QCircularProgressPreflights,
+        QDialogPreflights,
+        QFieldPreflights,
+        QLayoutPreflights,
+        QLinearProgressPreflights,
+        QRadioPreflights,
+        QSelectPreflights,
+        QSpinnerPreflights,
+        QSkeletonPreflights,
+        QTablePreflights,
+        QTogglePreflights,
+        QTreePreflights,
+        ColorPreflights,
+        DarkPreflights,
+        HelperPreflights,
+        MousePreflights,
+        TypographyPreflights,
+        VisibilityPreflights,
+        TransitionPreflights,
+        SizePreflights
+      ),
+      rules: ([] as Rule<QuasarTheme>[]).concat(
+        MouseRules,
+        HelperRules,
+        ElevationRules,
+        VisibilityRules
+      ),
+      shortcuts: ([] as UserShortcuts<QuasarTheme>[]).concat(
+        QIconShortcuts,
+        QAjaxBarShortcuts,
+        QAvatarShortcuts,
+        QBadgeShortcuts,
+        QBreadcrumbsShortcuts,
+        QBannerShortcuts,
+        QBarShortcuts,
+        QBtnShortcuts,
+        QBtnDropdownShortcuts,
+        QBtnGroupShortcuts,
+        QBtnToggleShortcuts,
+        QCardShortcuts,
+        QCarouselShortcuts,
+        QChatMessageShortcuts,
+        QCheckboxShortcuts,
+        QChipShortcuts,
+        QCircularProgressShortcuts,
+        QColorPickerShortcuts,
+        QDateShortcuts,
+        QDialogShortcuts,
+        QEditorShortcuts,
+        QExpansionItemShortcuts,
+        QFabShortcuts,
+        QFieldShortcuts,
+        QFileShortcuts,
+        QFormShortcuts,
+        QImgShortcuts,
+        QInnerLoadingShortcuts,
+        QInputShortcuts,
+        QIntersectionShortcuts,
+        QItemShortcuts,
+        QKnobShortcuts,
+        QLayoutShortcuts,
+        QLinearProgressShortcuts,
+        QMenuShortcuts,
+        QOptionGroupShortcuts,
+        QPageShortcuts,
+        QPageStickyShortcuts,
+        QPaginationShortcuts,
+        QParallaxShortcuts,
+        QPopupEditShortcuts,
+        QPullToRefreshShortcuts,
+        QRadioShortcuts,
+        QRatingShortcuts,
+        QResponsiveShortcuts,
+        QScrollareaShortcuts,
+        QSelectShortcuts,
+        QSeparatorShortcuts,
+        QSkeletonShortcuts,
+        QSlideItemShortcuts,
+        QSliderShortcuts,
+        QSpaceShortcuts,
+        QSpinnerShortcuts,
+        QSplitterShortcuts,
+        QStepperShortcuts,
+        QTabPanelShortcuts,
+        QTableShortcuts,
+        QTabsShortcuts,
+        QTimeShortcuts,
+        QTimelineShortcuts,
+        QToggleShortcuts,
+        QToolbarShortcuts,
+        QTooltipShortcuts,
+        QTreeShortcuts,
+        QUploaderShortcuts,
+        QVideoShortcuts,
+        QVirtualScrollShortcuts,
+        PanelShortcuts,
+
+        QMorphShortcuts,
+        QRippleShortcuts,
+
+        QBottomSheetShortcuts,
+        QDialogPluginShortcuts,
+        QLoadingShortcuts,
+        QNotifyShortcuts,
+        DarkShortcuts,
+        FlexShortcuts,
+        HelperShortcuts,
+        MouseShortcuts,
+        OrientationShortcuts,
+        PositionShortcuts,
+        SizeShortcuts,
+        TouchShortcuts,
+        TransitionsShortcuts,
+        TypographyShortcuts,
+        VisibilityShortcuts,
+        QHeaderShortcuts,
+        QFooterShortcuts,
+        QDrawerShortcuts,
+        ElevationShortcuts
+      ),
+      layers: {
+        dismiss: -1,
+        default: 1
+      },
+      theme: defaultTheme,
+      variants: [
+        // ...
+      ],
+      extractors: [
+        {
+          name: 'quasar-extractor',
+          order: 0,
+          extract({ code }) {
+            const kebabMatch = code.matchAll(/q-(\w)([\w-]*)/g)
+            const pascalMatch = code.matchAll(/Q([A-Z][a-z0-9]+)+/g)
+            const transitionMatch = code.matchAll(
+              /(transition|transition-show|transition-hide|transition-prev|transition-next)="(\S*)"/g
             )
+            const colorMatch = code.matchAll(/color="(\S*)"/g)
+
+            const pascalComponentsMatch: string[] = []
+            const matches: string[] = []
+            for (const match of kebabMatch) matches.push(match[0])
+            for (const match of pascalMatch) {
+              pascalComponentsMatch.push(match[0])
+              matches.push(toKebabCase(match[0]))
+            }
+            const transitionClasses = []
+            for (const match of transitionMatch) {
+              transitionClasses.push(
+                ...[
+                  'enter-from',
+                  'enter-active',
+                  'enter-to',
+                  'leave-from',
+                  'leave-active',
+                  'leave-to'
+                ].map((v) => `q-transition--${match[2]}-${v}`)
+              )
+            }
+            const colorClasses = []
+            for (const match of colorMatch) {
+              colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`)
+            }
+
+            const classes = qClasses.filter((c) =>
+              matches.some((component) => {
+                component = component.replaceAll('q-chat-message', 'q-message')
+                component = component.replaceAll(
+                  'q-scroll-area',
+                  'q-scrollarea'
+                )
+                return c.includes(component)
+              })
+            )
+            const componentClasses = pascalComponentsMatch.reduce(
+              (acc, component) => {
+                if (component in componentsSafelistMap) {
+                  acc.push(
+                    ...(componentsSafelistMap as Record<string, string>)[
+                      component
+                    ]
+                  )
+                }
+                return acc
+              },
+              [] as string[]
+            )
+            classes.push(
+              ...transitionClasses,
+              ...colorClasses,
+              ...componentClasses
+            )
+            return classes
           }
-          const colorClasses = []
-          for (const match of colorMatch) {
-            colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`)
-          }
-
-          const classes = qClasses.filter((c) =>
-            matches.some((component) => c.includes(component))
-          )
-          classes.push(...transitionClasses, ...colorClasses)
-          return classes
         }
-      }
-    ],
-    transformers: [
-      transformerVariantGroup()
-      // {
-      //   name: 'find-classes-in-quasar-src',
-      //   enforce: 'pre', // enforce before other transformers
-      //   idFilter(id) {
-      //     return id.match(/quasar\/src\/.*\.js/)
-      //   },
-      //   async transform(code, id, { uno }) {
-      //     for (const c of baseSafelist) {
-      //       if (code.toString().includes(c)) console.log(c)
-      //     }
-      //     return code
-      //     // code is a MagicString instance
-      //   }
-      // }
-    ]
-  }
+      ],
+      transformers: [
+        transformerVariantGroup()
+        // {
+        //   name: 'find-classes-in-quasar-src',
+        //   enforce: 'pre', // enforce before other transformers
+        //   idFilter(id) {
+        //     return id.match(/quasar\/src\/.*\.js/)
+        //   },
+        //   async transform(code, id, { uno }) {
+        //     for (const c of baseSafelist) {
+        //       if (code.toString().includes(c)) console.log(c)
+        //     }
+        //     return code
+        //     // code is a MagicString instance
+        //   }
+        // }
+      ]
+    } as Preset
+  ]
 })
 
 export const defaultSplitRE = /[\\:]?[\s'"`;{}]+/g

package/src/node/plugins/quasar/unocss/plugins/QLoading.unocss.ts

@@ -7,7 +7,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-loading__backdrop$/,
     ([, c], { theme }) =>
-      `fixed top-0 right-0 bottom-0 left-0 opacity-50 bg-[#000] [transition:background-color_0.28s]`
+      `fixed top-0 right-0 bottom-0 left-0 opacity-50 bg-[#000] [transition:background-color_0.28s] z--1`
   ],
 
   [

package/src/node/plugins/quasar/unocss/plugins/QNotify.unocss.ts

@@ -43,7 +43,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-notifications__list$/,
     ([, c], { theme }) =>
-      `pointer-events-none left-0 right-0 mb-[10px] relative z-9500`
+      `pointer-events-none left-0 right-0 mb-[10px] relative z-${theme.quasar.z['notify']}`
   ],
 
   [/^q-notifications__list--center$/, ([, c], { theme }) => `top-0 bottom-0`],
@@ -56,7 +56,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-notification$/,
     ([, c], { theme }) =>
       `[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] inline-flex mt-[10px] mx-[10px] mb-[0] [transition:transform_1s,_opacity_1s] flex-shrink-0 max-w-[95vw] bg-[#323232] text-[#fff] text-[14px]
-      sm:max-w-65vw z-9500 pointer-events-all`
+      sm:max-w-65vw z-${theme.quasar.z['notify']} pointer-events-all`
   ],
 
   [
@@ -129,92 +129,110 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [
     /^q-notification--top-left-enter-from$/,
-    ([, c], { theme }) => `opacity-0 -translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 -translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--top-left-leave-to$/,
-    ([, c], { theme }) => `opacity-0 -translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 -translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--top-enter-from$/,
-    ([, c], { theme }) => `opacity-0 -translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 -translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--top-leave-to$/,
-    ([, c], { theme }) => `opacity-0 -translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 -translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--top-right-enter-from$/,
-    ([, c], { theme }) => `opacity-0 -translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 -translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--top-right-leave-to$/,
-    ([, c], { theme }) => `opacity-0 -translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 -translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--left-enter-from$/,
-    ([, c], { theme }) => `opacity-0 [transform:rotateX(90deg)] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 [transform:rotateX(90deg)] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--left-leave-to$/,
-    ([, c], { theme }) => `opacity-0 [transform:rotateX(90deg)] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 [transform:rotateX(90deg)] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--center-enter-from$/,
-    ([, c], { theme }) => `opacity-0 [transform:rotateX(90deg)] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 [transform:rotateX(90deg)] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--center-leave-to$/,
-    ([, c], { theme }) => `opacity-0 [transform:rotateX(90deg)] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 [transform:rotateX(90deg)] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--right-enter-from$/,
-    ([, c], { theme }) => `opacity-0 [transform:rotateX(90deg)] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 [transform:rotateX(90deg)] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--right-leave-to$/,
-    ([, c], { theme }) => `opacity-0 [transform:rotateX(90deg)] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 [transform:rotateX(90deg)] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--bottom-left-enter-from$/,
-    ([, c], { theme }) => `opacity-0 translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--bottom-left-leave-to$/,
-    ([, c], { theme }) => `opacity-0 translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--bottom-enter-from$/,
-    ([, c], { theme }) => `opacity-0 translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--bottom-leave-to$/,
-    ([, c], { theme }) => `opacity-0 translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--bottom-right-enter-from$/,
-    ([, c], { theme }) => `opacity-0 translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [
     /^q-notification--bottom-right-leave-to$/,
-    ([, c], { theme }) => `opacity-0 translate-y-[50px] z-9499`
+    ([, c], { theme }) =>
+      `opacity-0 translate-y-[50px] z-${theme.quasar.z['notify'] - 1}`
   ],
 
   [

package/src/node/plugins/quasar/unocss/theme.ts

@@ -17,7 +17,7 @@ export interface QuasarTheme {
     warning: string
 
     'dark-page': string
-    'q-dark': string
+    dark: string
 
     red: string
     'red-1': string
@@ -1117,6 +1117,14 @@ export interface QuasarTheme {
       'q-notification--bottom-leave-active'?: string
       'q-notification--bottom-right-leave-active'?: string
     }
+    spaces: {
+      none: number
+      xs: number
+      sm: number
+      md: number
+      lg: number
+      xl: number
+    }
     z: {
       fab: number
       side: number
@@ -1155,7 +1163,7 @@ const defaultTheme: QuasarTheme = {
     warning: '#F2C037',
 
     'dark-page': '#121212',
-    'q-dark': '#1d1d1d',
+    dark: '#1d1d1d',
 
     red: '#f44336',
     'red-1': '#ffebee',
@@ -1444,6 +1452,14 @@ const defaultTheme: QuasarTheme = {
     'blue-grey-14': '#455a64'
   },
   quasar: {
+    spaces: {
+      none: 0,
+      xs: 1,
+      sm: 2,
+      md: 4,
+      lg: 6,
+      xl: 12
+    },
     z: {
       fab: 990,
       side: 1000,