unocss-preset-quasar 0.1.1 → 0.1.3

package/dist/types/index.d.ts

@@ -1,19 +1,15 @@
 import { type Preset } from 'unocss';
 import { type QuasarIconSet, type QuasarPlugins } from 'quasar';
+import { type QuasarStyle } from './styles/index.js';
 import { WebFontsOptions } from '@unocss/preset-web-fonts/index.js';
 export interface QuasarPresetOptions {
-    style: keyof typeof QuasarStyles;
-    primaryColor?: string;
+    style: QuasarStyle;
+    sourceColor?: string;
     plugins?: (keyof QuasarPlugins)[];
     iconSet?: QuasarIconSet;
     presetWebFonts?: WebFontsOptions;
 }
-declare const QuasarStyles: {
-    md2: Promise<typeof import("./styles/md2/index.js")>;
-    md3: Promise<typeof import("./styles/md3/index.js")>;
-};
 export declare const QuasarPreset: Preset<object>;
 export declare const defaultSplitRE: RegExp;
 export declare const splitWithVariantGroupRE: RegExp;
 export declare function splitCode(code: string): string[];
-export {};

package/dist/types/styles/index.d.ts

@@ -1,11 +1,11 @@
 import { Preflight, Rule, UserShortcuts, Variant } from '@unocss/core';
 import { QuasarTheme } from '../theme.js';
-import { setDefaultProps as setDefaultPropsMd2 } from './md2/index.js';
-import { setDefaultProps as setDefaultPropsMd3 } from './md3/index.js';
+import { default as MaterialDesign2, setDefaultProps as setDefaultPropsMd2 } from './md2/index.js';
+import { default as MaterialDesign3, setDefaultProps as setDefaultPropsMd3 } from './md3/index.js';
 export interface QuasarStyle {
     rules: Rule<QuasarTheme>[];
     variants: Variant<QuasarTheme>[];
     preflights: Preflight<QuasarTheme>[];
     shortcuts: UserShortcuts<QuasarTheme>[];
 }
-export { setDefaultPropsMd2, setDefaultPropsMd3 };
+export { MaterialDesign2, MaterialDesign3, setDefaultPropsMd2, setDefaultPropsMd3 };

package/dist/types/theme.d.ts

