@howssatoshi/quantumcss 1.7.3 → 1.7.5

package/src/generator.js

@@ -11,6 +11,8 @@ function generateCSS(configPath) {
   const config = fs.existsSync(resolvedPath) ? require(resolvedPath) : { content: [], theme: {} };
   
   const theme = JSON.parse(JSON.stringify(defaultTheme || {}));
+  const currentUtilityMaps = { ...utilityMaps };
+  
   theme.colors = theme.colors || {};
   theme.spacing = theme.spacing || {};
   theme.borderRadius = theme.borderRadius || {};
@@ -40,17 +42,59 @@ function generateCSS(configPath) {
   function resolveColor(key) {
     if (!key) return null;
     if (flattenedColors[key]) return flattenedColors[key];
-    if (key.includes('/')) {
-      const [base, opacity] = key.split('/');
-      const color = flattenedColors[base] || flattenedColors[`${base}-500`];
-      if (color && color.startsWith('#')) {
-        const r = parseInt(color.slice(1, 3), 16), g = parseInt(color.slice(3, 5), 16), b = parseInt(color.slice(5, 7), 16);
-        return `rgba(${r}, ${g}, ${b}, ${parseInt(opacity) / 100})`;
+    if (key.includes('_')) {
+      const parts = key.split('_');
+      // If it's a color with opacity (e.g. primary_50)
+      if (parts.length === 2 && !isNaN(parseInt(parts[1]))) {
+        const [base, opacity] = parts;
+        const color = flattenedColors[base] || flattenedColors[`${base}-500`];
+        if (color && color.startsWith('#')) {
+          const r = parseInt(color.slice(1, 3), 16), g = parseInt(color.slice(3, 5), 16), b = parseInt(color.slice(5, 7), 16);
+          return `rgba(${r}, ${g}, ${b}, ${parseInt(opacity) / 100})`;
+        }
       }
     }
     return null;
   }
 
+  const postProcessors = [];
+
+  // Load Plugins
+  if (config.plugins && Array.isArray(config.plugins)) {
+    config.plugins.forEach(pluginPath => {
+      try {
+        // Support both relative paths and node_modules
+        let resolvedPluginPath;
+        try {
+          resolvedPluginPath = require.resolve(pluginPath, { paths: [process.cwd(), __dirname] });
+        } catch {
+          resolvedPluginPath = path.resolve(process.cwd(), pluginPath);
+        }
+
+        if (fs.existsSync(resolvedPluginPath)) {
+          delete require.cache[resolvedPluginPath];
+          const plugin = require(resolvedPluginPath);
+          if (typeof plugin === 'function') {
+            const result = plugin({ 
+              theme, 
+              utilityMaps: currentUtilityMaps, 
+              componentPresets: config.componentPresets || {}, 
+              flattenedColors,
+              addUtilities: (newUtils) => Object.assign(currentUtilityMaps, newUtils)
+            });
+            
+            // If plugin returns an object with transformCSS, add it to postProcessors
+            if (result && typeof result.transformCSS === 'function') {
+              postProcessors.push(result.transformCSS);
+            }
+          }
+        }
+      } catch (err) {
+        console.error(`❌ Error loading plugin ${pluginPath}:`, err);
+      }
+    });
+  }
+
   const getRGBA = (color) => {
     if (!color || color === 'transparent') return 'rgba(0,0,0,0)';
     if (color.startsWith('rgba')) return color;
@@ -69,15 +113,38 @@ function generateCSS(configPath) {
 
   const files = (config.content || []).flatMap(p => glob.sync(p));
   const rawClasses = new Set();
+  
+  // Scanners
   const classAttrRegex = /class="([^"]+)"/g;
+  const variants = ['sm', 'md', 'lg', 'xl', '2xl', 'dark', 'light', 'hover', 'focus', 'active', 'group-hover'];
+  const variantRegexes = variants.map(v => ({
+    variant: v,
+    regex: new RegExp(`\\s${v}="([^"]+)"`, 'g')
+  }));
 
   files.forEach(file => {
     try {
       const content = fs.readFileSync(file, 'utf8');
+      
+      // 1. Match standard class="..."
       let match;
       while ((match = classAttrRegex.exec(content)) !== null) {
         match[1].split(/\s+/).forEach(cls => { if (cls) rawClasses.add(cls); });
       }
+      
+      // 2. Match attribute lanes (e.g., md="flex gap-4")
+      variantRegexes.forEach(({ variant, regex }) => {
+        regex.lastIndex = 0;
+        while ((match = regex.exec(content)) !== null) {
+          match[1].split(/\s+/).forEach(cls => {
+            if (cls) {
+              // We convert attribute-based utilities to a canonical internal format
+              // using the __ separator, which getRulesForClass already understands.
+              rawClasses.add(`${variant}__${cls}`);
+            }
+          });
+        }
+      });
     } catch {
       // Ignore errors reading files
     }
@@ -95,7 +162,7 @@ function generateCSS(configPath) {
    * @returns {string} The escaped selector
    */
   const escapeSelector = (cls) => {
-    return cls.replace(/([:[\]/.\\])/g, '\\$1');
+    return cls.replace(/([:.[\]\\])/g, '\\$1');
   };
 
   const sideMap = {
@@ -111,20 +178,30 @@ function generateCSS(configPath) {
   function getRulesForClass(fullCls, processedPresets = new Set()) {
     let cls = fullCls, variant = null, breakpoint = null, isNeg = false;
     if (cls.startsWith('-')) { isNeg = true; cls = cls.substring(1); }
-    const parts = cls.split(':');
+    
+    // Support both : and __ as separators
+    const parts = cls.includes('__') ? cls.split('__') : cls.split(':');
+    
     let currentPart = 0;
     while (currentPart < parts.length) {
       const p = parts[currentPart];
       if (breakpoints[p]) { breakpoint = p; }
       else if (p === 'dark') { breakpoint = 'dark'; }
       else if (p === 'light') { breakpoint = 'light'; }
-      else if (['hover', 'focus', 'placeholder', 'group-hover'].includes(p)) { variant = p; }
-      else { cls = parts.slice(currentPart).join(':'); break; }
+      else if (['hover', 'focus', 'active', 'placeholder', 'group-hover'].includes(p)) { variant = p; }
+      else { 
+        // Reconstruct the remaining class part
+        cls = parts.slice(currentPart).join(cls.includes('__') ? '__' : ':'); 
+        break; 
+      }
       currentPart++;
     }
 
     // Check Presets (User Config & Defaults)
-    const presetValue = (config.componentPresets && config.componentPresets[cls]) || (utilityMaps[cls] && typeof utilityMaps[cls] === 'string' ? utilityMaps[cls] : null);
+    let presetValue = config.componentPresets && config.componentPresets[cls];
+    if (!presetValue && currentUtilityMaps[cls] && typeof currentUtilityMaps[cls] === 'string') {
+      presetValue = currentUtilityMaps[cls];
+    }
     
     if (presetValue && !processedPresets.has(cls)) {
       processedPresets.add(cls);
@@ -146,9 +223,13 @@ function generateCSS(configPath) {
     }
 
     let property = null, value = null, customSelector = null;
-    if (utilityMaps[cls] && typeof utilityMaps[cls] === 'object') {
-      const entry = utilityMaps[cls];
-      if (!Array.isArray(entry)) { property = entry.property; value = entry.value; }
+    if (currentUtilityMaps[cls] && typeof currentUtilityMaps[cls] === 'object') {
+      const entry = currentUtilityMaps[cls];
+      if (!Array.isArray(entry)) { 
+        property = entry.property; 
+        value = entry.value; 
+        if (entry.variant && !variant) variant = entry.variant;
+      }
       else { property = entry; }
     }
 
@@ -156,7 +237,10 @@ function generateCSS(configPath) {
       const cParts = cls.split('-');
       let prefix = cParts[0], valKey = cParts.slice(1).join('-');
       
-      if ((prefix === 'max' || prefix === 'min' || prefix === 'gap' || prefix === 'gap-x' || prefix === 'gap-y') && cParts[1]) {
+      if (cParts[0] === 'focus' && cParts[1] === 'glow') {
+        prefix = 'focus-glow';
+        valKey = cParts.slice(2).join('-');
+      } else if ((prefix === 'max' || prefix === 'min' || prefix === 'gap' || prefix === 'gap-x' || prefix === 'gap-y') && cParts[1]) {
         if (['w', 'h', 'x', 'y'].includes(cParts[1])) {
           prefix = `${cParts[0]}-${cParts[1]}`;
           valKey = cParts.slice(2).join('-');
@@ -165,7 +249,7 @@ function generateCSS(configPath) {
 
       if (prefix === 'text') {
         if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
-        else { const color = resolveColor(valKey); if (color) { property = 'color'; value = color; } }
+        else { const color = resolveColor(valKey); if (color) { property = 'color'; value = `${color} !important`; } }
       } else if (prefix === 'bg') {
         if (cParts[1] === 'gradient' && cParts[2] === 'to') {
           const dirMap = { r: 'to right', l: 'to left', t: 'to top', b: 'to bottom', tr: 'to top right', tl: 'to top left', br: 'to bottom right', bl: 'to bottom left' };
@@ -176,14 +260,14 @@ function generateCSS(configPath) {
             const rules = [
               '  --q-gradient-from-transparent: rgba(0,0,0,0);',
               '  --q-gradient-to-transparent: rgba(0,0,0,0);',
-              `  ${property}: ${value};`,
+              `  ${property}: ${value} !important;`,
               '  --q-gradient-stops: var(--q-gradient-from, var(--q-gradient-from-transparent)), var(--q-gradient-to, var(--q-gradient-to-transparent));'
             ];
             return [{ breakpoint: null, variant: null, customSelector: null, rules }];
           }
         }
         const color = resolveColor(valKey); 
-        if (color) { property = 'background-color'; value = color; } 
+        if (color) { property = 'background-color'; value = `${color} !important`; } 
       } else if (prefix === 'from') {
         const color = resolveColor(valKey);
         if (color) {
@@ -214,10 +298,10 @@ function generateCSS(configPath) {
       else if (prefix === 'aspect') {
         property = ['aspect-ratio', 'width', 'height'];
         let ratio = 'auto';
-        if (valKey.startsWith('[') && valKey.endsWith(']')) ratio = valKey.slice(1, -1).replace(/\//g, ' / ');
+        if (valKey.startsWith('[') && valKey.endsWith(']')) ratio = valKey.slice(1, -1).replace(/_/g, ' / ');
         else if (valKey === 'video') ratio = '16 / 9';
         else if (valKey === 'square') ratio = '1 / 1';
-        else ratio = valKey.replace(/\//g, ' / ');
+        else ratio = valKey.replace(/_/g, ' / ');
         value = [ratio, '100%', 'auto'];
       } else if (prefix === 'grid' && cParts[1] === 'cols') {
         property = 'grid-template-columns'; value = `repeat(${cParts[2]}, minmax(0, 1fr))`;
@@ -258,7 +342,7 @@ function generateCSS(configPath) {
         property = sideMap[prefix];
         let v = valKey;
         if (v.startsWith('[') && v.endsWith(']')) v = v.slice(1, -1);
-        else if (v.includes('/')) v = `${(parseFloat(v.split('/')[0]) / parseFloat(v.split('/')[1]) * 100).toFixed(2)}%`;
+        else if (v.includes('_')) v = `${(parseFloat(v.split('_')[0]) / parseFloat(v.split('_')[1]) * 100).toFixed(2)}%`;
         else {
           // Priority: 1. Specific theme map (e.g. maxWidth for max-w) 2. spacing map 3. Numeric conversion 4. raw value
           const themeMap = prefix === 'max-w' ? theme.maxWidth : (theme[prefix] || theme.spacing);
@@ -268,15 +352,36 @@ function generateCSS(configPath) {
       } else if (prefix === 'shadow') {
         if (theme.shadows[valKey]) { property = 'box-shadow'; value = theme.shadows[valKey]; }
         else if (valKey === '') { property = 'box-shadow'; value = theme.shadows.md || '0 4px 6px -1px rgb(0 0 0 / 0.1)'; }
-      }
-      else if (prefix === 'border') {
+      } else if (prefix === 'border') {
         const color = resolveColor(valKey);
         if (color) { property = 'border-color'; value = color; }
         else if (['l', 'r', 't', 'b'].includes(cParts[1])) {
           const sideMapSide = { l: 'left', r: 'right', t: 'top', b: 'bottom' };
-          property = `border-${sideMapSide[cParts[1]]}-width`;
-          value = `${cParts[2]}px`;
-        } else if (!isNaN(parseInt(valKey))) { property = 'border-width'; value = `${parseInt(valKey)}px`; }
+          const width = cParts[2] ? `${cParts[2]}px` : '1px';
+          property = ['border-width', `border-${sideMapSide[cParts[1]]}-width`, 'border-style'];
+          value = ['0', width, 'solid'];
+        } else if (!isNaN(parseInt(valKey))) { 
+          property = ['border-width', 'border-style']; 
+          value = [`${parseInt(valKey)}px`, 'solid']; 
+        } else if (['solid', 'dashed', 'dotted', 'double', 'none'].includes(valKey)) {
+          property = 'border-style'; value = valKey;
+        }
+      } else if (prefix === 'focus-glow') {
+        const color = resolveColor(valKey) || resolveColor('primary') || '#00d4ff';
+        const rgba = getRGBA(color);
+        const glowColor = withOpacity(rgba, 0.7);
+        const ringColor = withOpacity(rgba, 0.4);
+        
+        const rules = [
+          '  outline: none !important;',
+          `  box-shadow: 0 0 0 4px ${ringColor}, 0 0 35px ${glowColor} !important;`
+        ];
+        
+        // Apply to both focus and active states for better interactive feedback
+        return [
+          { breakpoint, variant: variant || 'focus', customSelector, rules },
+          { breakpoint, variant: 'active', customSelector, rules }
+        ];
       }
     }
 
@@ -305,34 +410,70 @@ function generateCSS(configPath) {
     merged.forEach(group => {
       const { breakpoint, variant, customSelector, rules } = group;
       const escapedFull = escapeSelector(fullCls);
-      let selector = customSelector || `.${escapedFull}`;
-      if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}
       
-      if (breakpoint === 'light') {
-        const block = `html[data-theme="light"] ${selector}, body.light-mode ${selector} {
-${rules.join('\n')}
+      // Generate multiple selectors for maximum compatibility
+      const selectors = [];
+      
+      if (customSelector) {
+        selectors.push(customSelector);
+      } else {
+        // 1. Standard class selector (e.g., .md:flex or .md__flex)
+        let classSelector = `.${escapedFull}`;
+        if (variant) {
+          if (variant === 'group-hover') classSelector = `.group:hover ${classSelector}`;
+          else classSelector += `:${variant}`;
+        }
+        selectors.push(classSelector);
+
+        // 2. Attribute-based selector (e.g., [md~="flex"])
+        // If the class has a variant/breakpoint prefix, we can support it as an attribute
+        const separator = fullCls.includes('__') ? '__' : ':';
+        const parts = fullCls.split(separator);
+        if (parts.length > 1) {
+          const prefix = parts[0];
+          const utility = parts.slice(1).join(separator);
+          let attrSelector = `[${prefix}~="${utility}"]`;
+          
+          if (variant && variant !== 'group-hover' && variant === prefix) {
+             // Already covered by attribute name (e.g. [hover~="text-primary"])
+             // but we still need the :hover pseudo-class if it's a state
+             if (['hover', 'focus', 'active'].includes(variant)) {
+               attrSelector += `:${variant}`;
+             }
+          } else if (variant) {
+            if (variant === 'group-hover') attrSelector = `.group:hover ${attrSelector}`;
+            else attrSelector += `:${variant}`;
+          }
+          selectors.push(attrSelector);
+        }
+      }
+
+      selectors.forEach(selector => {
+        if (breakpoint === 'light') {
+          const block = `html[data-theme="light"] ${selector}, body.light-mode ${selector} {
+  ${rules.join('\n').trim()}
 }
 `;
-        utilities.add(block);
-      } else if (breakpoint === 'dark') {
-        const block = `html[data-theme="dark"] ${selector}, body.dark-mode ${selector} {
-${rules.join('\n')}
+          utilities.add(block);
+        } else if (breakpoint === 'dark') {
+          const block = `html[data-theme="dark"] ${selector}, body.dark-mode ${selector} {
+  ${rules.join('\n').trim()}
 }
 `;
-        utilities.add(block);
-        // Also add to media query for system preference
-        const mediaBlock = `${selector} {
-${rules.join('\n')}
+          utilities.add(block);
+          const mediaBlock = `${selector} {
+  ${rules.join('\n').trim()}
 }
 `;
-        responsiveUtils['dark'].add(mediaBlock);
-      } else {
-        const block = `${selector} {
-${rules.join('\n')}
+          responsiveUtils['dark'].add(mediaBlock);
+        } else {
+          const block = `${selector} {
+  ${rules.join('\n').trim()}
 }
 `;
-        if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
-      }
+          if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
+        }
+      });
     });
   }
 
@@ -380,6 +521,11 @@ ${rules.join('\n')}
     css += `\n@media (prefers-color-scheme: dark) {\n${Array.from(responsiveUtils.dark).map(u => '  ' + u.replace(/\n/g, '\n  ')).join('\n').trimEnd()}\n}\n`;
   }
 
+  // Apply Post-Processors
+  postProcessors.forEach(processor => {
+    css = processor(css);
+  });
+
   return css;
 }
 

package/src/starlight.js

@@ -139,6 +139,12 @@ const Starlight = {
           e.stopPropagation();
           const isActive = toggle.classList.toggle('active');
           menu.classList.toggle('active', isActive);
+          
+          // Allow nav to wrap when menu is open so full-width menu stacks below
+          const parentNav = menu.closest('.starlight-nav') || menu.closest('.nav-glass');
+          if (parentNav) {
+            parentNav.style.flexFlow = isActive ? 'row wrap' : 'nowrap';
+          }
         });
 
         document.addEventListener('click', (e) => {

package/src/styles/quantum-base.css

@@ -105,7 +105,7 @@
 
   /* Glassmorphism */
   --q-glass-bg: rgb(255 255 255 / 3%);
-  --q-glass-border: rgb(255 255 255 / 10%);
+  --q-glass-border: rgb(255 255 255 / 5%);
   --q-glass-blur: blur(16px);
 
   /* Transitions */
@@ -190,6 +190,17 @@ input, textarea, select, button {
   padding: 0;
   margin: 0;
   background: transparent;
+  transition: box-shadow var(--q-transition-base), border-color var(--q-transition-base), transform var(--q-transition-base);
+}
+
+input:focus, 
+textarea:focus, 
+select:focus, 
+button:focus,
+input:active,
+button:active {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15), 0 0 20px rgba(0, 212, 255, 0.3);
 }
 
 textarea {

package/src/styles/quantum-components.css

@@ -1,68 +1,3 @@
-/*!
- * QuantumCSS Component Utilities & Variants
- * Advanced component patterns, states, and interactive utilities
- */
-
-/* Hover State Utilities */
-.hover\:text-primary:hover { color: var(--q-color-primary); }
-.hover\:text-secondary:hover { color: var(--q-color-secondary); }
-.hover\:text-white:hover { color: #fff; }
-.hover\:text-black:hover { color: #000; }
-
-.hover\:bg-primary:hover { background-color: var(--q-color-primary); }
-.hover\:bg-secondary:hover { background-color: var(--q-color-secondary); }
-.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
-.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
-
-.hover\:border-primary:hover { border-color: var(--q-color-primary); }
-.hover\:border-secondary:hover { border-color: var(--q-color-secondary); }
-
-.hover\:shadow-lg:hover { box-shadow: var(--q-shadow-lg); }
-.hover\:shadow-xl:hover { box-shadow: var(--q-shadow-xl); }
-
-.hover\:scale-105:hover { transform: scale(1.05); }
-.hover\:scale-110:hover { transform: scale(1.1); }
-.hover\:scale-95:hover { transform: scale(0.95); }
-
-.hover\:rotate-90:hover { transform: rotate(90deg); }
-.hover\:rotate-180:hover { transform: rotate(180deg); }
-
-.hover\:opacity-75:hover { opacity: 0.75; }
-.hover\:opacity-50:hover { opacity: 0.5; }
-.hover\:opacity-100:hover { opacity: 1; }
-
-/* Focus State Utilities */
-.focus\:outline-none:focus { outline: none; }
-.focus\:outline:focus { outline: 2px solid; outline-offset: 2px; }
-.focus\:outline-primary:focus { outline-color: var(--q-color-primary); }
-.focus\:outline-secondary:focus { outline-color: var(--q-color-secondary); }
-
-.focus\:ring:focus { box-shadow: 0 0 0 3px; }
-.focus\:ring-primary:focus { box-shadow: 0 0 0 3px var(--q-color-primary); }
-.focus\:ring-secondary:focus { box-shadow: 0 0 0 3px var(--q-color-secondary); }
-
-.focus\:border-primary:focus { border-color: var(--q-color-primary); }
-.focus\:border-secondary:focus { border-color: var(--q-color-secondary); }
-
-/* Active State Utilities */
-.active\:scale-95:active { transform: scale(0.95); }
-.active\:scale-90:active { transform: scale(0.9); }
-
-.active\:bg-primary:active { background-color: var(--q-color-primary); }
-.active\:bg-secondary:active { background-color: var(--q-color-secondary); }
-
-/* Disabled State Utilities */
-.disabled\:opacity-50:disabled { opacity: 0.5; }
-.disabled\:opacity-75:disabled { opacity: 0.75; }
-.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
-.disabled\:pointer-events-none:disabled { pointer-events: none; }
-
-/* Group Hover Utilities */
-.group:hover .group-hover\:text-primary { color: var(--q-color-primary); }
-.group:hover .group-hover\:text-white { color: #fff; }
-
-.group:hover .group-hover\:bg-primary { background-color: var(--q-color-primary); }
-.group:hover .group-hover\:bg-secondary { background-color: var(--q-color-secondary); }
 
 .group:hover .group-hover\:opacity-100 { opacity: 1; }
 .group:hover .group-hover\:scale-110 { transform: scale(1.1); }
@@ -652,7 +587,6 @@ body.light-mode .tab-button.active {
 
 .progress-bar {
   height: 100%;
-  background-color: var(--q-color-primary);
   transition: width var(--q-duration-300) var(--q-ease-in-out);
 }
 
@@ -857,7 +791,6 @@ body.light-mode .table tbody tr:hover {
 
 /* Main content area */
 .main-content {
-  padding: 1.5rem 2rem;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -921,7 +854,6 @@ body.light-mode .top-nav {
   }
   
   .main-content {
-    padding: 1rem;
   }
   
   .page-header {
@@ -1442,7 +1374,7 @@ body.light-mode .user-email {
   color: #34d399;
 }
 
-.status-active::before {
+.status-active__:before {
   background: #34d399;
 }
 
@@ -1460,7 +1392,7 @@ body.light-mode .user-email {
   color: #f87171;
 }
 
-.status-inactive::before {
+.status-inactive__:before {
   background: #f87171;
 }