This plugin specifically addresses the color compatibility issues when using DaisyUI's default OKLCH color palette

daisyui-oklch-to-rgba-postcss-plugin.js

/**
 * PostCSS Plugin: OKLCH to RGB Converter for DaisyUI
 * 
 * Purpose:
 * Fixes color compatibility issues when using Tailwind CSS and DaisyUI in Capacitor apps.
 * Specifically targets the OKLCH color space which isn't fully supported in WebView environments.
 * 
 * Problem:
 * - DaisyUI uses OKLCH colors by default
 * - Capacitor's WebView on certain platforms has inconsistent support for OKLCH
 * - This causes colors to render incorrectly or not at all in mobile apps
 * 
 * Solution:
 * This plugin automatically converts all OKLCH colors to RGB format during build,
 * ensuring consistent color rendering across all platforms and devices.
 */

// Import color conversion utilities from culori library
import { oklch, formatRgb } from 'culori';

// PostCSS plugin to convert OKLCH colors to RGB format
export default function postcssPlugin() {
  return {
    // Plugin name for PostCSS
    postcssPlugin: "daisyui-oklch-to-rgba-postcss-plugin",
    
    // Once hook runs once for the whole CSS file
    Once(root) {
      // Walk through all CSS declarations (properties and values)
      root.walkDecls(decl => {
        // Regular expression to match OKLCH color values
        // Captures:
        // - Lightness (can be percentage or decimal)
        // - Chroma (decimal)
        // - Hue (decimal)
        // - Optional alpha value
        const oklchRegex = /oklch\(([0-9.]+%?)\s+([0-9.]+)\s+([0-9.]+(?:\.[0-9]+)?)\s*(?:\/\s*([0-9.]+))?\s*\)/g;
        
        // Only process if declaration contains 'oklch'
        if (decl.value.includes('oklch')) {
          // Replace each OKLCH color with its RGB equivalent
          decl.value = decl.value.replace(oklchRegex, (match, l, c, h, a = 1) => {
            // Convert percentage lightness to decimal if needed
            const lightness = l.endsWith('%') ? parseFloat(l) / 100 : parseFloat(l);
            
            // Convert OKLCH to RGB using culori
            const rgb = oklch({
              mode: 'oklch',
              l: lightness,          // Lightness component
              c: parseFloat(c),      // Chroma component
              h: parseFloat(h),      // Hue component
              alpha: parseFloat(a)   // Alpha/opacity component
            });
            
            // Return the color in RGB format
            return formatRgb(rgb);
          });
        }
      });
    }
  };
};

// Mark as PostCSS plugin
export const postcss = true;

postcss.config.mjs

import postcssPlugin from './daisyui-oklch-to-rgba-postcss-plugin.js';
import tailwindcss from '@tailwindcss/postcss';

export default {
  plugins: [
    tailwindcss(),
    postcssPlugin(),
  ],
}