@@ -1,4 +1,41 @@
-import { type IMaterialDynamicColorsThemeColor } from 'material-dynamic-colors/src/cdn/interfaces';
+interface MaterialColorScheme {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    background: string;
+    onBackground: string;
+    surface: string;
+    onSurface: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    outline: string;
+    outlineVariant: string;
+    shadow: string;
+    scrim: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+}
 export interface QuasarTheme {
     typography: {
         fontFamily: string;
@@ -11,8 +48,8 @@ export interface QuasarTheme {
         xl: string;
     };
     colors: {
-        light: IMaterialDynamicColorsThemeColor;
-        dark: IMaterialDynamicColorsThemeColor;
+        light: MaterialColorScheme;
+        dark: MaterialColorScheme;
         primary: string;
         secondary: string;
         accent: string;
@@ -1150,5 +1187,5 @@ export interface QuasarTheme {
     };
 }
 declare const defaultTheme: QuasarTheme;
-export declare const generateTheme: (primaryColor?: string) => Promise<QuasarTheme>;
+export declare const generateTheme: (sourceColor: string) => QuasarTheme;
 export { defaultTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unocss-preset-quasar",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "UnoCSS preset for Quasar Framework",
@@ -29,27 +29,27 @@
   },
   "homepage": "https://github.com/simsustech/unocss-preset-quasar/tree/main/#readme",
   "dependencies": {
+    "@material/material-color-utilities": "^0.3.0",
     "@unocss/core": "^66.0.0",
     "@unocss/preset-uno": "^66.0.0",
-    "@unocss/preset-web-fonts": "66.1.0-beta.8",
+    "@unocss/preset-web-fonts": "66.1.0-beta.10",
     "@unocss/preset-wind": "^66.0.0",
     "animated-unocss": "^0.0.6",
-    "material-dynamic-colors": "^1.1.2",
-    "unocss": "66.1.0-beta.8"
+    "unocss": "66.1.0-beta.10"
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.2.3",
     "@quasar/extras": "^1.16.17",
     "@quasar/quasar-ui-qmarkdown": "^2.0.5",
     "@quasar/quasar-ui-qmediaplayer": "^2.0.0-beta.0",
-    "@types/node": "^22.13.17",
+    "@types/node": "^22.14.0",
     "@unocss/preset-icons": "^66.0.0",
-    "@unocss/preset-mini": "66.1.0-beta.8",
+    "@unocss/preset-mini": "66.1.0-beta.10",
     "quasar": "^2.18.1",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "quasar": "^2.17.7"
+    "quasar": "^2.18.1"
   },
   "publishConfig": {
     "access": "public",

package/src/index.ts

@@ -5,8 +5,8 @@ import {
   presetWebFonts,
   transformerVariantGroup
 } from 'unocss'
-import presetUno from '@unocss/preset-uno'
-import { defaultTheme, generateTheme } from './theme.js'
+import presetWind3 from '@unocss/preset-wind3'
+import { generateTheme } from './theme.js'
 import { animatedUno } from 'animated-unocss'
 
 import {
@@ -24,18 +24,13 @@ import {
 import { WebFontsOptions } from '@unocss/preset-web-fonts/index.js'
 
 export interface QuasarPresetOptions {
-  style: keyof typeof QuasarStyles
-  primaryColor?: string
+  style: QuasarStyle
+  sourceColor?: string
   plugins?: (keyof QuasarPlugins)[]
   iconSet?: QuasarIconSet
   presetWebFonts?: WebFontsOptions
 }
 
-const QuasarStyles = {
-  md2: import('./styles/md2/index.js'),
-  md3: import('./styles/md3/index.js')
-}
-
 const extractKeys = (obj: Record<string, any>) =>
   Object.values(obj).reduce((acc, cur) => {
     if (typeof cur === 'string') acc.push(cur)
@@ -102,6 +97,64 @@ const QTabSafelist = [
   'q-tab--active',
   'q-tab--inactive'
 ]
+const QSliderSafelist = [
+  'q-slider',
+  'q-slider--h',
+  'q-slider--v',
+  'q-slider--editable',
+  'q-slider__track-container',
+  'q-slider__track-container--h',
+  'q-slider__track-container--v',
+  'q-slider__track',
+  'q-slider__inner',
+  'q-slider__selection',
+  'q-slider__markers',
+  'q-slider__markers--h',
+  'q-slider__markers--v',
+  'q-slider__marker-labels-container',
+  'q-slider__marker-labels',
+  'q-slider__marker-labels--h-standard',
+  'q-slider__marker-labels--h-switched',
+  'q-slider__marker-labels--h-ltr',
+  'q-slider__marker-labels--h-rtl',
+  'q-slider__marker-labels--v-standard',
+  'q-slider__marker-labels--v-switched',
+  'q-slider__marker-labels--v-ltr',
+  'q-slider__marker-labels--v-rtl',
+  'q-slider__thumb',
+  'q-slider__thumb--h',
+  'q-slider__thumb--h-ltr',
+  'q-slider__thumb--h-rtl',
+  'q-slider__thumb--v',
+  'q-slider__thumb--v-ltr',
+  'q-slider__thumb--v-rtl',
+  'q-slider__thumb-shape',
+  'q-slider__focus-ring',
+  'q-slider__pin',
+  'q-slider__pin--h',
+  'q-slider__pin--h-standard',
+  'q-slider__pin--h-switched',
+  'q-slider__pin--v',
+  'q-slider__pin--v-standard',
+  'q-slider__pin--v-switched',
+  'q-slider__label',
+  'q-slider__label--h',
+  'q-slider__label--h-standard',
+  'q-slider__label--h-switched',
+  'q-slider__label--v',
+  'q-slider__label--v-standard',
+  'q-slider__label--v-switched',
+  'q-slider__text-container',
+  'q-slider__text',
+  'q-slider--no-value',
+  'q-slider--focus',
+  'q-slider--inactive',
+  'q-slider--active',
+  'q-slider--label',
+  'q-slider--dark',
+  'q-slider--dense'
+]
+
 const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
   {
     QIcon: ['q-icon'],
@@ -567,6 +620,7 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
       'q-radio--dark',
       'q-radio--dense'
     ],
+    QRange: QSliderSafelist,
     QRating: [
       'q-rating',
       'q-rating__icon-container',
@@ -643,63 +697,7 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
       'q-slide-item__bottom',
       'q-slide-item__content'
     ],
-    QSlider: [
-      'q-slider',
-      'q-slider--h',
-      'q-slider--v',
-      'q-slider--editable',
-      'q-slider__track-container',
-      'q-slider__track-container--h',
-      'q-slider__track-container--v',
-      'q-slider__track',
-      'q-slider__inner',
-      'q-slider__selection',
-      'q-slider__markers',
-      'q-slider__markers--h',
-      'q-slider__markers--v',
-      'q-slider__marker-labels-container',
-      'q-slider__marker-labels',
-      'q-slider__marker-labels--h-standard',
-      'q-slider__marker-labels--h-switched',
-      'q-slider__marker-labels--h-ltr',
-      'q-slider__marker-labels--h-rtl',
-      'q-slider__marker-labels--v-standard',
-      'q-slider__marker-labels--v-switched',
-      'q-slider__marker-labels--v-ltr',
-      'q-slider__marker-labels--v-rtl',
-      'q-slider__thumb',
-      'q-slider__thumb--h',
-      'q-slider__thumb--h-ltr',
-      'q-slider__thumb--h-rtl',
-      'q-slider__thumb--v',
-      'q-slider__thumb--v-ltr',
-      'q-slider__thumb--v-rtl',
-      'q-slider__thumb-shape',
-      'q-slider__focus-ring',
-      'q-slider__pin',
-      'q-slider__pin--h',
-      'q-slider__pin--h-standard',
-      'q-slider__pin--h-switched',
-      'q-slider__pin--v',
-      'q-slider__pin--v-standard',
-      'q-slider__pin--v-switched',
-      'q-slider__label',
-      'q-slider__label--h',
-      'q-slider__label--h-standard',
-      'q-slider__label--h-switched',
-      'q-slider__label--v',
-      'q-slider__label--v-standard',
-      'q-slider__label--v-switched',
-      'q-slider__text-container',
-      'q-slider__text',
-      'q-slider--no-value',
-      'q-slider--focus',
-      'q-slider--inactive',
-      'q-slider--active',
-      'q-slider--label',
-      'q-slider--dark',
-      'q-slider--dense'
-    ],
+    QSlider: QSliderSafelist,
     QSpace: ['q-space'],
     QSpinner: ['q-spinner', 'q-spinner-mat'],
     QSplitter: [
@@ -1517,148 +1515,142 @@ const generateSafelist = ({
   return safelist
 }
 
-export const QuasarPreset = definePreset(
-  async (options?: QuasarPresetOptions) => {
-    if (!options)
-      options = {
-        style: 'md2',
-        primaryColor: '#CEB8F1'
-      }
-    if (!Object.keys(QuasarStyles).includes(options.style))
-      throw new Error('Unsupported Quasar style')
+export const QuasarPreset = definePreset((options: QuasarPresetOptions) => {
+  if (!options.sourceColor) {
+    options.sourceColor = '#806cb0'
+  }
 
-    const style: QuasarStyle = (await QuasarStyles[options.style]).default
-    const theme = await generateTheme(options.primaryColor)
+  const style = options.style
+  const theme = generateTheme(options.sourceColor)
 
-    return [
-      presetUno({
-        dark: {
-          light: '.body--light',
-          dark: '.body--dark'
-        }
-      }),
-      animatedUno(),
-      presetIcons({}),
-      presetWebFonts(
-        options.presetWebFonts || {
-          provider: 'bunny',
-          fonts: {
-            roboto: 'Roboto'
-          }
+  return [
+    presetWind3({
+      dark: {
+        light: '.body--light',
+        dark: '.body--dark'
+      }
+    }),
+    animatedUno(),
+    presetIcons({}),
+    presetWebFonts(
+      options.presetWebFonts || {
+        provider: 'bunny',
+        fonts: {
+          roboto: 'Roboto'
         }
-      ),
-      {
-        name: 'quasar',
-        safelist: generateSafelist(options),
-        preflights: corePreflights.concat(style.preflights),
-        rules: coreRules.concat(style.rules),
-        variants: style.variants,
-        shortcuts: coreShortcuts.concat(style.shortcuts),
-        theme,
-        outputToCssLayers: true,
-        layers: {
-          components: -1,
-          default: 1,
-          utilities: 2
-        },
-        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[=|:]"(.*?)"/g)
-
-              const pascalComponentsMatch: string[] = []
-              const matches: string[] = []
+      }
+    ),
+    {
+      name: 'quasar',
+      safelist: generateSafelist(options),
+      preflights: corePreflights.concat(style.preflights),
+      rules: coreRules.concat(style.rules),
+      variants: style.variants,
+      shortcuts: coreShortcuts.concat(style.shortcuts),
+      theme,
+      outputToCssLayers: true,
+      layers: {
+        components: -1,
+        default: 1,
+        utilities: 2
+      },
+      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[=|:]"(.*?)"/g)
 
-              for (const match of kebabMatch) {
-                matches.push(match[0])
-                pascalComponentsMatch.push(toPascalCase(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 pascalComponentsMatch: string[] = []
+            const matches: string[] = []
 
-              // 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 classes = []
-              const componentClasses = [
-                ...matches,
-                ...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
+            for (const match of kebabMatch) {
+              matches.push(match[0])
+              pascalComponentsMatch.push(toPascalCase(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}`)
               )
-              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) => {
+            //     component = component.replaceAll(
+            //       'q-chat-message',
+            //       'q-message'
+            //     )
+            //     component = component.replaceAll(
+            //       'q-scroll-area',
+            //       'q-scrollarea'
+            //     )
+            //     return c.includes(component)
+            //   })
+            // )
+            const classes = []
+            const componentClasses = [
+              ...matches,
+              ...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
           }
-        ],
-        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
-    ]
-  }
-)
+        }
+      ],
+      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
 export const splitWithVariantGroupRE = /([\\:]?[\s"'`;<>]|:\(|\)"|\)\s)/g

package/src/styles/index.ts

@@ -1,7 +1,13 @@
 import { Preflight, Rule, UserShortcuts, Variant } from '@unocss/core'
 import { QuasarTheme } from '../theme.js'
-import { setDefaultProps as setDefaultPropsMd2 } from './md2/index.js'
-import { setDefaultProps as setDefaultPropsMd3 } from './md3/index.js'
+import {
+  default as MaterialDesign2,
+  setDefaultProps as setDefaultPropsMd2
+} from './md2/index.js'
+import {
+  default as MaterialDesign3,
+  setDefaultProps as setDefaultPropsMd3
+} from './md3/index.js'
 
 export interface QuasarStyle {
   rules: Rule<QuasarTheme>[]
@@ -10,4 +16,9 @@ export interface QuasarStyle {
   shortcuts: UserShortcuts<QuasarTheme>[]
 }
 
-export { setDefaultPropsMd2, setDefaultPropsMd3 }
+export {
+  MaterialDesign2,
+  MaterialDesign3,
+  setDefaultPropsMd2,
+  setDefaultPropsMd3
+}